摘要：自己已经完成到header导航已经完成 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米商城首页</title> <link rel="shortcut icon"&
自己已经完成到header导航已经完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米商城首页</title>
<link rel="shortcut icon" type="image/x-icon" href="static/img/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/css.css">
<script type="text/javascript" src="static/jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;cursor: pointer;}
.clear{clear: both;}
/*头部样式*/
.header{width: 100%;height: 40px;background: #333;}
.headerMenu{width: 1226px;height: 40px;background: #333;margin: 0px auto;line-height: 40px;font-size: 12px;}
.headerMenu span{color: #634F3C;margin: 0px 13px; }
.headerMenu_l ul li{float: left;}
.headerMenu_r ul li{float: left;}
.headerMenu_r1{margin-left: 323px;}
.headerMenu ul li a{color: #ccc;}
.headerMenu ul li a/*[href="#"]*/:hover{color: #fff;}
#headerMenu_r_li{margin-left: 13px;width: 119px;height: 40px;background: #424242;text-align: center;}
#headerMenu_r_li i{margin-right: 7px;}
#headerMenu_r_li div{width: 300px;height: 90px;background: #fff;line-height: 90px;position: absolute;right: 0px;
display: none;color: #ccc;}
#headerMenu_r_li:hover{background: #fff;}
#headerMenu_r_li a:hover{color: #FF6A00;}
#headerMenu_r_li:hover div{display: block;}
/*内容样式*/
.contentMain{width: 1226px;margin: 10px auto;}
.contentMainTop{width: 1226px;background: #ccc;margin: 10px auto;height: 60px;}
.contentMainOne{margin: 10px auto;height: 460px;}
.contentMainOne_l{width: 246px;height:460px;background: #ccc;float: left;}
.contentMainOne_r{width: 980px;height:460px;background: #D0E8FF;float: left;}
.contentMainTwo{margin: 10px auto;}
.contentMainTwo_1{width: 235px;height: 170px;background: #ccc;float: left;}
.contentMainTwo_2{width: 316px;height: 170px;float: left;}
/*小米闪购*/
.contentMainShop{margin: 10px auto;height: 40px;line-height: 40px;}
.contentMainShopUl{margin: 10px auto;}
.contentMainShop_1{width: 235px;height: 292px;background: #fff;float: left;}
.contentMainImg{width: 1226px;height: 119px;margin: 10px auto;}
/*手机*/
.contentMainPhone{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;}
.contentMainImages{margin: 10px auto;}
.contentMainImages_l{width: 234px;height: 614px;margin-right: 10px;background: url(../img/buy/手机AD.jpg);float: left;}
.contentMainImages_r{width: 982px;height: 614px;float: left;}
.contentMainImages_r1{width: 982px;height: 300px;}
.contentMainImages_r1 div{width: 234px;height: 300px;float: left;background:#ccc;}
/*家电之后所有样式*/
.contentMainAll{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;}
.all-style{margin: 10px auto;}
.all-style-Top,.all-style-Down{width: 1226px;height: 300px;}
.all-style-Top_1,.all-style-Down_1{width: 234px;height: 300px;background: #ccc;float: left}
.all-style-Down_2{float: left;}
.all-style-Down_2 div{width: 234px;height: 145px;background: #ccc;}
/*为你推荐*/
.contentMainW{width: 1226px;height: 40px;margin: 10px auto;background: #ccc;line-height: 40px;}
.tuiJian div{width: 234px;height: 300px;background: #ccc;float: left}
/*网页底部*/
/*底部的上边部分*/
.footerMain{width:1226px;margin: 10px auto;}
.footerTop{height: 80px;}
.footerTop a{color: #616161;font-size: 20px;margin-left: 70px;line-height: 80px;}
.footerTop a i{margin-right: 10px;font-size: 20px;}
/*这里引入图标不能给颜色否则，a的hover引入图标不会变色*/
.footerTop a:hover{color: #FF6B00;}
hr{border: 1px solid #E0E0E0;}
/*底部的中间部分*/
.footerMiddle_l{float: left;}
.footerMiddle_l ul{float: left;margin-right: 90px;}
.footerMiddle_l_li{font-size: 15px;font-weight: bold;color: #616161;margin-bottom: 30px;}
.footerMiddle_l ul li{font-size: 14px;margin-top: 19px;}
.footerMiddle_l ul li a{color: #616161;}
.footerMiddle_l ul li a:hover{color: #FF6B00;}
.footerMiddle_r{float: left;margin-left: 100px;}
.phoneNumber{font-size: 25px;color: #FF6B00;margin-top: 18px;}
.time{font-size: 12px;color: #616161;margin-top: 13px;}
.footerMiddle_r button{margin-top: 19px;width: 118px;height: 29px;border: 1px solid #FF6B00;color: #FF6B00;background: #fff; }
.footerMiddle_r button:hover{background: #FF6B00;color: #fff;}
/*底部最后一部分*/
.footerDown{margin-top: 30px;float: left;}
.miImage{width: 56px;height: 57px;float: left;margin-right: 5px;}
.footerDown_l{float: left;}
.footerDown_l span{font-size:12px;color: #616161;}
.footerDown_l i{border-left: 1px solid #616161;height: 13px;margin-left: 2px;}
.footerDown_b{font-size: 12px;color: #616161;}
.footerDown_b a{color: #616161;}
.footerDown_b a:hover{color: red;}
.footerDown_r{float: left;margin-left: 80px;}
.icon{width: 87px;height: 28px;}
/*内部样式写入*/
</style>
</head>
<body>
<div>
<div>
<div>
<ul>
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IOT</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="#">SelectRegion</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">我的订单</a></li>
<li id="headerMenu_r_li"><a><i class="fa fa-shopping-cart"></i>购物车
<div>购物车还没有商品，请赶紧选购吧！</div>
</a></li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div></div>
<div>
<div></div>
<div></div>
</div>
<div></div>
<div>
<div style="margin-right: 13.5px;"></div>
<div style="background: url(static/img/midAD1.jpg);margin-right: 13.5px;"></div>
<div style="background: url(static/img/midAD2.jpg);margin-right: 13.5px;"></div>
<div style="background: url(static/img/midAD3.jpg);"></div>
</div>
<div></div>
<div>
<h3>小米闪购</h3>
</div>
<div>
<div style="margin-right: 12.7px;border-top: 1px solid red;"></div>
<div style="margin-right: 12.7px;border-top: 1px solid orange;"></div>
<div style="margin-right: 12.7px;border-top: 1px solid green;"></div>
<div style="margin-right: 12.7px;border-top: 1px solid blue;"></div>
<div style="border-top: 1px solid red;"></div>
</div>
<div></div>
<div style="background: url(static/img/longAD1.jpg);"></div>
<div>手机</div>
<div>
<div></div>
<div>
<div>
<div style="margin-right: 15px;"></div>
<div style="margin-right: 15px;"></div>
<div style="margin-right: 15px;"></div>
<div ></div>
</div>
<div style="margin-top: 14px">
<div style="margin-right: 15px;"></div>
<div style="margin-right: 15px;"></div>
<div style="margin-right: 15px;"></div>
<div ></div>
</div>
</div>
</div>
<div></div>
<div style="background: url(static/img/longAD2.jpg);"></div>
<div>家电</div>
<div>
<div>
<div style="margin-right: 10px;background: url(static/img/buy/家电AD1.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
<div style="margin-top: 14px;">
<div style="margin-right: 10px;background: url(static/img/buy/家电AD2.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div >
<div></div>
<div style="margin-top: 10px;"></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div style="background: url(static/img/longAD3.jpg);"></div>
<div>智能</div>
<div>
<div>
<div style="margin-right: 10px;background: url(static/img/buy/智能AD1.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
<div style="margin-top: 14px;">
<div style="margin-right: 10px;background: url(static/img/buy/智能AD2.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div>
<div></div>
<div style="margin-top: 10px;"></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div style="background: url(static/img/longAD4.jpg);"></div>
<div>搭配</div>
<div>
<div>
<div style="margin-right: 10px;background: url(static/img/buy/搭配AD1.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
<div style="margin-top: 14px;">
<div style="margin-right: 10px;background: url(static/img/buy/搭配AD2.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div>
<div></div>
<div style="margin-top: 10px;"></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div style="background: url(static/img/longAD5.jpg);"></div>
<div>配件</div>
<div>
<div>
<div style="margin-right: 10px;background: url(static/img/buy/配件AD1.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
<div style="margin-top: 14px;">
<div style="margin-right: 10px;background: url(static/img/buy/配件AD2.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div>
<div></div>
<div style="margin-top: 10px;"></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div style="background: url(static/img/longAD6.jpg);"></div>
<div>周边</div>
<div>
<div>
<div style="margin-right: 10px;background: url(static/img/buy/周边AD1.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
<div style="margin-top: 14px;">
<div style="margin-right: 10px;background: url(static/img/buy/周边AD2.jpg);"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div>
<div></div>
<div style="margin-top: 10px;"></div>
</div>
</div>
</div>
<div></div>
<div></div>
<div style="background: url(static/img/longAD7.jpg);"></div>
<div>为你推荐</div>
<div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div style="margin-right: 10px;"></div>
<div></div>
</div>
</div>
</div>
<div></div>
<div>
<div>
<div>
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a>
<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<hr>
<div>
<div>
<ul>
<li>帮助中心</li>
<li><a href="#">账户管理</a></li>
<li><a href="#">购物指南</a></li>
<li><a href="#">订单操作</a></li>
</ul>
<ul>
<li>服务支持</li>
<li><a href="#">售后政策</a></li>
<li><a href="#">自助服务</a></li>
<li><a href="#">相关下载</a></li>
</ul>
<ul>
<li>线下门店</li>
<li><a href="#">小米之家</a></li>
<li><a href="#">服务网点</a></li>
<li><a href="#">授权体验店</a></li>
</ul>
<ul>
<li>关于小米</li>
<li><a href="#">了解小米</a></li>
<li><a href="#">加入小米</a></li>
<li><a href="#">投资者关系</a></li>
</ul>
<ul>
<li>关注我们</li>
<li><a href="#">新浪微博</a></li>
<li><a href="#">官网微博</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<ul>
<li>特色服务</li>
<li><a href="#">F码通道</a></li>
<li><a href="#">礼物码</a></li>
<li><a href="#">防伪查询</a></li>
</ul>
</div>
<div>
<p>Feir-520-1314</p>
<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>
<button><i class="fa fa-commenting"></i> 联系客服</button>
</div>
</div>
<div>
<div>
<div style="background: url(static/img/footlogo.png);"></div>
<span>小米商城</span><i></i>
<span>MIUI</span><i></i>
<span>米家</span><i></i>
<span>米聊</span><i></i>
<span>多看</span><i></i>
<span>游戏</span><i></i>
<span>路由器</span><i></i>
<span>米粉卡</span><i></i>
<span>政企服务</span><i></i>
<span>小米</span><i></i>
<span>天猫店</span><i></i>
<span>隐私政策</span><i></>
<span>问题反馈</span><i></i>
<span>Select Region</span><br>
<div>
<a href="">©mi.com</a>
京ICP证110507号
<a href="">京ICP备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2014]0059-0009号</a>
<br>
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</div>
<div>
<img src="static/img/footericon1.png" alt="">
<img src="static/img/footericon2.png" alt="">
<img src="static/img/footericon3.png" alt="">
<img src="static/img/footericon4.png" alt="">
<img src="static/img/footericon5.png" alt="">
</div>
</div>
</div>
</div>
<div></div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-21 13:02:02
老师总结：代码写得很规范, 也很整齐, 不过,建议在一些重要的分段中, 写上一些适当的注释,会好些,你说呢?
