制作天猫界面的简易框架

学习浮动和盒模型之后练习制作天猫界面简易框架
原网页：

要求：实现布局，实现简易框架
代码实现：

<!doctype html>
<html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{height:40px;width:100%;}.box-top{height:40px;width:1300px;background:#ccccff;margin:0 auto;}.box2{width:1300px;height:80px;margin:0 auto;padding-top:50px;background:#ccffcc;}.box-input{width:300px;height:30px;margin:0 0 0 500px;font-size:18px;}.box3{width:1300px;height:500px;margin:0 auto 100px;background:#cc66ff;}.box-ul{width:205px;height:500px;float:left;background:rgba(226,52,222,0.6);}.box4{height:330px;width:1300px;background:#99ccff;margin:0 auto;}.dis-a{width:645px;height:330px;float:left;}.dis-1{width:290px;height:330px;float:left;margin-right:10px;background:#ff6666;}.dis-2{width:345px;height:160px;float:left;background:#ff6666;margin-bottom:10px;}.dis-3{margin:0;}.dis-b{float:right;}</style></head><body><!-- 天猫官网首页布局 --><!-- 顶部导航栏区域 --><div class="box1"><div class="box-top">顶部导航栏区域</div></div><!-- 顶部导航栏区域end --><!-- 搜索框区域 --><div class="box2"><form action=""><input type="text" class="box-input" placeholder="搜索框区域" /></form></div><!-- 搜索框区域end --><!-- 轮播图区域 --><div class="box3"><span>轮播图区域</span><div class="box-ul">轮播图遮盖扩展列表</div></div><!-- 轮播图区域end --><!-- 热卖广告 --><div class="box4"><div class="dis-a"><div class="dis-1">热卖广告</div><div class="dis-2">热卖广告</div><div class="dis-2 dis-3">热卖广告</div></div><div class="dis-a dis-b"><div class="dis-1">热卖广告</div><div class="dis-2">热卖广告</div><div class="dis-2 dis-3">热卖广告</div></div></div><!-- 热卖广告end --></body>
</html>

实现效果：

总结：这里需要用到外间距（margin:）内间距（padding:）和左右浮动对齐（float:left/right）。也需要对css（层叠样式表的理解）。

制作天猫界面的简易框架相关推荐

制作淘宝界面的简易框架
(练习)淘宝页面的基本框架根据浮动,定位知识,做一个小练习,制作一个简易的淘宝页面框架. 其代码如下 <!DOCTYPE html> <html><head>&l ...
Unity项目UI管理简易框架
一.背景在一个Unity项目中或多或少需要一些UI,如设置页面,登录页面等,当页面过多时,使用一个通用的UI框架来进行针对性开发会大大减少造轮子的过程. 以下即为参考之前做过的一些项目整理出来的一个 ...
Django(part38)--制作登录界面
学习笔记,仅供参考,有错必究文章目录制作登录界面第一步第二步第三步第四步制作登录界面我们基于博客Django(part36)–cookies的mywebsite_bookstore项目 ...
后台管理制作首页组件及ui框架的使用
制作首页组件整体结构分为左右结构,右边分为上下结构布局 1.左侧菜单项添加 2.顶部 3.下边框显示栏使用Element-ui框架中的Container 布局容器页面整体布局 <div c ...
php网页的制作,用PHP制作静态网站的模板框架
用PHP制作静态网站的模板框架发布时间:2016-06-17 来源: 点击: 次模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运 ...
制作基于springboot的简易学生管理系统（详细）
制作基于springboot的简易学生管理系统(详细) 基于书本与百度创作,内容简易,请多多指教(￣▽￣)/ 设计一个简易学生管理系统所需环境创建一个springboot项目设计数据库配置Gr ...
Python制作登陆界面（2）（中等级）
前言本人又来教大家制作登陆界面啦! 大家知道弹窗在电脑中无处不在:浏览器界面啊,Python编程界面啊,网络会议室啊等等. 相信你们在使用Python中肯定用过一个庞大的GUI模块:tkinter. ...
PySimpleGUI制作复杂界面及制作批量重命名软件
PySimpleGUI制作复杂界面及制作批量重命名软件 1 界面设计的基本方式 2 制作持续显示的界面 3 文字元素 3.1单行输入元素的设置 3.2 多行显示/输入文字元素 3.3 多行显示/输入文 ...
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器 MiniBlink的作者是龙泉寺扫地僧 miniblink是什么? (抄了一下龙泉寺扫地僧写 ...

制作天猫界面的简易框架

制作天猫界面的简易框架相关推荐

最新文章

热门文章