abstract：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="images/x-icon" href="static/img/footlogo.png">
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="static/style/main.css">
<script src="static/layui/layui.js"></script>
<title>小米商城首頁</title>
</head>
<body>
<!--header部分-->
<div class="head">
<div class="menu">
menu
</div>
</div>
<!--主體部分-->
<div class="contents mt20">
<div class="content w1300">
<div class="contentNav w1300 mt15">contentNav</div>
<div class="contentBanner w1300 mt10">
<!--商品分類-->
<div class="contentBanner_l">
<ul>
<li><a href="">手機 電話卡</a><i class="fa fa-angle-right"></i>
<div class="contentBanner_l_menu">
<div><img src="static/img/phone/phone1.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone2.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</a></div>
<div><img src="static/img/phone/phone1.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone2.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</a></div>
<div><img src="static/img/phone/phone1.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone2.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</a></div>
</div>
</li>
<li><a href="">電視機 盒子</a><i class="fa fa-angle-right"></i>
<div class="contentBanner_l_menu">
<div><img src="static/img/phone/phone6.jpg"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</a></div>
<div><img src="static/img/phone/phone1.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone2.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</a></div>
<div><img src="static/img/phone/phone1.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone2.png"><a href="">紅米6A</a></div>
<div><img src="static/img/phone/phone6.jpg"><a href="">移動4G專區(qū)</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="">智能 家電 </a><i class="fa fa-angle-right"></i></li>
</ul>
</div>
<!--輪播-->
<div class="contentBanner_r">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><a href=""><img src="static/img/a.jpg" alt="" height="480" width="1040"></a></div>
<div><a href=""><img src="static/img/b.jpg" alt="" height="480" width="1040"></a></div>
<div><a href=""><img src="static/img/c.jpg" alt="" height="480" width="1040"></a></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="contentPro w1300 mt10">
<div class="contentPro_1"></div>
<div class="contentPro_2" style="background: url(static/img/midAD1.jpg)"></div>
<div class="contentPro_2" style="background: url(static/img/midAD2.jpg)"></div>
<div class="contentPro_2" style="background: url(static/img/midAD3.jpg);margin-right:0"></div>
</div>
<div class="clear"></div>
<div class="contentShop w1300 mt20">
小米上鉤
</div>
<div class="contentpic w1300 mt15"><img src="static/img/longAD1.jpg" alt=""></div>
<div class="contentPhone w1300 mt20">手機</div>
<div class="contentpic w1300 mt15"><img src="static/img/longAD2.jpg" alt=""></div>
<div class="contentZhi w1300 mt20">智能</div>
<div class="contentpic w1300 mt15"><img src="static/img/longAD3.jpg" alt=""></div>
<div class="contentDian w1300 mt20">家電</div>
<div class="contentpic w1300 mt15"><img src="static/img/longAD4.jpg" alt=""></div>
</div>
</div>
<!--footer部分-->
<div class="footers mt20">
<div class="footer w1300 mt20">
<div class="footer_t">
<a href="javascript:;"><i class="fa fa-wrench"></i>預約維修服務</a>|
<a href="javascript:;"><i class="fa fa-rotate-right"></i>7天無理由退貨</a>|
<a href="javascript:;"><i class="fa fa-refresh"></i>15天免費換貨</a>|
<a href="javascript:;"><i class="fa fa-gift"></i>滿150元包郵</a>|
<a href="javascript:;"><i class="fa fa-map-marker"></i>520余家售后網點</a>
</div>
<div class="clear"></div>
<div class="footer_c mt10">
<div>
<a href="" class="footer_c_title">幫助中心</a><br>
<a href="">賬戶管理</a><br>
<a href="">購物指南</a><br>
<a href="">訂單操作</a>
</div>
<div>
<a href="" class="footer_c_title">服務支持</a><br>
<a href="">自助服務</a><br>
<a href="">相關下載</a><br>
<a href="">售后政策</a>
</div>
<div>
<a href="" class="footer_c_title">線下門店</a><br>
<a href="">小米之家</a><br>
<a href="">服務網點</a><br>
<a href="">授權體驗店</a>
</div>
<div>
<a href="" class="footer_c_title">關于小米</a><br>
<a href="">了解小米</a><br>
<a href="">加入小米</a><br>
<a href="">投資者關系</a>
</div>
<div>
<a href="" class="footer_c_title">關注我們</a><br>
<a href="">新浪微博</a><br>
<a href="">官網微博</a><br>
<a href="">聯(lián)系我們</a>
</div>
<div style="border-right: 1px solid #ccc">
<a href="" class="footer_c_title">特色服務</a><br>
<a href="">F碼通道</a><br>
<a href="">禮物碼</a><br>
<a href="">防偽查詢</a>
</div>
<div class="footer_c_content mt10" style="width: 20%;text-align: center">
<p>Feir-520-1314</p>
<p>周一至周日 8:00-18:00 <br>(僅收市話費)</p>
<p class="mt10"><a href=""><i class="fa fa-commenting"></i> 聯(lián)系客服</a></p>
</div>
</div>
<div class="clear"></div>
<div class="footer_f mt20">
<div><img src="static/img/footlogo.png" alt=""></div>
<div>
<p>
<a href="">小米商城</a>|
<a href="">MIUI</a>|
<a href="">米家</a>|
<a href="">米聊</a>|
<a href="">多看</a>|
<a href="">游戲</a>|
<a href="">路由器</a>|
<a href="">米粉卡</a>|
<a href="">政企服務</a>|
<a href="">小米天貓店</a>|
<a href="">隱私政策</a>|
<a href="">問題反饋</a>|
<a href="">Select Region</a>
</p>
<p>
?mi.com
京ICP證110507號
京ICP備10046444號
京公網安備11010802020134號
京網文[2014]0059-0009號
</p>
<p>違法和不良信息舉報電話：185-0130-1238，本網站所列數(shù)據，除特殊說明，所有數(shù)據均出自我司實驗室測試</p>
</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>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造實例
carousel.render({
elem: '#test1'
,width: '100%' //設置容器寬度
,height:'480px'
,arrow: 'always' //始終顯示箭頭
//,anim: 'updown' //切換動畫方式
});
});
</script>
</body>
</html>
*{margin: 0px; padding: 0px;}
li{list-style:none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
img{margin: 0;padding: 0}
.w1300{width: 1300px}
.clear{clear: both;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px}
.mt20{margin-top: 20px}
/*head*/
.head{background-color: #333;width: 100%;height: 40px}
.menu{width: 1300px;background-color: #ccc;margin: 0 auto;height: 40px}
/*主體部分*/
.content{margin: 0 auto;}
.contentNav{height: 100px;background-color: #ccc}
.contentBanner{background-color: #ccc}
.contentBanner_l{width:260px ;height: 450px;background-color: #424242;float: left;padding-top: 30px;position: relative}
.contentBanner_l > ul >li >a,i{color: #fff}
.contentBanner_l > ul >li >i{float: right;margin-right: 20px;line-height: 42px}
.contentBanner_l>ul>li{height: 42px;line-height: 42px;padding-left: 10px}
.contentBanner_l>ul>li:hover{background-color: #ff6700}
.contentBanner_l_menu{height:480px;z-index: 999999;position: absolute;top:0;left: 260px;width: 800px ;background-color: #fff;display: none}
.contentBanner_l > ul >li:hover .contentBanner_l_menu{display: block}
.contentBanner_l_menu>div{width: 230px;height: 70px;margin-right:10px;float: left; padding-left: 20px;}
.contentBanner_l_menu div img{width: 40px;height: 40px;margin: 15px 0px;float: left; }
.contentBanner_l_menu div a{color: #424242;float: left;margin-top: 15px;}
.contentBanner_l_menu div:hover a{color:#ff6700;}
.contentBanner_r{width: 1040px;height: 480px;float: left;}
.contentPro div{float: left}
.contentPro_1{width: 260px;background-color: #2196f3;height: 170px;margin-right: 31px}
.contentPro_2{width: 316px;height: 170px;margin-right: 30px;}
.contentShop{height: 400px;background-color: #ccc}
.contentpic img{width: 100%}
.contentPhone{height: 400px;background-color: #ccc}
.contentDian{height: 400px;background-color: #ccc}
.contentZhi{height: 400px;background-color: #ccc}
/*footer部分*/
.footer{margin: 0 auto}
.footer_t{border-bottom: 1px solid #ccc;padding-bottom: 30px}
.footer_t a{width: 19.4%;display: inline-block;text-align: center;color:#616161;font-size: 16px}
.footer_t a i{margin-right: 16px}
.footer_c a{color:#616161;font-size: 12px;display: inline-block;margin-top: 10px}
.footer_c a:hover{color:#ff6700}
.footer_c > div{width: 13.3%;float: left;text-align: left}
.footer_c_title{color:#424242;font-size: 16px!important;display: inline-block;margin-bottom: 14px}
.footer_c_title:hover{color:#616161!important;}
.footer_c_content p:nth-child(1){color: #ff6700;font-size: 22px}
.footer_c_content p:nth-child(2){color: #616161;font-size: 12px}
.footer_c_content a{padding: 5px 22px;color: #ff6700;font-size: 12px;border: 1px solid #ff6700}
.footer_c_content a:hover{background-color: #ff6700;color: #fff}
.footer_f > div{float: left}
.footer_f > div:nth-child(1){margin-right: 20px}
.footer_f > div p:nth-child(2){line-height: 20px}
.footer_f > div:nth-child(2) a{color: #757575;font-size: 12px;margin-right: 5px}
.footer_f > div:nth-child(2) p:nth-child(2){color: #b0b0b0;font-size: 12px}
.footer_f > div:nth-child(2) p:nth-child(3){color: #b0b0b0;font-size: 12px}
.footer_f > div:nth-child(3){width: 523px;text-align: center;padding-top: 15px}
.footer_f>div:nth-child(3) img{display: inline-block;}
.footer_f>div:nth-child(3) img:nth-child(1){width: 85px;height: 28px}
Correcting teacher：查無此人Correction time：2019-04-04 16:18:32
Teacher's summary：完成的不錯。代碼如果多的話，可以把代碼截圖發(fā)上來。繼續(xù)加油。