abstract：沒有按照老師視頻中的來寫。自己仿照現(xiàn)在小米商城首頁做的。首頁html：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>小米首頁<
沒有按照老師視頻中的來寫。
自己仿照現(xiàn)在小米商城首頁做的。
首頁html：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小米首頁</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 命名規(guī)則：
主體內(nèi)容部分div從上往下依次為con01,con02... ...
如有上下兩行，上行為top，簡寫為t;下行為bottom，簡寫為b。
一行如有5個圖，從左往右依次為1-5。
-->
<!-- 其中，家電，智能，搭配，配件，周邊 這幾個布局都一樣，由于是首次仿站，所以都沒有省略，用來練手。 -->
</head>
<body>
<script type="text/javascript">
$(function(){
$('#rr').mouseover(function(){
$(this).css({'background':'#fff','color':'#ff6700'})//購物車框鼠標移上背景變白色，自體顏色變桔紅
})
$('#rr').mouseleave(function(){
$(this).css({'background':'#424242','color':'#ccc'})//購物車框鼠標移出背景變原來灰色，文字變原灰色
})
$('.down').hide()//下載app的下拉框默認隱藏
$('#ll').mouseover(function(){
$('.down').show()//鼠標移上下載app按鈕，下拉框顯示
})
$('#ll').mouseleave(function(){
$('.down').hide()//鼠標移開下載app按鈕，下拉框隱藏
})
$('#rr').mouseover(function(){
$('this').css('background','#fff')//鼠標移上購物車按鈕，背景變白色
})
$('#rr').mouseleave(function(){
$('this').css('background','#424242')//鼠標移開購物車按鈕，背景變原來灰色
})
$('.gwc').hide()//購物車下拉框默認隱藏
$('#rr').mouseover(function(){
$('.gwc').slideDown(350)//鼠標移上購物車按鈕，下拉框動態(tài)打開
})
$('#rr').mouseleave(function(){
$('.gwc').slideUp(350)//鼠標移開購物車按鈕，下拉框動態(tài)折疊
})
// 關(guān)于鼠標移上變色，有的用jquery做的，有的用css做的
})
</script>
<!-- 頭部 -->
<div class="header">
<div class="topMenu">
<ul>
<li>小米商城</li>
<li>MIUI</li>
<li>loT</li>
<li>云服務</li>
<li>金融</li>
<li>有品</li>
<li>小愛開放平臺</li>
<li>政企服務</li>
<li>資質(zhì)證照</li>
<li>協(xié)議規(guī)則</li>
<li id="ll">下載app
<div class="down">
<a href="#"><img src="static/images/D.png"></a>
</div>
</li>
<li>Select Region</li>
<li style="margin-left:250px;">登陸</li>
<li>注冊</li>
<li>消息通知</li>
<li id="rr" style="float:right;margin-right:1px;"><i class="fa fa-shopping-cart"></i>購物車（0）
<div class="gwc">
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 主體 -->
<div class="content">
<!-- logo行 -->
<div class="logotop">
<!-- logo圖標 -->
<div class="logo-top"></div>
<!-- logo后10個鏈接 -->
<div class="logo-menu">
<ul id="logo-menu10">
<li id="uui">小米手機</li>
<li>紅米</li>
<li>電視</li>
<li>筆記本</li>
<li>家電</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服務</li>
<li>社區(qū)</li>
</ul>
</div>
<!-- logo后搜索框 -->
<div class="logo-so">
<div class="logo-so-l">
<input type="text" value="小米8">
</div>
<div class="logo-so-r">
<button>搜索</button>
</div>
</div>
</div>
<div class="clear"></div>
<!-- 輪換圖 -->
<div class="con01">
<!-- 左邊菜單 -->
<div class="con01-l"></div>
<!-- 右邊輪換圖 -->
<div class="con01-r"></div>
</div>
<div class="clear"></div><!-- 清除浮動 -->
<!-- 小米閃購上部四塊 -->
<div class="con02">
<!-- 左邊第一塊六個按鈕 -->
<div class="con02-1"></div>
<!-- 右邊三塊都一樣 -->
<div class="con02-2" style="background:url(static/images/con022.jpg);margin-right:13.5px;"></div>
<div class="con02-2" style="background:url(static/images/con023.jpg);margin-right:13.5px;"></div>
<div class="con02-2" style="background:url(static/images/con024.jpg);"></div>
</div>
<div class="clear"></div>
<h3>小米閃購</h3><br>
<!-- 小米閃購 -->
<div class="con03">
<!-- 左側(cè)倒計時 -->
<div class="con03-1"></div>
<!-- 右側(cè)四個圖片 -->
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2" style="margin-right:13.5px;"></div>
<div class="con03-2"></div>
</div>
<div class="clear"></div>
<!-- 小米閃購下方圖片 -->
<div class="con04" style="background:url(static/images/con04.jpg);"></div>
<h3 style="float:left;">手機</h3><h4 style="float:right;margin-right:65px;">查看全部</h4>
<div class="clear"></div>
<br>
<!-- 手機 -->
<div class="con05">
<!-- 手機部分左側(cè)豎圖 -->
<div class="con05-l"></div>
<!-- 手機部分右側(cè)上部四圖 -->
<div class="con05-r-t">
<div class="con05-r-t-1"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
<div class="con05-r-t-1" style="margin-left:13.5px;"></div>
</div>
<!-- 手機部分右側(cè)下部四圖 -->
<div class="con05-r-b">
<div class="con05-r-b-1"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
<div class="con05-r-b-1" style="margin-left:13.5px;"></div>
</div>
</div>
<div class="clear"></div>
<!-- 手機部分下方圖片 -->
<div class="con06" style="background:url(static/images/con06.jpg);"></div>
<!-- 家電 -->
<h3 style="float:left;">家電</h3><h4 style="float:right;margin-right:65px;">熱門 電視影音 電腦 家居</h4>
<div class="clear"></div>
<!-- 家電部分 -->
<div class="con07">
<!-- 家電部分上部5圖 -->
<div class="con07-t">
<div class="con07-t-1"></div>
<div class="con07-t-1" style="margin-left:13.5px"></div>
<div class="con07-t-1" style="margin-left:13.5px"></div>
<div class="con07-t-1" style="margin-left:14px"></div>
<div class="con07-t-1" style="margin-left:14px"></div>
</div>
<!-- 家電部分下部5圖 -->
<div class="con07-b">
<div class="con07-b-1"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<div class="con07-b-1" style="margin-left:13.5px"></div>
<!-- 家電部分下部分最右兩小圖 -->
<div class="con07-b-2" style="margin-left:13.5px">
<div class="con07-b-2-t"></div>
<div class="con07-b-2-b"></div>
</div>
</div>
</div>
<!-- 家電部分下部圖片 -->
<div class="con08" style="background:url(static/images/con08.jpg);"></div>
<!-- 智能 -->
<h3 style="float:left;">智能</h3><h4 style="float:right;margin-right:65px;">熱門 出行 健康 酷玩 路由器</h4>
<div class="clear"></div>
<!-- 智能部分 -->
<div class="con09">
<!-- 智能部分上部5圖 -->
<div class="con09-t">
<div class="con09-t-1"></div>
<div class="con09-t-1" style="margin-left:13.5px"></div>
<div class="con09-t-1" style="margin-left:13.5px"></div>
<div class="con09-t-1" style="margin-left:14px"></div>
<div class="con09-t-1" style="margin-left:14px"></div>
</div>
<!-- 智能部分下部5圖 -->
<div class="con09-b">
<div class="con09-b-1"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<div class="con09-b-1" style="margin-left:13.5px"></div>
<!-- 智能部分下部分最右兩小圖 -->
<div class="con09-b-2" style="margin-left:13.5px">
<div class="con09-b-2-t"></div>
<div class="con09-b-2-b"></div>
</div>
</div>
</div>
<!-- 智能部分下部圖片 -->
<div class="con10" style="background:url(static/images/con10.jpg);"></div>
<!-- 搭配 -->
<h3 style="float:left;">搭配</h3><h4 style="float:right;margin-right:65px;">熱門 耳機音響 電源 電池存儲卡</h4>
<div class="clear"></div>
<!-- 搭配部分 -->
<div class="con11">
<!-- 搭配部分上部5圖 -->
<div class="con11-t">
<div class="con11-t-1"></div>
<div class="con11-t-1" style="margin-left:13.5px"></div>
<div class="con11-t-1" style="margin-left:13.5px"></div>
<div class="con11-t-1" style="margin-left:14px"></div>
<div class="con11-t-1" style="margin-left:14px"></div>
</div>
<!-- 搭配部分下部5圖 -->
<div class="con11-b">
<div class="con11-b-1"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<div class="con11-b-1" style="margin-left:13.5px"></div>
<!-- 搭配部分下部分最右兩小圖 -->
<div class="con11-b-2" style="margin-left:13.5px">
<div class="con11-b-2-t"></div>
<div class="con11-b-2-b"></div>
</div>
</div>
</div>
<!-- 搭配部分下部圖片 -->
<div class="con12" style="background:url(static/images/con12.jpg);"></div>
<!-- 配件 -->
<h3 style="float:left;">配件</h3><h4 style="float:right;margin-right:65px;">熱門 保護套 貼膜 其他配件</h4>
<div class="clear"></div>
<!-- 配件部分 -->
<div class="con13">
<!-- 配件部分上部5圖 -->
<div class="con13-t">
<div class="con13-t-1"></div>
<div class="con13-t-1" style="margin-left:13.5px"></div>
<div class="con13-t-1" style="margin-left:13.5px"></div>
<div class="con13-t-1" style="margin-left:14px"></div>
<div class="con13-t-1" style="margin-left:14px"></div>
</div>
<!-- 配件部分下部5圖 -->
<div class="con13-b">
<div class="con13-b-1"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<div class="con13-b-1" style="margin-left:13.5px"></div>
<!-- 配件部分下部分最右兩小圖 -->
<div class="con13-b-2" style="margin-left:13.5px">
<div class="con13-b-2-t"></div>
<div class="con13-b-2-b"></div>
</div>
</div>
</div>
<!-- 配件部分下部圖片 -->
<div class="con14" style="background:url(static/images/con14.jpg);"></div>
<!-- 周邊 -->
<h3 style="float:left;">周邊</h3><h4 style="float:right;margin-right:65px;">熱門 出行 居家 生活周邊 箱包</h4>
<div class="clear"></div>
<!-- 周邊部分 -->
<div class="con15">
<!-- 周邊部分上部5圖 -->
<div class="con15-t">
<div class="con15-t-1"></div>
<div class="con15-t-1" style="margin-left:13.5px"></div>
<div class="con15-t-1" style="margin-left:13.5px"></div>
<div class="con15-t-1" style="margin-left:14px"></div>
<div class="con15-t-1" style="margin-left:14px"></div>
</div>
<!-- 周邊部分下部5圖 -->
<div class="con15-b">
<div class="con15-b-1"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<div class="con15-b-1" style="margin-left:13.5px"></div>
<!-- 周邊部分下部分最右兩小圖 -->
<div class="con15-b-2" style="margin-left:13.5px">
<div class="con15-b-2-t"></div>
<div class="con15-b-2-b"></div>
</div>
</div>
</div>
<!-- 周邊部分下部圖片 -->
<div class="con16" style="background:url(static/images/con16.jpg);"></div>
<h3>為你推薦</h3><br>
<!-- 為你推薦部分 -->
<div class="con17">
<div class="con17-1"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
<div class="con17-1" style="margin-left:13.5px"></div>
</div>
<h3>熱評產(chǎn)品</h3><br>
<!-- 熱評產(chǎn)品部分 -->
<div class="con18">
<!-- 熱評產(chǎn)品上部圖片 -->
<div class="con18-t">
<div class="con18-t-1"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
<div class="con18-t-1" style="margin-left:11px"></div>
</div>
<!-- 熱評產(chǎn)品下部文字 -->
<div class="con18-b">
<div class="con18-b-1"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
<div class="con18-b-1" style="margin-left:11px"></div>
</div>
</div>
<div class="clear"></div>
<h3>內(nèi)容</h3><br>
<!-- 內(nèi)容部分 -->
<div class="con19">
<!-- 內(nèi)容部分4個div -->
<div class="con19-1"></div>
<div class="con19-1" style="margin-left:11px"></div>
<div class="con19-1" style="margin-left:11px"></div>
<div class="con19-1" style="margin-left:11px"></div>
</div>
<h3 style="float:left;">視頻</h3><h4 style="float:right;margin-right:65px;">查看全部</h4><br>
<!-- 視頻部分 -->
<div class="con20">
<!-- 視頻上部視頻 -->
<div class="con20-t">
<div class="con20-t-1"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
<div class="con20-t-1" style="margin-left:11px"></div>
</div>
<!-- 視頻下部文字 -->
<div class="con20-b">
<div class="con20-b-1"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
<div class="con20-b-1" style="margin-left:11px"></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<!-- 底部第一排5個鏈接 -->
<div class="foot1">
<dl>
<dt id="foot1-1"><i class="fa fa-wrench"></i>預約維修服務</dt>
<dt id="foot1-1">7天無理由退貨</dt>
<dt id="foot1-1">15天免費換貨</dt>
<dt id="foot1-1"><i class="fa fa-gift"></i>滿150元包郵</dt>
<dt>520余家售后網(wǎng)店</dt>
</dl>
</div>
<!-- 底部第二排鏈接以及右側(cè)客服電話部分 -->
<div class="foot2">
<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="">相關(guān)下載</a></dd>
</dl>
<dl>
<dt>線下門店</dt>
<dd><a href="">小米之家</a></dd>
<dd><a href="">服務網(wǎng)店</a></dd>
<dd><a href="">授權(quán)體驗店</a></dd>
</dl>
<dl>
<dt>關(guān)于小米</dt>
<dd><a href="">了解小米</a></dd>
<dd><a href="">加入小米</a></dd>
<dd><a href="">投資者關(guān)系</a></dd>
</dl>
<dl>
<dt>關(guān)注我們</dt>
<dd><a href="">新浪微博</a></dd>
<dd><a href="">官方微信</a></dd>
<dd><a href="">聯(lián)系我們</a></dd>
</dl>
<dl>
<dt>特色服務</dt>
<dd><a href="">F碼通道</a></dd>
<dd><a href="">禮物碼</a></dd>
<dd><a href="">防偽查詢</a></dd>
</dl>
<!-- 右側(cè)客服電話部分 -->
<div class="tel">
<div id="tel">400-100-5678</div>
<div id="dat">周一至周日 8:00-18:00</div>
<div id="fei">(僅收市話費)</div>
<button id="but">聯(lián)系客服</button>
</div>
</div>
<!-- logo圖表及右側(cè)小字,下面資質(zhì)部分 -->
<div class="foot3">
<div class="logobot"></div>
<div class="links">
<div class="links-1">
<p><a href="">小米商城</a><span id="shu">|</span><a href="">MIUI</a><span id="shu">|</span><a href="">米家</a><span id="shu">|</span><a href="">米聊</a><span id="shu">|</span><a href="">多看</a><span id="shu">|</span><a href="">游戲</a><span id="shu">|</span><a href="">路由器</a><span id="shu">|</span><a href="">米粉卡</a><span id="shu">|</span><a href="">政企服務</a><span id="shu">|</span><a href="">小米天貓店</a><span id="shu">|</span><a href="">隱私政策</a><span id="shu">|</span><a href="">商城用戶協(xié)議</a><span id="shu">|</span><a href="">賬號協(xié)議</a><span id="shu">|</span><a href="">問題反饋</a><span id="shu">|</span><a href="">廉正舉報</a><span id="shu">|</span><a href="">誠信合規(guī)</a><span id="shu">|</span><a href="">Select Region</a>
</p>
</div>
<div class="links-2">
? <a href="">mi.com</a> 京ICP證110507號 <a href="">京ICP備10046444號</a> <a href="">京公網(wǎng)安備11010802020134號</a> <a href="">京網(wǎng)文[2017]1530-131號</a><br>
<a href="">（京）網(wǎng)械平臺備字（2018）第00005號</a> <a href="">互聯(lián)網(wǎng)藥品信息服務資格證 (京) -非經(jīng)營性-2014-0090 </a> <a href="">營業(yè)執(zhí)照 </a> <a href="">醫(yī)療器械公告</a><br>
<a href="">增值電信業(yè)務許可證</a> 網(wǎng)絡食品經(jīng)營備案（京）【2018】WLSPJYBAHF-12 <a href="">食品經(jīng)營許可證</a><br>
違法和不良信息舉報電話：185-0130-1238 <a href="">知識產(chǎn)權(quán)侵權(quán)投訴 </a> 本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實驗室測試
</div>
<div class="links-3">
<a href=""><img src="static/images/truste1.png"></a>
<a href=""><img src="static/images/truste2.png"></a>
<a href=""><img src="static/images/truste3.png"></a>
<a href=""><img src="static/images/truste4.png"></a>
<a href=""><img src="static/images/truste5.png"></a>
</div>
</div>
</div>
<!-- 最下一行字 -->
<div class="foot4">
<img src="static/images/text.png">
</div>
</div>
</body>
</html>css代碼：
*{padding:0px;margin:0px;}
.clear{clear:both;}
a{text-decoration:none;}
h3{margin-left:65px;}
/*頭部*/
.header{background:#333;width:100%;height:40px;margin:0px auto;}
.topMenu{width:1226px;height:40px;line-height:40px;margin:0px auto;}
.topMenu i{font-size:16px;margin-right:5px;}
/*頂部左側(cè)鏈接*/
.topMenu-l{float:left;}
/*頂部右側(cè)鏈接*/
.topMenu-r{margin-left:300px;}
ul{list-style:none;}
li{float:left;margin-right:16px;font-size:12px;color:#ccc;}
.topMenu li:hover{color:#fff;}
#rr{display:inline-block;width:120px;height:40px;background:#424242;text-align:center;line-height:40px;}
.down{width:123px;height:150px;background:url(../static/images/D.png) no-repeat;z-index:5;position:absolute;left:575px;box-shadow:2px 2px 2px #ccc;}
.gwc{width:315px;height:100px;background:#fff;box-shadow:2px 2px 2px #ccc;position:absolute;left:974px;top:40px;}
/*logo行*/
.logotop{width:1226px;height:56px;margin:23px auto;}
.logo-top{width:56px;height:56px;background:url(../static/images/logo.png) no-repeat;float:left;}
.logo-menu{width:600px;height:56px;float:left;margin-left:178px;}
.logo-menu li{font-size:15px;color:#5b5b5b;font-weight:bold;line-height:56px;margin-left:2px;}
.logo-menu li:hover{color:#ff6700;}
#uui:hover{color:#ff6700;}
.logo-so{width:300px;height:56px;float:left;margin-left:90px;border:1px solid #e0e0e0;}
.logo-so-l{float:left;right:-1px;border-right:1px solid #e0e0e0;}
.logo-so-l input{width:242px;height:54px;border:none;}
.logo-so-r{float:right;}
.logo-so-r button{width:56px;height:56px;background:#fff;border:none;}
.logo-so-r button:hover{background:#ff6700;}
/*以下是主體內(nèi)容*/
/*輪換圖部分*/
.con01{height:460px;width:1226px;margin:15px auto;}
/*左邊菜單*/
.con01-l{width:234px;height:460px;background:#000;float:left;}
/*右邊輪換圖*/
.con01-r{width:992px;height:460px;background:url(../static/images/lht1.jpg) no-repeat;float:left;}
/*小米閃購上部四塊*/
.con02{width:1226px;height:172px;margin:15px auto;}
/*左邊第一塊六個按鈕*/
.con02-1{width:234px;height:172px;float:left;background:#333;margin-right:13.5px;}
/*右邊三塊都一樣*/
.con02-2{width:317px;height:172px;float:left;}
/*小米閃購 */
.con03{width:1226px;height:340px;margin:13px auto;}
/*左側(cè)倒計時*/
.con03-1{width:234px;height:340px;float:left;background:#ccc;margin-right:13.5px;}
/*右側(cè)四個圖片*/
.con03-2{width:234px;height:340px;float:left;background:#fafafa;}
/*小米閃購下方圖片*/
.con04{width:1226px;height:120px;margin:13.5px auto;}
/*手機*/
.con05{width:1226px;height:614px;margin:13.5px auto;}
/*手機部分左側(cè)豎圖*/
.con05-l{width:234px;height:614px;background:url(../static/images/con05.jpg);float:left;}
/*手機部分右側(cè)上部四圖*/
.con05-r-t{width:978px;height:300px;float:left;margin-left:13px;}
.con05-r-t-1{width:234px;height:300px;background:pink;float:left;}
/*手機部分右側(cè)下部四圖*/
.con05-r-b{width:978px;height:300px;margin-left:13.5px;margin-top:13px;float:left;}
.con05-r-b-1{width:234px;height:300px;background:pink;float:left;}
/*手機部分下方圖片*/
.con06{width:1226px;height:120px;margin:13.5px auto;}
/*家電部分*/
.con07{width:1226px;height:614px;margin:13.5px auto;}
/*家電部分上部5圖*/
.con07-t{width:1226px;height:300px;}
.con07-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*家電部分下部5圖*/
.con07-b{width:1226px;height:300px;margin-top:13.5px;}
.con07-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*家電部分下部分最右兩小圖*/
.con07-b-2{width:234px;height:300px;float:left;}
.con07-b-2-t,.con07-b-2-b{background:#ccc;width:234px;height:143px;}
.con07-b-2-b{margin-top:13.5px;}
/*家電部分下部圖片*/
.con08{width:1226px;height:120px;margin:13.5px auto;}
/*智能部分*/
.con09{width:1226px;height:614px;margin:13.5px auto;}
/*智能部分上部5圖*/
.con09-t{width:1226px;height:300px;}
.con09-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*智能部分下部5圖*/
.con09-b{width:1226px;height:300px;margin-top:13.5px;}
.con09-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*智能部分下部分最右兩小圖*/
.con09-b-2{width:234px;height:300px;float:left;}
.con09-b-2-t,.con09-b-2-b{background:#ccc;width:234px;height:143px;}
.con09-b-2-b{margin-top:13.5px;}
/*智能部分下部圖片*/
.con10{width:1226px;height:120px;margin:13.5px auto;}
/*搭配部分*/
.con11{width:1226px;height:614px;margin:13.5px auto;}
/*搭配部分上部5圖*/
.con11-t{width:1226px;height:300px;}
.con11-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*搭配部分下部5圖*/
.con11-b{width:1226px;height:300px;margin-top:13.5px;}
.con11-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*搭配部分下部分最右兩小圖*/
.con11-b-2{width:234px;height:300px;float:left;}
.con11-b-2-t,.con11-b-2-b{background:#ccc;width:234px;height:143px;}
.con11-b-2-b{margin-top:13.5px;}
/*搭配部分下部圖片*/
.con12{width:1226px;height:120px;margin:13.5px auto;}
/*配件部分*/
.con13{width:1226px;height:614px;margin:13.5px auto;}
/*配件部分上部5圖*/
.con13-t{width:1226px;height:300px;}
.con13-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*配件部分下部5圖*/
.con13-b{width:1226px;height:300px;margin-top:13.5px;}
.con13-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*配件部分下部分最右兩小圖*/
.con13-b-2{width:234px;height:300px;float:left;}
.con13-b-2-t,.con13-b-2-b{background:#ccc;width:234px;height:143px;}
.con13-b-2-b{margin-top:13.5px;}
/*配件部分下部圖片*/
.con14{width:1226px;height:120px;margin:13.5px auto;}
/*周邊部分*/
.con15{width:1226px;height:614px;margin:13.5px auto;}
/*周邊部分上部5圖*/
.con15-t{width:1226px;height:300px;}
.con15-t-1{width:234px;height:300px;background:#ccc;float:left;}
/*周邊部分下部5圖*/
.con15-b{width:1226px;height:300px;margin-top:13.5px;}
.con15-b-1{width:234px;height:300px;background:#ccc;float:left;}
/*周邊部分下部分最右兩小圖*/
.con15-b-2{width:234px;height:300px;float:left;}
.con15-b-2-t,.con15-b-2-b{background:#ccc;width:234px;height:143px;}
.con15-b-2-b{margin-top:13.5px;}
/*周邊部分下部圖片*/
.con16{width:1226px;height:120px;margin:13.5px auto;}
/*為你推薦部分*/
.con17{width:1226px;height:300px;margin:13.5px auto;}
/*為你推薦5圖*/
.con17-1{width:234px;height:300px;background:#ccc;float:left;}
/*熱評產(chǎn)品部分*/
.con18{width:1226px;height:416px;margin:13.5px auto;}
/*熱評產(chǎn)品上部圖片*/
.con18-t{width:1226px;height:220px;}
.con18-t-1{width:298px;height:220px;float:left;background:pink;}
/*熱評產(chǎn)品下部文字*/
.con18-b{width:1226px;height:220px;}
.con18-b-1{width:298px;height:220px;float:left;background:blue;}
/*內(nèi)容部分*/
.con19{width:1226px;height:420px;margin:13px auto;}
/*內(nèi)容部分4個div*/
.con19-1{width:298px;height:420px;background:yellow;float:left;}
/*視頻部分*/
.con20{width:1226px;height:286px;margin:13.5px auto;}
/*視頻上部視頻*/
.con20-t{width:1226px;height:180px;}
.con20-t-1{width:298px;height:180px;float:left;background:blue;}
/*視頻下部文字*/
.con20-b{width:1226px;height:106px;}
.con20-b-1{width:298px;height:106px;float:left;background:yellow;}
/*底部*/
.footer{width:1226px;margin:30px auto;}
/*底部第一排5個鏈接*/
.foot1{width:1226px;height:80px;border-bottom:1px solid #e0e0e0;}
.foot1 dt{font-size:15px;color:#626262;float:left;width:240px;height:20px;text-align:center;margin-top:30px;}
#foot1-1{border-right:1px solid #e0e0e0;}
/*底部第二排鏈接以及右側(cè)客服電話部分*/
.foot2{width:1226px;height:192px;}
.foot2 dl{float:left;width:160px;height:192px;display:inline-block;}
.foot2 dt{font-size:13px;color:#626262;margin:30px auto;text-align:left;}
.foot2 dd{font-size:12px;color:#8a8a8a;margin-bottom:10px;cursor:pointer;}
dd a{text-decoration:none;color:#8a8a8a;}
dd a:hover{color:#ff6700;}
/*.foot2 dd:hover{color:#ff934b}*/
.tel{width:263px;height:115px;margin-top:30px;float:right;border-left:1px solid #e0e0e0;text-align:center;}
#tel{font-size:25px;color:#ff6700;margin-bottom:6px;}
#dat,#fei{font-size:12px;}
#but{width:118px;height:32px;margin-top:12px;color:#ff6700;background:#fff;border:1px solid #ff6700;}
#but:hover{background:#f25807;color:#fff;}
/*logo圖表及右側(cè)小字,下面資質(zhì)部分*/
.foot3{width:980px;height:126px;}
.logobot{width:56px;height:126px;background:url(../static/images/logo.png) no-repeat;float:left;margin-right:6px;}
.links{width:920px;height:126px;}
.links-1 a{font-size:12px;color:#8a8a8a;}
.links-1 a:hover{color:#ff6700;}
#shu{color:#8a8a8a;margin:0px 2px;}
.links-2{font-size:12px;color:#c7c7c7;}
.links-2 a{color:#c7c7c7;}
.links-2 a:hover{color:#ff6700;}
/*最下一行字*/
.foot4{width:1226px;height:40px;}
.foot4 img{margin-left:488px;}效果圖：
Correcting teacher：滅絕師太Correction time：2019-01-28 09:19:21
Teacher's summary：完成的非常好！布局思路清晰，可以把知識點學以致用繼續(xù)保持……