abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="icon&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<style>
*{margin:0;padding:0;}
body{background:#f5f5f5;}
li{list-style:none;}
a{text-decoration:none;color:#ccc;cursor:pointer;}
.clearFix:after{clear:both;height:0;display:block;visibility:hidden;content:"";}
.fl{float:left;}
.mt_15{margin-top:15px;}
.mt_20{margin-top:20px;}
.mt_40{margin-top:40px;}
/*头部*/
.header{background:#333;width:100%;height:40px;}
.menu{width:1226px;height:100%;margin:0 auto;}
/*主体内容*/
.contentTop{width:100%;margin:0 auto;padding-bottom:40px;background:white;}
.content{width:1226px;margin:0 auto;}
.contentMenu{height:90px;background:red;}
/*分类和banner图*/
.contentPic_l{width:240px;height:480px;background:red;}
.contentPic_r{width:986px;height:480px;background:blue;}
/*通道和三个广告区*/
.contentPic_ul_1{width:233px;height:170px;float:left;background:yellow;}
.contentPic_ul_0{width:316px;height:170px;margin-left:15px;float:left;}
/*小米闪购*/
.contentShop p{font-size:24px;color:#333;margin-top:25px;}
.contentShop_1,.contentShop_0{width:234px;height:340px;background:blue;float:left;}
.contentShop_0{margin-left:14px;}
.contentImg{height:100px;}
.contentBottom{width:1226px;margin:0 auto;margin-bottom:80px;}
/*手机*/
.contentUL p{font-size:24px;color:#333;margin-top:40px;}
.contentPhine_l{width:234px;height:614px;background:url(../images/buy/手机AD.jpg);}
.contentPhine_r{width:992px;}
.contentPhine_r div{width:234px;height:300px;margin-left:14px;margin-bottom:14px;float:left;background:yellow;}
/*家电*/
.contentPhine .contentPhine_0,.contentPhine .contentPhine_1{width:234px;height:300px;margin-left:14px;margin-bottom:14px;float:left;background:blue;}
.contentPhine .contentPhine_0{margin-left:0;}
.contentPhine_1_t,.contentPhine_1_b{width:234px;height:143px;margin-bottom:14px;background:yellow;}
/*底部*/
.footer_top{width:100%;margin:0 auto;background:white;}
/*first*/
.footer_ul{width:1226px;height:100%;margin:0 auto;}
.footer_li{height:80px;line-height:80px;margin:0 auto;text-align:center;border-bottom:1px solid #e0e0e0;}
.footer_li a{font-size:16px;color:#616161;}
.footer_li a i{font-size:20px;color:#616161;margin-right:10px;}
.footer_li span{border-left:1px solid #e0e0e0;margin:0 56px;}
/*second*/
.footer_li_2{padding:40px 0;}
.footer_li_2 dl{float:left;margin-right:103px;}
.footer_li_2 dt{font-size:14px;line-height:14px;color:#424242;margin-bottom:26px;}
.footer_li_2 dd{margin-bottom:10px;}
.footer_li_2 dd a{font-size:12px;color:#757575;}
.footer_li_2 dd a:hover{color:#ff6700;}
.footer_li_2 .connect{width:263px;float:left;border-left:1px solid #e0e0e0;text-align:center;}
.telephone{color:#ff6700;font-size:22px;line-height:22px;margin-bottom:5px;}
.time{color:#616161;font-size:12px;}
.connect button{width:118px;height:28px;font-size:12px;line-height:28px;border:1px solid #ff6700;background:white;margin-top:20px;color:#ff6700;}
.connect button:hover{background:#ff6700;color:white;}
.connect button span{margin-right:5px;}
.footer_bottom{width:1226px;margin:0 auto;padding:40px 0;}
.footer_bottom_img{padding-right:10px;float:left;}
.footer_bottom_ul{float:left;}
.footer_bottom_ul_1 li{float:left;}
.footer_bottom_ul_1 li a{color:#757575;font-size:12px;}
.footer_bottom_ul_1 li a:hover{color:#ff6700;}
.footer_bottom_ul_1 li span{border-right:1px solid #757575;margin:0 8px;display:inline-block;height:12px;position:relative;top:2px;}
.footer_bottom_ul_2 a,.footer_bottom_ul_2 span{font-size:12px;color:#b0b0b0;margin-right:5px;}
.footer_bottom_ul_2 a:hover{color:#ff6700;}
.footer_bottom_logo img{width:83px;margin-top:5px;}
.bestBottom{width:1226px;font-size:20px;margin:0 auto;position:relative;top:-20px;text-align:center;
font-family:楷体;color:#ccc;}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="menu"></div>
</div>
<!--主题内容-->
<div class="contents">
<div class="contentTop">
<div class="content">
<div class="contentMenu"></div>
<!--分类和banner图-->
<div class="contentPic mt_20 clearFix">
<div class="contentPic_l fl"></div>
<div class="contentPic_r fl"></div>
</div>
<!--通道和三个广告区-->
<div class="contentPic_ul mt_20 clearFix">
<div class="contentPic_ul_1"></div>
<div class="contentPic_ul_0" style="background:url(static/images/midAD1.jpg) no-repeat"></div>
<div class="contentPic_ul_0" style="background:url(static/images/midAD2.jpg) no-repeat"></div>
<div class="contentPic_ul_0" style="background:url(static/images/midAD3.jpg) no-repeat"></div>
</div>
<!--小米闪购-->
<div class="contentShop">
<p class="title">小米闪购</p>
<div class="contentShop_box mt_15 clearFix">
<div class="contentShop_1" style="border-top:1px solid red;"></div>
<div class="contentShop_0" style="border-top:1px solid orange;"></div>
<div class="contentShop_0" style="border-top:1px solid yellow;"></div>
<div class="contentShop_0" style="border-top:1px solid blue;"></div>
<div class="contentShop_0" style="border-top:1px solid green;"></div>
</div>
</div>
<div class="contentImg mt_20" style="background:url(static/images/longAD1.jpg) no-repeat"></div>
</div>
</div>
<div class="contentBottom">
<!--手机-->
<div class="contentUL mt_40">
<p>手机</p>
<div class="contentUL_r"></div>
</div>
<div class="contentPhine mt_20 clearFix">
<div class="contentPhine_l fl"></div>
<div class="contentPhine_r fl">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="contentImg mt_40" style="background:url(static/images/longAD2.jpg) no-repeat"></div>
<!--家电-->
<div class="contentUL mt_40">
<p>家电</p>
<div class="contentUL_r"></div>
</div>
<div class="contentPhine mt_20 clearFix">
<div class="contentPhine_0" style="background:url(static/images/buy/家电AD1.jpg)"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_0" style="background:url(static/images/buy/家电AD2.jpg)"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1">
<div class="contentPhine_1_t"></div>
<div class="contentPhine_1_b"></div>
</div>
</div>
<div class="contentImg mt_40" style="background:url(static/images/longAD3.jpg) no-repeat"></div>
<!--智能-->
<div class="contentUL mt_40">
<p>智能</p>
<div class="contentUL_r"></div>
</div>
<div class="contentPhine mt_20 clearFix">
<div class="contentPhine_0" style="background:url(static/images/buy/智能AD1.jpg)"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_0" style="background:url(static/images/buy/智能AD2.jpg)"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1"></div>
<div class="contentPhine_1">
<div class="contentPhine_1_t"></div>
<div class="contentPhine_1_b"></div>
</div>
</div>
<div class="contentImg mt_40" style="background:url(static/images/longAD4.jpg) no-repeat"></div>
</div>
</div>
<!--底部-->
<div class="footers">
<div class="footer_top">
<div class="footer_ul">
<div class="footer_li">
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</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-map-marker"></i>520余建售后网点</a>
</div>
<div class="footer_li_2 clearFix">
<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>
<dl>
<dt>特色服务</dt>
<dd><a href="">F码通道</a></dd>
<dd><a href="">礼物码</a></dd>
<dd><a href="">防伪查询</a></dd>
</dl>
<div class="connect">
<p class="telephone">400-100-5675</p>
<p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p>
<button><span class="fa fa-commenting"></span>联系客服</button>
</div>
</div>
</div>
</div>
<div class="footer_bottom clearFix">
<img class="footer_bottom_img" src="static/images/footlogo.png">
<div class="footer_bottom_ul clearFix">
<ul class="footer_bottom_ul_1 clearFix">
<li><a href="#">小米商城</a><span></span></li>
<li><a href="#">MIUI</a><span></span></li>
<li><a href="#">米家</a><span></span></li>
<li><a href="#">米聊</a><span></span></li>
<li><a href="#">多看</a><span></span></li>
<li><a href="#">游戏</a><span></span></li>
<li><a href="#">路由器</a><span></span></li>
<li><a href="#">米粉卡</a><span></span></li>
<li><a href="#">政企服务</a><span></span></li>
<li><a href="#">小米天猫店</a><span></span></li>
<li><a href="#">隐私政策</a><span></span></li>
<li><a href="#">商城用户协议</a><span></span></li>
<li><a href="#">账号协议</a><span></span></li>
<li><a href="#">问题反馈</a><span></span></li>
<li><a href="#">廉政举报</a><span></span></li>
<li><a href="#">诚信合规</a><span></span></li>
<li><a href="#">Select Region</a></li>
</ul>
<div class="footer_bottom_ul_2">
<span>©</span><a href="#">mi.com</a><span>京ICP证110507号</span><a>京ICP备10046444号</a><a>京网文[2017]1530-131号 </a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">（京）网械平台备字（2018）第00005号</a><a>互联网药品信息服务资格证 (京) -非经营性-2014-0090</a><a>营业执照</a><a>医疗器械公告</a>
</div>
<div class="footer_bottom_ul_2">
<a href="#">增值电信业务许可证</a><span> 网络食品经营备案（京）【2018】WLSPJYBAHF-12</span><a>食品经营许可证 </a>
</div>
<div class="footer_bottom_ul_2">
<span>违法和不良信息举报电话：185-0130-1238</span><a>知识产权侵权投诉</a><span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
</div>
<div class="footer_bottom_logo">
<img src="static/images/footericon1.png">
<img src="static/images/footericon2.png">
<img src="static/images/footericon3.png">
<img src="static/images/footericon4.png">
<img src="static/images/footericon5.png">
</div>
</div>
</div>
<div class="bestBottom">探索黑科技，小米为发烧而生</div>
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-16 09:13:24
Teacher's summary：完成的不错。js可以根据文字，进行设置高度。但是没必要，文字太多，高度长的话，影响之前的样式。给个固定值比较好。