摘要：<!DOCTYPE html> <html> <head> <title>小米商城仿制</title> <meta charset="utf-8"> <link rel="shortcut icon" type="i
<!DOCTYPE html> <html> <head> <title>小米商城仿制</title> <meta charset="utf-8"> <link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <!--头部--> <div class="header"> <div class="menu"></div> </div> <!--中间主体部分--> <div class="contents"> <div class="content"> <div class="contentMenu">中间导航</div> <div class="contentPic"> <div class="contentPic_l"></div> <div class="contentPic_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(static/images/midAD1.jpg); margin-right: 13px;"></div> <div class="contentPic_ul_0" style="background: url(static/images/midAD2.jpg); margin-right: 13px;"></div> <div class="contentPic_ul_0" style="background: url(static/images/midAD3.jpg);"></div> </div> <div class="clear"></div> <!-- 小米闪购 --> <div class="contentShop"> <h1>小米闪购</h1> <div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid red;"></div> <div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #FFAC13;"></div> <div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #83C44E;"></div> <div class="contentShop_1" style="margin-right: 12.7px; border-top: 1px solid #2196F3;"></div> <div class="contentShop_1" style="border-top: 1px solid #E53935;"></div> </div> <div class="clear"></div> <div class="contentImg" style="background: url(static/images/longAD1.jpg);"></div> <div class="contentUL">手机</div> <div class="contentPhone"> <div class="contentPhone_left" style="margin-right: 12px;"></div> <div class="contentPhone_right"> <div style="margin-right: 12px;"></div> <div style="margin-right: 12px;"></div> <div style="margin-right: 12px;"></div> <div></div> <div style="margin-right: 12px; margin-top: 12.5px;"></div> <div style="margin-right: 12px; margin-top: 12.5px;"></div> <div style="margin-right: 12px; margin-top: 12.5px;"></div> <div style=" margin-top: 12.5px;"></div> </div> </div> <div class="clear"></div> <div class="contentImg" style="background: url(static/images/longAD2.jpg);"></div> <div class="contentUL">智能</div> <div class="contentPhone"> <div class="contentPhone_znleft" style="margin-right: 12px;"><img src="https://i1.mifile.cn/a4/xmad_15266395374048_JnZQo.jpg"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style=""></div> <div class="contentPhone_znleft" style="margin-right: 12px;margin-top: 12.5px;"><img src="https://i1.mifile.cn/a4/xmad_14950995035103_fhWtH.jpg"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-top: 12.5px;"></div> </div> <div class="clear"></div> <div class="contentImg" style="background: url(static/images/longAD3.jpg);"></div> <div class="contentUL">家电</div> <div class="contentPhone"> <div class="contentPhone_znleft" style="margin-right: 12px;"><img src="https://i1.mifile.cn/a4/xmad_15232433421155_vCzhJ.jpg"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;"></div> <div class="contentPhone_znright" style=""></div> <div class="contentPhone_znleft" style="margin-right: 12px;margin-top: 12.5px;"><img src="https://i1.mifile.cn/a4/xmad_15123939053142_dFlAw.jpg"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-right: 12px;margin-top: 12.5px;"></div> <div class="contentPhone_znright" style="margin-top: 12.5px;"> <div class="contentPhone_znr01"></div> <div class="contentPhone_znr02" style=" "></div> </div> </div> <div class="clear"></div> <div class="contentImg" style="background: url(static/images/longAD4.jpg);"></div> <div></div> </div> </div> <!--底部--> <div class="footer"> <div class="footer01"> <ul> <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-wrench"></span>预约维修服务</a><span class="footer01_line"></span></li> <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-rotate-right"></span>7天无理由退货</a><span class="footer01_line"></span></li> <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-refresh"></span>15天免费换货</a><span class="footer01_line"></span></li> <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-gift"></span>满150元包邮</a><span class="footer01_line"></span></li> <li><a rel="nofollow" href="#" target="_blank"><span class="fa fa-map-marker"></span>520余家售后网点</a></li> </ul> </div> <div class="footer_line"></div> <div class="clear"></div> <div class="footer02"> <div class="footer02_1"> <ul> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> <li> <span>帮助中心</span><ul class="ul01"> <li><a rel="nofollow" href="#" target="_blank">账户管理</a></li> <li><a rel="nofollow" href="#" target="_blank">购物指南</a></li> <li><a rel="nofollow" href="#" target="_blank">订单操作</a></li></ul></li> </ul> </div> <div class="footer02_2"></div> <div class="footer02_3"> <p class="phone">000-520-1314</p> <p class="time">周一至周日 8:00-18:00<br>(仅收市话费)</p> <button><span class="fa fa-commenting "></span> 联系客服</button> </div> </div> <div class="clear"></div> <div class="footers03"> <div class="footer03"> <div class="footer03_1"> <img src="https://s01.mifile.cn//i/logo.png"> </div> <div class="footer03_2"> <div class="footer03_2_1"> <a rel="nofollow" href="#" target="_blank">小米商城</a><span >|</span> <a rel="nofollow" href="#" target="_blank">MIUI</a><span >|</span> <a rel="nofollow" href="#" target="_blank">米家</a><span >|</span> <a rel="nofollow" href="#" target="_blank">米聊</a><span >|</span> <a rel="nofollow" href="#" target="_blank">多看</a><span >|</span> <a rel="nofollow" href="#" target="_blank">游戏</a><span >|</span> <a rel="nofollow" href="#" target="_blank">路由器</a><span >|</span> <a rel="nofollow" href="#" target="_blank">米粉卡</a><span >|</span> <a rel="nofollow" href="#" target="_blank">政企服务</a><span >|</span> <a rel="nofollow" href="#" target="_blank">小米天猫店</a><span >|</span> <a rel="nofollow" href="#" target="_blank">隐私政策</a><span >|</span> <a rel="nofollow" href="#" target="_blank">问题反馈</a><span >|</span> <a rel="nofollow" href="#" target="_blank">廉正举报</a><span >|</span> <a rel="nofollow" href="#" target="_blank">诚信合规</a><span >|</span> <a rel="nofollow" href="#" data-toggle="modal">Select Region</a> </div> <div class="footer03_2_2"> <p> <a href="#" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号 <a href="#" target="_blank" rel="nofollow">京ICP备10046444号</a> <a rel="nofollow" href="#" target="_blank">京公网安备11010802020134号 </a> <a href="#" target="_blank">京网文[2017]1530-131号</a> <br> <a href="#" target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="#" target="_blank">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a> <a href="#" target="_blank">营业执照</a> <a href="#" target="_blank">医疗器械公告</a> <br>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p> </div> </div> <div class="footer03_3"> <a rel="nofollow" href="#" target="_blank"><img rel="nofollow" src="https://i1.mifile.cn/f/i/17/site/truste.png" alt="TRUSTe Privacy Certification" /></a> <a rel="nofollow" href="#" target="_blank"><img rel="nofollow" src="https://s01.mifile.cn/i/v-logo-2.png" alt="诚信网站" /></a> <a rel="nofollow" href="#" target="_blank"><img rel="nofollow" src="https://s01.mifile.cn/i/v-logo-1.png" alt="可信网站" /></a> <a rel="nofollow" href="#" target="_blank"><img rel="nofollow" src="https://s01.mifile.cn/i/v-logo-3.png" alt="网上交易保障中心" /></a> <a rel="nofollow" href="#" target="_blank"><img rel="nofollow" src="https://i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="诚信经营 放心消费" /></a> </div> </div> <div class="clear"></div> </div> <div class="bottomtext"> 探索黑科技，为小米而生！！！ </div> </div> </body> </html>
css
*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
/*头部*/
.header{width: 100%;height: 40px;background: #333;}
.menu{background: #ccc;width: 1226px;height: 40px;margin: 0px auto;}
/*主体部分*/
.content{/*background: #ccc;*/width: 1226px;margin: 0px auto;}
.contentMenu{background: #ccc;height: 90px;margin: 10px auto;}
.contentPic{margin: 10px auto;}
.contentPic_l{width: 246px;height: 480px;background: #ccc; float: left;}
.contentPic_r{width: 980px;height: 480px;background: blue; float: left;}
.contentPic_ul{margin: 10px auto;}
.contentPic_ul_1{width: 235px;background: #5f5750;height: 170px;margin-right: 13px;float: left;}
.contentPic_ul_0{ width: 317px;height: 170px;float: left; }
/*小米闪购*/
.contentShop{margin: 10px auto;}
.contentShop_1{width: 235px;height:340px;background: #ccc;float: left;}
.contentImg{background: #ccc;height: 100px;margin: 10px auto;}
.contentUL{background: #ccc;height: 80px;margin: 10px auto;}
.contentPhone{margin: 10px auto;}
.contentPhone_left{height: 614px;width: 234px; background: url(../images/buy/手机AD111.jpg); float: left;}
.contentPhone_right{height: 614px;width: 980px;float: left;}
.contentPhone_right div{height: 300px;width: 235px;background: #ccc;float: left;}
/*智能*/
.contentPhone_znleft{width: 234px;height: 300px;float: left;}
.contentPhone_znleft img{width: 234px;height: 300px;}
.contentPhone_znright{width: 236px;height: 300px;background: #888;float: left;}
.contentPhone_znr01{height: 145px;width: 236px; background: red;}
.contentPhone_znr02{height: 145px;width: 236px; background: red;margin-top: 10px;}
/*网页底部*/
.footer{width: 100%;margin: 10px auto;}
.footer_line{width: 1226px;margin: 10px auto;border-bottom: 1px solid #e0e0e0;}
.footer01{width: 1226px;height: 50px;line-height: 50px; margin: 0px auto; text-align: center;color: #616161;}
.footer01 ul{ }
.footer01 li{list-style: none;float: left;margin-left: 50px;height: 50px; }
.footer01 li a{color: #616161;}
.footer01 li:hover a{color: red;}
.fa{margin-right: 4px;}
.footer01_line{font-size: 20px;color:#616161;border-left: 1px solid #e0e0e0;margin:0px 36px;}
.footer02{width: 1226px;margin: 10px auto;}
.footer02_1{width: 970px;height: 170px; float: left; margin-top: 20px;}
.footer02_1{}
.footer02_1 li{list-style: none;width: 150px;height: 170px;margin-right: 10px;float: left;}
.footer02_1 li span{color:#424242; font-size: 14px;}
.ul01{margin-top: 20px;}
.ul01 li{list-style: none;width: 150px;height: 25px;line-height: 25px;}
.ul01 li a{font-size: 12px; color: #757575;}
.ul01 li:hover a{color: red;}
.footer02_2{width: 2px;height: 170px;border-left: 1px solid #e0e0e0; float: left;}
.footer02_3{width: 250px;height: 170px;float: left;margin-left: 2px; text-align: center;}
.phone{font-size: 18px;color: red;margin-top: 20px;}
.time{font-size: 12px;color: #000;margin-top: 5px;line-height: 20px;}
.footer02_3 button {width: 118px;height: 28px;font-size: 12px;line-height:28px;border: 1px solid #ff6700;color:#ff6700;background: #fff;margin-top: 20px;text-align: center; }
.footer02_3 button:hover{background:#ff6700;color: #fff; }
.footers03{width: 100%;background: #FAFAFA;}
.footer03{width: 1226px;margin: 10px auto;}
.footer03_1{float: left;width: 60px;margin-right: 10px;}
.footer03_1 img{margin-top: 20px;}
.footer03_2{float: left;width: 900px; margin-top: 20px;}
.footer03_2_1{width: 900px;height: 30px;}
.footer03_2_1 a{font-size: 12px;color: #757575;}
.footer03_2_1 a:hover{color: red;}
.footer03_2_1 span{color: #ccc; margin:0px 2px;}
.footer03_2_2{width: 900px;height: 50px;}
.footer03_2_2 p{font-size: 12px;color: #C1C0B0;}
.footer03_2_2 a{font-size: 12px;color: #C1C0B0;}
.footer03_3{float: left;width: 200px;height: 100px;margin-top:20px; margin-left: 20px;}
.footer03_3 img{width: 85px; height: 23px; margin: 5px;}
.bottomtext{width: 1226px;height: 50px;line-height: 50px; margin: 10px auto;text-align: center; font-size: 20px;font-family: "楷体"; color: #BABABA;}
批改老师：韦小宝批改时间：2018-12-09 09:07:38
老师总结：作业不需要提交两篇的！课后自己多练习就可以了！并不需要重复提交的！
