abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="short
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut ico"type="text/x-ico" href="images/footlogo.png">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部-->
<div class='header'>
<div class="meun"></div>
</div>
<!--内容部分-->
<div class="contents">
<div class="content">
<div class="contentMeun"></div>
<div class="contentPic">
<div class="content_l"></div>
<div class="content_r"></div>
</div>
<div class="clear"></div>
<div class="contentPic_ul">
<div class="contentPic_ul_1"></div>
<div class="contentPic_ul_0"style="background: url('images/midAD1.jpg');margin-right: 13px" ></div>
<div class="contentPic_ul_0"style="background: url('images/midAD2.jpg');margin-right: 13px"></div>
<div class="contentPic_ul_0"style="background: url('images/midAD3.jpg');"></div>
</div>
<!-- 小米闪购 -->
<div class="contentShop">
<h3>小米闪购</h3>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid pink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid deeppink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid lightpink"></div>
<div class="contentShop_1"style="margin-right: 12.7px;border-top: 1px solid lightpink""></div>
<div class="contentShop_1"></div>
</div>
<div class="clear"></div>
<div class="contentImg" style="background: url('images/longAD1.jpg')"></div>
<div class="contentUl">手机</div>
<div class="contentPhone">
<div class="contentPhone_l"></div>
<div class="contentPhone_r">
<div style="margin-right: 12.7px;"></div>
<div style="margin-right: 12.7px;"></div>
<div style="margin-right: 12.7px;"></div>
<div></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-right: 12.7px;margin-top: 12px"></div>
<div style="margin-top: 12px"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD2.jpg')"></div>
<div class="contentUl">智能</div>
<div class="contentPhone">
<div class="contentPhone_0"style="margin-right: 12.7px; background: url(images/buy/家电AD1.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px"></div>
<div class="contentPhone_1"></div>
<div class="contentPhone_0"style="margin-right: 12.7px;margin-top: 12px;background: url(images/buy/家电AD2.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_2" style="margin-top: 12px;float: left";>
<div class="content_1_t"></div>
<div class="content_1_d"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD3.jpg')"></div>
<div class="contentUl">家电</div>
<div class="contentPhone">
<div class="contentPhone_0"style="margin-right: 12.7px; background: url(images/buy/智能AD1.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;"></div>
<div class="contentPhone_1"style="margin-right: 12.7px"></div>
<div class="contentPhone_1"></div>
<div class="contentPhone_0"style="margin-right: 12.7px;margin-top: 12px;background: url(images/buy/智能AD2.jpg)"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_1"style="margin-right: 12.7px;margin-top: 12px"></div>
<div class="contentPhone_2" style="margin-top: 12px;float: left";>
<div class="content_1_t"></div>
<div class="content_1_d"></div>
</div>
</div>
<div class="contentImg" style="background: url('images/longAD4.jpg')"></div>
</div>
</div>
<!--网页底部-->
<div class="footers">
<div class="footer">
<div class="footer-top_li">
<div class="footer-top_li_1">
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>七天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-wrench"></i>百余家售后网点</a>
</div>
<span class="separate"></span>
<!--第二部分-->
<div class="footer-top_li_2">
<div class="footer-top_li_a">
<dl>
<dt>帮助中心</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="">账户管理</a></dd>
<dd><a href="">购物指南</a></dd>
<dd><a href="">订单操作</a></dd>
</dl>
<div class="connect">
<p class="telephone">520-131121</p>
<p class="time">周一至周五</p>
<button><span class="fa-facommenting"></span>联系客服</button>
</div>
<!-- -->
</div>
<div class="footer-top_li_b"></div>
</div>
</div>
<div class="footer-bottom_li">
<div class="footer-bottom_li_1" style="margin-right: 5px">
<img src="images/footlogo.png">
</div>
<div class="footer-bottom_li_2">
<div class="footer-bottom_li_a">
<ul>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
<li>小米商城<span></span></li>
</ul>
</div>
<div class="footer-bottom_li_b">
<a href="">备案：10004121111</a>
<a href="">备案：10004121211</a>
<a href="">备案：10004121211</a>
<a href="">备案：10004121211</a>
<br>
违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</div>
<div class="footer-bottom_li_3">
<img src="images/footericon1.png" alt="">
<img src="images/footericon2.png" alt="">
<img src="images/footericon3.png" alt="">
<img src="images/footericon4.png" alt="">
<img src="images/footericon5.png" alt="">
</div>
<div class="footer-bottom_li_4">
探索黑科技，小米为发烧而生！
</div>
</div>
</div>
</div>
</body>
</html>
</*CSS部分*>
*{margin: 0px;padding: 0px;}
.clear{clear: both}
li{list-style: none}
a{text-decoration: none;color:#cccccc;cursor: pointer}
/*网页头部*/
.header{width: 100%;height: 40px;background: #333333}
.meun{background: #ccc;width: 1226px;height: 40px;margin:0px auto}
/*主体部分*/
.content{width:1226px;margin:0px auto;}
/*主体包含的div*/
.contentMeun{background: #ccc;height: 90px;margin: 10px auto}
.contentPic{margin: 10px auto}
/*PIC下面的布局*/
.content_l{width: 246px;height:480px;background: #cccccc;float: left; }
.content_r{width: 980px; height: 480px;background: pink;float: left}
.contentPic_ul{height: 180px;margin: 10px auto}
/*PIC_UL下面的四个小图片*/
.contentPic_ul_1{width: 235px;background: #5F5750;height: 170px;margin-right: 13px;float: left}
.contentPic_ul_0{width: 317px;height: 170px;float: left}
.contentShop{height: 340px;margin: 10px auto;}
/*小米闪购*/
.contentShop_1{width: 235px;height:340px;background: #cccccc;float: left}
.contentImg{background: #ccc;height: 100px;margin: 10px auto}
.contentUl{background: #ccc;height: 80px;margin: 10px auto}
.contentPhone{height: 614px;margin: 10px auto}
.contentPhone_l{height: 614px;width: 234px;background: url(../images/buy/手机AD.jpg);float: left;margin-right: 12px}
.contentPhone_r{height: 614px;width: 980px;float: left}
.contentPhone_r div{height:300px;width:235px;background: #cccccc;float: left}
.contentPhone_0,.contentPhone_1{height:300px;width:235px;background: #cccccc;float: left}
.content_1_t,.content_1_d{height:145px;width:235px;background: #cccccc;}
.content_1_d{margin-top: 10px}
.footer{width:1226px;height:100px;margin:10px auto;}
.footer-top_li_1{width: 1126px;height:80px;line-height:80px;text-align:center}
.footer-top_li_1 a{font-size: 16px;color: #00CC66;font-weight:300;}
.footer-top_li_1 a:hover{color:#9A0000}
.footer-top_li_1 a i{font-size: 20px;margin-right: 10px;}
.footer-top_li_1 span{font-size: 20px;color:rebeccapurple;border-left:1px solid #e0e0e0;margin: 0px 20px;}
.separate{width: 1226px;border-bottom: 1px solid #cccccc ;display:block}
.footer-top_li_2{width:1226px;height:100px;margin: 40px 0px;text-align: center;}
.footer-top_li_a dl{float: left;display: block;width: 160px;}
.footer-top_li_a dt{font-size: 14px;line-height: 14px;color: #9A0000;margin-bottom: 22px}
.footer-top_li_a dd{font-size: 14px;line-height: 18px;color: #9A0000;margin-top:10px}
.footer-top_li_a dd a:hover{color: #9A0000}
.footer-top_li_a .connect{width: 258px;height: 112px;border-left:1px solid #cccccc;float: right;}
.footer-top_li_a .connect .telephone{color:#ff6700;margin: 0px 0px 5px;font-size: 22px;line-height: 22px;}
.footer-top_li_a .connect .time{color: #616161;margin: 0px 16px;font-size: 12px;}
.footer-top_li_a .connect button{width: 118px;height: 28px;font-size: 12px;line-height: 28px;border:1px solid #ff6700;background: #ff6700;}
/**/
.footer-bottom_li_1,.footer-bottom_li_2,.footer-bottom_li_3{float: left}
.footer-bottom_li_4{clear: left;text-align: center;font-family: "楷体";}
.footer-bottom_li_a{height: 12px;width: 640px;}
.footer-bottom_li_a li{float: left;height: 19px;font-size: 12px;color: #cccccc}
.footer-bottom_li_a li span{border-left: 1px solid #c2c2c2;height:5px;margin: 3px 3px}
.footer-bottom_li_b{font-size: 8px;width: 640px}
.footer-bottom_li_b a:hover{color: #9A0000}
/*底部图片样式*/
.footer-bottom_li_3 img{width: 83px;float: left;}
Correcting teacher：天蓬老师Correction time：2019-05-28 17:02:07
Teacher's summary：你的css代码, 你不觉得看起来很累吗? 下次记得一行只写一个样式