abstract：<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="static/css/1.css"> <link rel="styles
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="static/css/1.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <meta charset="utf-8"> <title>XiaoMi</title> </head> <body> <!-- 头部导航 --> <div class="headers"> <div class="headerMenu"> <ul class="headerMenu_ul"> <li><a href="#">小米商城</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">MIUI</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">IoT</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">云服务</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">金融</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">有品</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">小爱开放平台</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">政企服务</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">资质证照</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">协议规则</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">下载app</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">Select Region</a><span class="headerMenu_ul_span"></span></li> </ul> <ul class="headerMenu_ul_r"> <li class="headerMenu_ul_r_li"><a href="#"><i class="fa fa-shopping-cart" ></i>购物车</a></li> <li><a href="#">登录</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">注册</a><span class="headerMenu_ul_span"></span></li> <li><a href="#">消息通知</a><span class="headerMenu_ul_span"></span></li> </ul> <!-- <div class="clear"></div> --> </div> </div> <!-- 头部图片 --> <div class="headerImg">图片导航</div> <!-- 轮播图 --> <div class="lunbo"> <div class="lunbo_l">1</div> <div class="lunbo_r">2</div> </div> <!-- 推销热门款 --> <div class="Imgfast"> <div class="Imgfast_l"></div> <div class="ImgfastImg"></div> <div class="ImgfastImg"></div> <div class="ImgfastImg"></div> </div> <!-- 图片AD --> <div class="ImgAd">图片导航</div> <!-- 内容 --> <div class="middles"> <div class="contents"> <div class="contentMenu"> <h2 >手机</h2> </div> <div class="content_Img"></div> <div class="content_imgli"> <ul> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li class="mt14"><img src="" alt=""><h3></h3><p></p></li> <li class="mt14"><img src="" alt=""><h3></h3><p></p></li> <li class="mt14"><img src="" alt=""><h3></h3><p></p></li> <li class="mt14"><img src="" alt=""><h3></h3><p></p></li> </ul> </div> <div class="clear"></div> </div> <!-- 家电 --> <div class="ImgAd">图片导航</div> <div class="contents"> <div class="contentMenu"> <h2 >家电</h2> </div> <div class="content_jiadian"> <ul> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li><img src="" alt=""><h3></h3><p></p></li> <li style="margin-right:0px;"><img src="" alt=""><h3></h3><p></p></li> <li class=""><img src="" alt=""><h3></h3><p></p></li> <li class=""><img src="" alt=""><h3></h3><p></p></li> <li class=""><img src="" alt=""><h3></h3><p></p></li> <li class=""><img src="" alt=""><h3></h3><p></p></li> </ul> <div class="content_jiadian_small"></div> <div class="content_jiadian_more"></div> </div> <div class="clear"></div> </div> </div> <!-- 底部维修 --> <div class="footers"> <div class="footers_ul"> <ul> <li> <a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span></li> <li> <a href="#"><i class="fa fa-rotate-right "></i>7天无理由退货</a><span></span></li> <li> <a href="#"><i class="fa fa-refresh"></i>15天免费换货</a><span></span></li> <li> <a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span></li> <li> <a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a></li> </ul> <div class="clear"></div> </div> <div class="footers_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="">新浪微博</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> <div class="footers_about"> <p class="telephone">Feir-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="footers footer_info"> <div class="footer_info_logo" > </div> <div class="footer_info_p"> <ul> <li>小米商城</li> <li>MIUI</li> <li>米家</li> <li>米聊</li> <li>多看</li> <li>游戏</li> <li>路由器</li> <li>米粉卡</li> <li>政企服务</li> <li>小米天猫店</li> <li>隐私政策</li> <li>问题反馈</li> <li>Select Region</li> </ul> <div style="clear: right;"></div> <p> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> 增值电信业务许可证 网络食品经营备案（京）<br>【2018】WLSPJYBAHF-12 食品经营许可证 违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 <br> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p> <div class="footer_info_Img" style=""> <img src="./static/images/footericon1.png" alt="" class="icon"> <img src="./static/images/footericon2.png" alt="" class="icon"> <img src="./static/images/footericon3.png" alt="" class="icon"> <img src="./static/images/footericon4.png" alt="" class="icon"> <img src="./static/images/footericon5.png" alt="" class="icon"> </div> </div> </div> <div class="footer_descrition"> 探索黑科技，小米为发烧而生！ </div> </body> </html>
*{margin: 0px 0px;padding: 0px 0px;}
li{list-style: none;}
a {color: #000;text-decoration: none;}
.mt14{margin-top: 14px;}
.clear {clear:both;}
.headers {width: 100%;background: #333;}
.headerMenu {width: 1226px;height: 40px;margin: 0px auto;}
.headerMenu_ul li {float: left;margin-right: 10px;font-size: 12px;line-height: 40px;}
.headerMenu_ul li a {color: #b0b0b0;}
.headerMenu_ul_span{display: inline-block;height:15px;border-left: 1px solid #424242;vertical-align: middle;margin-left:5px; }
.headerMenu_ul_r li {float: right;margin-right: 10px;font-size: 12px;line-height: 40px;}
.headerMenu_ul_r li a {color: #b0b0b0;}
li.headerMenu_ul_r_li a {display:block;height: 40px;width: 100px ;background:#424242;text-align: center;}
li.headerMenu_ul_r_li a:hover {background: #fff;color: #FF753F;}
.headerImg{width: 1226px;height: 80px;background: #eee;margin: 10px auto;}
/*轮播*/
.lunbo{width: 1226px;height: 460px;background: #eee;margin: 10px auto;}
.lunbo_l {width: 234px;height:460px;background: #636363;float: left;}
.lunbo_r{width: 992px;height:460px;background: #ccc;float: right;}
/*图片导航*/
.Imgfast {width: 1226px;height: 170px;margin: 10px auto;}
.Imgfast_l{width: 234px;height:170px;background: #5F5750; float: left;}
.ImgfastImg {width: 317px;height: 170px;background: pink;float: left;margin-left: 13px;}
/*图片AD*/
.ImgAd{height: 120px;width: 1226px;background: #eee;margin:20px auto;}
.middles{width: 100%;background:#ddd;}
/*手机*/
.contents {width: 1226px;margin: 10px auto;}
.contentMenu{padding-top: 10px;}
.contentMenu h2 {font-weight: 300 ;height: 60px;line-height: 60px;font-size: 22px;}
.content_Img {height: 614px;width: 234px;background: #000;float: left;}
.content_imgli li {width: 234px; height: 300px;background: #fff;float: left;margin-left: 14px;}
/*家电*/
.content_jiadian {height: 614px;width: 1226px;}
.content_jiadian li {width: 234px; height: 300px;background: #fff;float: left;margin-right: 13.8px;margin-top: 14px;}
.content_jiadian .content_jiadian_small {height: 143px;width: 234px;background: #000;float: right;margin-top: 14px;margin-left: 0px;}
.content_jiadian .content_jiadian_more {height: 143px;width: 234px;background: #000;float: right;margin-top: 14px;margin-left:0 px;}
.footers {width: 1226px;height:100px;background: #fff;margin: 10px auto;}
.footers_ul li{width:243px;height: 30px;float: left;text-align: center;border-left: 1px solid #e0e0e0;margin: 27px 0px;}
.footers_ul li:first-child {border-left: none;}
.footers_ul li i {margin-right: 10px;font-size: 24px;}
.footers_ul li a {font-size: 18px;color: #636363;}
.footers_ul li a:hover{color: #FF753F;}
.footers_ul {border-bottom: 1px solid #e0e0e0;}
.footers_dl {margin-top:40px;border-right:1px solid #e0e0e0;height: 120px;width:975px;float: left;}
.footers_dl dl{float: left;margin-right:100px;}
.footers_dl dt {margin:0px 0px 30px;font-size: 14px;}
.footers_dl dl dd {margin-bottom: 10px;font-size: 12px;color:#b0b0b0;}
.footers_dl dl dd a {color:#b0b0b0;}
.footers_about {float: right;width: 220px;height: 120px;margin-top:40px;text-align: center;}
.telephone {color: #FF753F;font-size: 22px;}
.time {font-size: 12px; color:#b0b0b0;}
.footers_about button {margin-top:10px;width: 150px;height: 35px;background: none;border:1px solid #FF753F;color:#FF753F;}
.footers_about button:hover{background: #FF753F;color: #fff;}
.footer_info {margin-top: 30px;}
.footer_info_logo {width: 56px;height: 107px;background: url(../images/footlogo.png) no-repeat;float: left;}
.footer_info .footer_info_p {}
.footer_info_p li {float: left;height: 12px;margin-left: 5px;border-left: 1px solid #e0e0e0;padding-left: 5px;font-size: 12px;line-height: 12px;}
.footer_info_p li:first-child{border:none;}
.footer_info_p p {float: left;margin-left: 10px;font-size: 10px;color: #ccc;}
.footer_info_p p a{color: #ccc;}
.footer_info_Img{float: left;margin-left: 10px;}
.footer_info_Img img{ width:83px;}
.footer_descrition {width: 1226px;height:40px;background: #fff;margin: 10px auto;font-size:30px;color:#ccc;line-height:40px;text-align: center;font-family: "楷体","微软雅黑"}
/*.footers_ul li span {display: block;float:left;}*/
Correcting teacher：天蓬老师Correction time：2019-03-28 17:15:57
Teacher's summary：class="ImgfastImg", 类名不推荐使用这种格式, 因为类名是忽略大小写的, 建议改为连接线更好些:
class="img-fast-img"