完成练习及页面所有导航布局
<!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;}
.fr{float:right;}
.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;font-size:12px;line-height:40px;}
.menu span{color:#444;margin:0 5px;}
.menu li a{color:#b0b0b0;}
.menu li a:hover{color:white;}
.header_left li{float:left;}
.header_right li{float:left;}
.shoppingCar{width:120px;heihgt:100%;background:#ff6700;text-align:center;color:white;margin-left:20px;position:relative;}
.shoppingCar a{color:white!important;margin-left:5px;}
.shoppingCar div{width:300px;height:90px;background:#fff;border:1px solid #eee;border-top:none;color:#333;position:absolute;right:0;line-height:90px;text-align:center;display:none;}
.shoppingCar:hover div{display:block;}
.shoppingCar:hover{background:#fff;}
.shoppingCar:hover a{color:#ff6700!important;}
.shoppingCar:hover i{color:#ff6700;}
/*主体内容*/
.contentTop{width:100%;margin:0 auto;padding-bottom:40px;background:white;}
.content{width:1226px;margin:0 auto;}
/*导航栏*/
.contentMenu{height:66px;padding-top:10px;line-height:66px;}
.contentMenu_li{margin-left:15px;}
.contentMenu_li>li{float:left;margin-right:10px;}
.contentMenu_li>li>a{font-size:17px;color:#333;}
.MI_phine{width:100%;height:230px;background:white;border-top:1px solid #ccc;border-bottom:1px solid #ccc;position:absolute;left:0;display:none;}
.MI_phineDiv{width:1226px;height:100%;margin:0 auto;}
.MI_phine1 li{float:left;width:203px;height:100px;text-align:center;position:relative;}
.new{width:60px;height:18px;font-size:12px;color:#ff6700;line-height:18px;border:1px solid #ff6700;position:absolute;left:50%;transform:translateX(-50%);top:0;}
.MI_phine1 li .mainPic div{font-size:12px;color:#333;line-height:20px;}
.MI_phine1 .line{float:left;border-left:1px solid #ccc;height:80px;margin-top:40px;}
.contentMenu_li>li:hover>a{color:#ff6700;}
.contentMenu_li>li:hover>.MI_phine{display:block;}
/*搜索*/
.contentMenu_form{width:314px;height:54px;padding:6px 0;position:relative;}
.contentMenu_form input[type="text"]{padding-left:10px;outline:none;width:238px;height:50px;border:1px solid #ccc;border-right:none;float:left;}
.contentMenu_a{position:absolute;right:80px;top:50%;transform:translateY(-50%);}
.contentMenu_a a{color:#aaa;font-size:12px;background:#ebebeb;padding:3px;display:inline;}
.contentMenu_a a:hover{background:#ff6700;color:white;}
.contentMenu_form .button{width:62px;height:50px;border:1px solid #ccc;background:white;text-align:center;line-height:50px;font-size:21px;color:#424242;}
.contentMenu_form .button:hover{background:#ff6700;color:white;border:1px solid #ff6700;}
/*分类和banner图*/
.contentPic_l{width:240px;height:480px;background:#424242;}
.contentPic_l>ul{width:100%;heihgt:100%;padding:30px 0;position:relative;}
.contentPic_l>ul>li{width:100%;height:40px;line-height:40px;font-size:15px;color:white;margin:2px 0;}
.contentPic_l>ul>li a{color:white;margin-left:20px;}
.contentPic_l>ul>li i{font-size:15px;font-weight:bold;float:right;margin-top:13px;margin-right:20px;}
.contentPic_l>ul>li:hover{background:#ff6700;}
.contentPic_l>ul>li:hover .contentPic_l_menu{display:block;}
/*详细分类*/
.contentPic_l_menu{display:none;width:986px;height:480px;background:white;position:absolute;top:0;left:240px;box-shadow:3px 3px 3px rgba(0,0,0,0.1);}
.contentPic_l_menu>ul>li{width:250px;height:70px;margin:12px 10px 12px 0;}
.contentPic_l_menu>ul>li span{color:#666;}
.contentPic_l_menu>ul img{width:40px;margin-right:20px;}
.contentPic_l_menu>ul>li:hover span{color:#ff6700;}
.contentPic_r{width:986px;height:480px;background:blue;}
/*通道和三个广告区*/
.contentPic_ul_1{width:233px;height:170px;float:left;background:#5f5750;}
.contentPic_ul_1 li{width:77px;height:85px;float:left;line-height:85px;text-align:center;border-right:1px solid #666;font-size:12px;color:#ccc;position:relative;}
.contentPic_ul_1 li p{position:absolute;bottom:-20px;left:14px;}
.contentPic_ul_1 li:hover{color:white;}
.contentPic_ul_0{width:316px;height:170px;margin-left:15px;float:left;}
/*小米闪购*/
.contentShop p{font-size:24px;margin-top:25px;color:#333;}
.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{margin-top:40px;}
.contentUL p{font-size:24px;color:#333;float:left;}
.contentUL_r{float:right;cursor:pointer;}
.contentUL_r .enter{display:inline-block;width:20px;height:20px;background:#ccc;border-radius:10px;text-align:center;line-height:20px;color:white;font-weight:bold;margin-left:6px;}
.contentUL_r:hover .more{color:#ff6700;}
.contentUL_r:hover .enter{background:#ff6700;}
.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;}
/*家电*/
.contentUL_r>ul>li{float:left;margin-left:30px;padding-bottom:2px;}
.contentUL_r>ul>li:hover{color:#ff6700;border-bottom:2px solid #ff6700;}
.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 clearFix">
<ul class="header_left fl">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</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="#">下载app</a><span>|</span></li>
<li><a href="#">Select Region</a></li>
</ul>
<ul class="header_right fr">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="shoppingCar"><i class="fa fa-shopping-cart" style="font-size:18px;"></i><a href="#" style="">购物车(0)</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
<!--主题内容-->
<div class="contents">
<div class="contentTop">
<div class="content">
<!--导航栏-->
<div class="contentMenu clearFix">
<!--导航栏做部分图片-->
<div class="contentMenu_pic fl clearFix" style="position:relative;">
<img src="static/images/footlogo.png" style="position:absolute;bottom:0;">
<img src="static/images/logoAD.gif" style="float:left;margin-left:70px;">
</div>
<!--导航栏内容-->
<ul class="contentMenu_li fl clearFix">
<li><a href="">小米手机</a>
<div class="MI_phine">
<div class="MI_phineDiv">
<ul class="MI_phine1 clearFix">
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="">红米</a>
<div class="MI_phine">
<div class="MI_phineDiv">
<ul class="MI_phine1 clearFix">
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
<div class="line"></div>
<li>
<a href="">
<div class="new">新品</div>
<div class="mainPic" style="margin-top:30px;">
<img src="static/images/phone/phone1.png" width="100">
<div>小米2s</div>
<div style="color:#ff6700;">3299元</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="">电视</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">盒子</a></li>
<li><a href="">新品</a></li>
<li><a href="">路由器</a></li>
<li><a href="">智能硬件</a></li>
<li><a href="">服务</a></li>
<li><a href="">社区</a></li>
</ul>
<!--搜索-->
<form action="" method="" class="contentMenu_form fr clearFix">
<input type="text" name="">
<div class="contentMenu_a">
<a href="">电视新品</a>
<a href="">618预热</a>
</div>
<div class="button fl"><i class="fa fa-search"></i></div>
</form>
</div>
<!--分类和banner图-->
<div class="contentPic mt_20 clearFix">
<div class="contentPic_l fl">
<ul class="contentPic_li">
<li><a href="">手机 电话卡</a><i class="fa fa-angle-right"></i>
<div class="contentPic_l_menu clearFix">
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
</ul>
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
</ul>
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
</ul>
</div>
</li>
<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i>
<div class="contentPic_l_menu clearFix">
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
</ul>
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
</ul>
<ul class="fl">
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png"><span>红米6</span>
</a></li>
<li><a href="">
<img src="static/images/phone/phone1.png&