????：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut ic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="shortcut icon" type="image/x-icon" href="/static/images/footlogo.png"/>
<link rel="stylesheet" type="text/css" href="/static/css/daohang.css"/>
<link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 頭部 -->
<div class="top">
<div class="top_nav">
<ul class="top_navLeft">
<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="#">云服務(wù)</a><span></span></li>
<li><a href="#">金融</a><span></span></li>
<li><a href="#">有品</a><span></span></li>
<li><a href="#">小愛(ài)開放平臺(tái)</a><span></span></li>
<li><a href="#">政企服務(wù)</a><span></span></li>
<li><a href="#">資質(zhì)證照</a><span></span></li>
<li><a href="#">協(xié)議規(guī)則</a><span></span></li>
<li><a href="#">下載app</a><span></span></li>
<li><a href="#">Select Region</a></li>
</ul>
<ul class="top_navRight">
<li><a href="#">登錄</a><span></span></li>
<li><a href="#">注冊(cè)</a><span></span></li>
<li><a href="#" style="margin-right:20px;">消息通知</a></li>
<li class="top_navRightShop"><i class="fa fa-shopping-cart"></i> <a href="">購(gòu)物車(0)</a>
<div class="top_navRightShop_1">
購(gòu)物車還沒(méi)有商品，趕快選購(gòu)吧
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- 焦點(diǎn)部分 -->
<div class="focus">
<!-- 焦點(diǎn)導(dǎo)航 -->
<div class="focus_nav">
<div class="focus_nav_l">
<a href="#"><img src="/static/images/footlogo.png" alt=""></a>
<a href="#"><img src="/static/images/logoAD.gif" alt=""></a>
</div>
<ul class="focus_nav_c">
<li><a href="">小米手機(jī)</a>
<div class="focus_nav_c1">
<div class="focus_nav_c2">
<div class="focus_nav_c3">
<div class="focus_nav_c4"><span>新品</span></div>
<img src="/static/images/phone/phone1.png" alt="">
<p class="focus_nav_c4"style="color:#ccc">小米MIX 3</p>
<p class="focus_nav_c4">3299元起</p>
</div>
<i></i>
<div class="focus_nav_c3">
<div class="focus_nav_c4"><span>新品</span></div>
<img src="/static/images/phone/phone1.png" alt="">
<p class="focus_nav_c4"style="color:#ccc">小米MIX 3</p>
<p class="focus_nav_c4">3299元起</p>
</div>
<i></i>
</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="">服務(wù)</a></li>
<li><a href="">社區(qū)</a></li>
</ul>
<div class="focus_nav_r">
<form class="focusForm">
<input type="text">
<div class="focusForm1">
<a href="#">紅米Note7</a> <a href="#">小米8</a>
</div>
<button><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<!-- 大型側(cè)導(dǎo)航 -->
<div class="focusm">
<div class="focusm_left">
<ul>
<li><a href="">手機(jī) 電話卡</a><i class="fa fa-angle-right"></i>
<div class="focusm_left_r">
<div class="focusm_left_r1">
<a href=""><img src="/static/images/phone/phone1.png" alt=""></a>
<a href=""id="focusm_left_r2">小米MIX 3</a>
</div>
<div class="focusm_left_r1">
<a href=""><img src="/static/images/phone/phone1.png" alt=""></a>
<a href=""id="focusm_left_r2">小米MIX 3</a>
</div>
<div class="focusm_left_r1">
<a href=""><img src="/static/images/phone/phone1.png" alt=""></a>
<a href=""id="focusm_left_r2">小米MIX 3</a>
</div>
<div class="focusm_left_r1">
<a href=""><img src="/static/images/phone/phone1.png" alt=""></a>
<a href=""id="focusm_left_r2">小米MIX 3</a>
</div>
<div class="focusm_left_r1">
<a href=""><img src="/static/images/phone/phone1.png" alt=""></a>
<a href=""id="focusm_left_r2">小米MIX 3</a>
</div>
</div>
</li>
<li><a href="">電視 盒子</a><i class="fa fa-angle-right"></i></li>
<li><a href="">筆記本 平板</a><i class="fa fa-angle-right"></i></li>
<li><a href="">家電 插線板</a><i class="fa fa-angle-right"></i></li>
<li><a href="">出行 穿戴</a><i class="fa fa-angle-right"></i></li>
<li><a href="">智能 路由器</a><i class="fa fa-angle-right"></i></li>
<li><a href="">電源 配件</a><i class="fa fa-angle-right"></i></li>
<li><a href="">健康 兒童</a><i class="fa fa-angle-right"></i></li>
<li><a href="">耳機(jī)音響</a><i class="fa fa-angle-right"></i></li>
<li><a href="">生活箱包</a><i class="fa fa-angle-right"></i></li>
</ul>
</div>
<div class="focusm_right"></div>
<div class="clear"></div>
</div>
<!-- 焦點(diǎn)圖片 -->
<div class="focus_ul">
<div class="focus_ul_1" style="margin-right:12px; ">
<ul>
<li style="margin-right:12.7px;"><a href=""> <span class="fa fa-mobile-phone fa-2x"></span>選購(gòu)手機(jī)</a></li>
<li style="margin-right:12.7px;"><a href=""><span class="fa fa-gift fa-2x"></span>企業(yè)團(tuán)購(gòu)</a></li>
<li><a href=""><span class="fa fa-facebook fa-2x"></span>F碼通道</a></li>
<li style="margin-right:12.7px;"><a href=""><span class="fa fa-file-text fa-2x"></span>米粉卡</a></li>
<li style="margin-right:12.7px;"><a href=""><span class="fa fa-refresh fa-2x"></span>以舊換新</a></li>
<li><a href=""><span class="fa fa-credit-card fa-2x"></span>話費(fèi)充值</a></li>
</ul>
</div>
<div class="focus_ul_2" style="margin-right:14px;background-image: url(/static/images/midAD1.jpg)"></div>
<div class="focus_ul_2" style="margin-right:14px;background-image: url(/static/images/midAD2.jpg)"></div>
<div class="focus_ul_2" style="background-image: url(/static/images/midAD3.jpg)"></div>
<div class="clear"></div>
</div>
<div class="focus_shop">
<p>小米閃購(gòu)</p>
<div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(229,57,53);"></div>
<div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(255,172,19);"></div>
<div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(131,196,78)"></div>
<div class="focus_shop_1"style="margin-right:10.25px;border-top:1px solid RGB(33,150,243)"></div>
<div class="focus_shop_1"style="border-top:1px solid RGB(229,57,53);"></div>
<div class="clear"></div>
</div>
<div class="focus_img"style="background-image:url(/static/images/longAD1.jpg)"></div>
</div>
<!-- 產(chǎn)品內(nèi)容有背景色 -->
<div class="mains">
<div class="main">
<p>手機(jī)</p>
<div class="tab">
查看更多
<span><i class="fa fa-angle-right"></i></span>
</div>
<div class="main_left"></div>
<div class="main_right">
<div style="margin:0px 0px 14px 13px; ">
<div class="main_r_a">新品</div>
<img src="/static/images/buy/手機(jī)新1.jpg" alt="">
<h3><a href="#">小米8 青春版 4GB+64GB </a></h3>
<p class="main_right_p1">潮流鏡面漸變色，2400萬(wàn)自拍旗艦</p>
<p class="main_right_p2">
<span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del>
</p>
</div>
<div style="margin:0px 0px 14px 13px; ">
<div class="main_r_a">新品</div>
<img src="/static/images/buy/手機(jī)新1.jpg" alt="">
<h3><a href="#">小米8 青春版 4GB+64GB </a></h3>
<p class="main_right_p1">潮流鏡面漸變色，2400萬(wàn)自拍旗艦</p>
<p class="main_right_p2">
<span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del>
</p>
</div>
</div>
<div class="clear"></div>
<div class="main_img"style="background-image:url(/static/images/longAD2.jpg)"></div>
<p>家電</p>
<div class="tab">
<ul>
<li>熱門</li>
<li>電視影音</li>
<li>電腦</li>
<li>家居</li>
</ul>
</div>
<div class="main_left_2">
<div class="main_left_t"style="background-image: url(/static/images/buy/家電AD1.jpg)"></div>
<div class="main_left_b"style="background-image: url(/static/images/buy/家電AD2.jpg)" ></div>
</div>
<div class="main_right">
<div style="margin:0px 0px 14px 13px; ">
<div class="main_r_a">新品</div>
<img src="/static/images/buy/家電1.jpg" alt="">
<h3><a href="#">小米8 青春版 4GB+64GB </a></h3>
<p class="main_right_p1">潮流鏡面漸變色，2400萬(wàn)自拍旗艦</p>
<p class="main_right_p2">
<span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del>
</p>
</div>
<div style="margin:0px 0px 14px 13px;">
<div class="main_r_a">新品</div>
<img src="/static/images/buy/家電2.jpg" alt="">
<h3><a href="#">小米8 青春版 4GB+64GB </a></h3>
<p class="main_right_p1">潮流鏡面漸變色，2400萬(wàn)自拍旗艦</p>
<p class="main_right_p2">
<span style="color:RGB(255,126,0)">1299 元</span> <del>1399 元</del>
</p>
</div>
</div>
<div class="clear"></div>
<div class="main_img"style="background-image:url(/static/images/longAD3.jpg)"></div>
<p>為您推薦</p>
<div class="main_3">
<div class="main_3_a" style="margin-right:14px"></div>
<div class="main_3_a" style="margin-right:14px"></div>
<div class="main_3_a" style="margin-right:14px"></div>
<div class="main_3_a" style="margin-right:14px"></div>
<div class="main_3_a"></div>
</div>
<div class="clear"></div>
<p>熱評(píng)產(chǎn)品</p>
<div class="main_4">
<div class="main_4_a" style="margin-right:14px"></div>
<div class="main_4_a" style="margin-right:14px"></div>
<div class="main_4_a" style="margin-right:14px"></div>
<div class="main_4_a"></div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
----------------------------------------scc樣式部分------------------------
*{margin:0px; padding:0px;}
a{text-decoration: none;}
li{list-style: none;}
.clear{clear: both;}
/* 頭部 */
.top{
width:100%;background:RGB(51,51,51);
}
/* 頭部導(dǎo)航*/
.top_nav{
width:1226px;height:38px;margin:0px auto;
}
.top_navLeft li{
height:38px; float: left; line-height:38px;
}
.top_navLeft li a,.top_navRight li a{
color:RGB(176,176,176);font-size:12px;
}
.top_navLeft li span,.top_navRight li span{
border-left:1px solid #6c6d69;display:inline-block; height:10px; margin: 0px 8px;
}
.top_navRight{
float: right;
}
.top_navRight li{
height:38px;line-height:38px; float: left;
}
.top_navRightShop{
padding:0px 22px; background:RGB(66,66,66);position: relative;
}
.top_navRightShop i{
color:RGB(176,176,176); margin-right: 5px;
}
.top_navRightShop_1{
width:320px;height:100px;background:#fff;position: absolute; right: 0px; top:38px; text-align: center;line-height: 100px;display: none;
}
.top_navRightShop:hover .top_navRightShop_1{
display: block; z-index: 2;
}
.top_navRightShop:hover{
background:#fff;
}
.top_navRightShop:hover a{
color:#ff6700;
}
.top_navRightShop:hover i{
color:#ff6700;
}
.top_nav ul li a[href="#"]:hover{color:#fff;}
/* 焦點(diǎn)部分 */
.focus{
width: 1226px;margin:0px auto;
}
/* 焦點(diǎn)導(dǎo)航 */
.focus_nav{
height:100px;
}
.focus_nav_l{
width:235px;&n
