摘要：html代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>小米商城</title><link rel="shortcut icon" type="image/x-icon" href="
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="css\font-awesome-4.7.0\css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\css/style.css">
</head>
<body>
<!-- 头部 -->
<div>
<div>
<div>
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">lOT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">小爱分享平台</a></li>
<li><a href="#">金融</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">企业服务</a></li>
<li><a href="#">SelectRegion</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">购物车(0)</a></li>
</ul>
</div>
</div>
</div>
<!-- 主体 中1 -->
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div style="background: url(static/images/midAD1.jpg);"></div>
<div style="background: url(static/images/midAD2.jpg);"></div>
<div style="background: url(static/images/midAD3.jpg);"></div>
</div>
<div>
<h1>小米闪购</h1>
<div style="margin-right: 13px;background: #F1EDED;"></div>
<div style="margin-right: 13px;background: #FAFAFA;"></div>
<div style="margin-right: 13px;background: #FAFAFA;"></div>
<div style="margin-right: 14px;background: #FAFAFA;"></div>
<div style="background: #FAFAFA;"></div>
</div>
<div style="background: url(static/images/longAD1.jpg);"></div>
</div>
<!-- 主购体 中2-->
<div></div>
<div>
<div>
<div>手机</div>
<div>
<div style="background: url(static/images/buy/手机AD.jpg);"></div>
<div>
<div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div> </div>
</div>
<div> <div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div> </div></div>
</div>
</div>
<div style="background: url(static/images/longAD2.jpg);"></div>
<div>智能</div>
<div>
<div>
<div style="margin-right: 16px;background: url(static/images/buy/家电AD1.jpg);"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div></div>
</div>
<div>
<div style="margin-right: 16px;background: url(static/images/buy/家电AD1.jpg);"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>
<div style="background: url(static/images/longAD3.jpg);"></div>
<div>家电<div>
<div>
<div>
<div style="margin-right: 16px;background: url(static/images/buy/家电AD1.jpg);"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div></div>
</div>
<div>
<div style="margin-right: 16px;background: url(static/images/buy/家电AD1.jpg);"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div style="margin-right: 16px;"></div>
<div>
<div></div>
<div></div>
</div>
</div>
<div style="background: url(static/images/longAD4.jpg);"></div>
</div>
</div>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
css代码
*{padding: 0px;margin: 0px;list-style:none;text-decoration: none;}
.clear{clear: both;}
/* 头部 */
.header{height: 40px;background:#333;}
.top{height: 40px;width: 1250px;margin:0px auto;font-size: 12px;}
.top_a{line-height: 40px;}
.top_a li{height:20px;float: left;margin-left: 15px;color: #ffffff;border-right: 1px solid #fff;text-align: center;}
.top_a li a{color: #ffffff;}
.top_b{line-height: 40px;width: 260px;float: right;}
.top_b li{float: left;margin-left: 18px;}
.top_b li a{color: #ffffff;}
/* 中部主体 */
.content{width: 1240px;margin: 0px auto;}
.content_a{height: 68px;background: pink;margin-top: 10px;}
.content_b{height:461px;background: red;margin-top: 10px; }
.content_ba{height:460px;width:248px;background: pink;float: left;}
.content_bb{height:460px;width:992px;background: #ccc;float: right;}
.content_c{height:172px;margin-top: 10px;}
.content_ca{height:170px;width:238px;background: #5F5750;margin-right: 16px;float: left;}
.content_cb{height:170px;width:318px;background: pink;margin-right: 16px;float: left;}
.content_cc{height:170px;width:318px;background: pink;margin-right: 16px;float: left;}
.content_cd{height:170px;width:318px;background: pink;float: left;}
.content_d{height:362px;margin-top: 10px;}
/* 小米闪购 */
.content_db{height: 318px;width: 237px;background: pink;float: left;}
.content_e{height:101px;background: red;margin-top: 10px;}
/* 中部1 */
.contents{background: #F5F5F5;margin-top: 20px;}
.contents_w{margin: 0px auto;width: 1250px;}
.contents_a{height: 615px;width: 1250px;margin-top: 10px;}
.contents_l{height: 615px;width:234px;float: left;}
.contents_r{height: 615px;width:1006px;float: right;}
.contents_top{height: 303px;width:1010px;}
.contents_top1{height: 300px;width: 239px;background: #fff;float: left;}
.contents_xia{height: 303px;width:1010px;margin-top: 10px;}
.contents_b{height: 101px;background: pink;margin: 10px 0px;}
.contents_c{width: 1250px;margin-top: 10px;}
.contents_c1{height: 300px;width: 1250px;margin-top: 10px;}
.contents_c2{height: 300px;width: 1250px;margin-top: 10px;}
.contents_caa{height: 300px;width: 237px;background: #fff;float: left;}
.contents_c22{height: 146px;width: 237px;background: #ccc;}
.contents_c33{height: 146px;width: 237px;background: #ccc;margin-top: 10px;}
.contents_e{;width: 1250px;margin-top: 10px;}
.contents_f{height: 101px;width: 1250px;background: pink;margin-top: 10px;}
/* 底部 */
.footer{background: #fff;margin: 0px auto;}
.footer_a{height: 90px;background: #fff;}
.footer_b{height: 160px;margin-top: 10px;background: pink}
.footer_c{height: 85px;margin-top: 10px;background: pink}
