学习浮动和盒模型之后练习制作天猫界面简易框架
原网页：
要求：实现布局，实现简易框架
代码实现：
<!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（层叠样式表的理解）。
