摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁-小米商城</title> &n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁-小米商城</title> <link rel="stylesheet" href="static/layui/css/layui.css"> <link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png"> <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/index.css"> <script src="static/layui/layui.js"></script> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <!-- top --> <div></div> <!-- 導(dǎo)航 --> <div></div> <div></div> <!-- 主體內(nèi)容 --> <div></div> <!-- 灰色部分 --> <div> <!-- 熱門手機 --> <div> <div> 手機 </div> <div> <div>手機廣告圖</div> <div> <ul> <li>手機1</li> <li style="margin-left:14px;">手機2</li> <li style="margin-left:14px;">手機3</li> <li style="margin-left:14px;">手機4</li> <li style="margin-top:14px;">手機1</li> <li style="margin-left:14px;margin-top:14px;">手機2</li> <li style="margin-left:14px;margin-top:14px;">手機3</li> <li style="margin-left:14px;margin-top:14px;">手機4</li> </ul> </div> </div> </div> <!-- 廣告欄 --> <div> <a href=""> <img src="static/images/ad01.jpg" width="1226" height="120"> </a> </div> <!-- 熱門商品 --> <div> <div> 家電 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 廣告欄 --> <div> <a href=""> <img src="static/images/ad02.jpg" width="1226" height="120"> </a> </div> <!-- 熱門商品 --> <div> <div> 智能 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 廣告欄 --> <div> <a href=""> <img src="static/images/ad03.jpg" width="1226" height="120"> </a> </div> <!-- 熱門商品 --> <div> <div> 搭配 </div> <div> <div><a href=""></a></div> <div><a href=""></a></div> </div> <div> <ul> <li><a href="">1</a></li> <li style="margin-left:14px;"><a href="">2</a></li> <li style="margin-left:14px;"><a href="">3</a></li> <li style="margin-left:14px;"><a href="">4</a></li> <li style="margin-top:14px;"><a href="">1</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">2</a></li> <li style="margin-left:14px;margin-top:14px;"><a href="">3</a></li> <div>0</div> <div>0</div> </ul> </div> </div> <!-- 廣告欄 --> <div> <a href=""> <img src="static/images/ad04.jpg" width="1226" height="120"> </a> </div> <!-- 底部1--> <div> <div> <a href=""><i class="fa fa-wrench"></i>預(yù)約維修服務(wù)</a><span>|</span> <a href=""><i class="fa fa-undo"></i>7天無理由退貨</a><span>|</span> <a href=""><i class="fa fa-rotate-right"></i>15天免費換貨</a><span>|</span> <a href=""><i class="fa fa-thumbs-o-up"></i>滿150元包郵</a><span>|</span> <a href=""><i class="fa fa-send-o"></i>520余家售后網(wǎng)點</a> <hr> <dl> <dt>幫助中心</dt> <dd>賬戶管理</dd> <dd>購物指南</dd> <dd>訂單操作</dd> </dl> <dl> <dt>服務(wù)支持</dt> <dd>售后政策</dd> <dd>自助服務(wù)</dd> <dd>相關(guān)下載</dd> </dl> <dl> <dt>線下門店</dt> <dd>小米之家</dd> <dd>服務(wù)網(wǎng)點</dd> <dd>授權(quán)體驗店</dd> </dl> <dl> <dt>關(guān)于小米</dt> <dd>了解小米</dd> <dd>加入小米</dd> <dd>投資者關(guān)系</dd> </dl> <dl> <dt>關(guān)注我們</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>聯(lián)系我們</dd> </dl> <dl> <dt>特色服務(wù)</dt> <dd>F 碼通道</dd> <dd>禮物碼</dd> <dd>防偽查詢</dd> </dl> <div> <span>400-100-5678</span> <p>周一至周日 8:00-18:00</p> <p>(僅收市話費)</p> <div><i class="fa fa-commenting"></i>聯(lián)系客服</div> </div> </div> </div> <!-- 底部2 --> <div> <div><img src="static/images/footlogo.png"></div> <div> <ul> <li><a href="">小米商城</a><span>|</span></li> <li><a href="">MIUI</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="">政企服務(wù)</a><span>|</span></li> <li><a href="">小米天貓店</a><span>|</span></li> <li><a href="">隱私政策</a><span>|</span></li> <li><a href="">商城用戶協(xié)議</a><span>|</span></li> <li><a href="">賬號協(xié)議</a><span>|</span></li> <li><a href="">問題反饋</a><span>|</span></li> <li><a href="">廉正舉報</a><span>|</span></li> <li><a href="">誠信合規(guī)</a><span>|</span></li> <li><a href="">Select Region</a></li> </ul> <p>? mi.com 京ICP證110507號 <a href="">京ICP備10046444號</a> <a href="">京公網(wǎng)安備11010802020134號</a> <a href="">京網(wǎng)文[2017]1530-131號</a> </p> <p> <a href="">(京)網(wǎng)械平臺備字（2018）第00005號</a> <a href="">互聯(lián)網(wǎng)藥品信息服務(wù)資格證 (京) -非經(jīng)營性-2014-0090 </a> <a href=""> 營業(yè)執(zhí)照 </a> <a href=""> 醫(yī)療器械公告</a> </p> <p> <a href="">增值電信業(yè)務(wù)許可證</a> 網(wǎng)絡(luò)食品經(jīng)營備案（京）【2018】WLSPJYBAHF-12 <a href=""> 食品經(jīng)營許可證</a> </p> <p>違法和不良信息舉報電話：185-0130-1238 知識產(chǎn)權(quán)侵權(quán)投訴 本網(wǎng)站所列數(shù)據(jù)，除特殊說明，所有數(shù)據(jù)均出自我司實驗室測試</p> <img src="static/images/foot01.png"> <img src="static/images/foot02.png"> <img src="static/images/foot03.png"> <img src="static/images/foot04.png"> <img src="static/images/foot05.png"> <b>探索黑科技, 小米為發(fā)燒而生</b> </div> </div> </div> </body> </html> <script> </script>
CSS:
*{margin: 0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
.clear{clear: both;}
/* top */
.top{width: 100%;height: 40px;background: #ccc;}
/* 導(dǎo)航 */
.nav{width: 1226px;height: 100px;margin: 0 auto;background: #aaa;}
.hide-menu{width: 100%;height: 229px;display: none;background: lightblue;}
/* 主體內(nèi)容 */
.main{width: 1226px;height: 1272px;margin: 0 auto;background: #444}
/* 灰色部分 */
.content{width: 100%;max-height: 7000px;margin: 0 auto;margin-top:40px;background: #F5F5F5;}
.hot-phone{width: 1226px;height: 686px;margin: 0 auto;background: #ccc;}
.title-box{width: 1226;height: 58px;background: pink;}
.phone-box{width: 1226px;height: 628px;background: olive;}
.phone-ad{width: 234px;height: 628px;float: left;background: #888}
.phone-goods{width: 978px;height: 628px;float: right;background: silver;}
.phone-goods ul{width: 978px;height: 628px;}
.phone-goods ul li{width: 234px;height: 307px;float:left;background: #fff;}
/* 廣告條 */
.ad-img{width: 1226px;height: 120px;margin: 40px auto;}
/* 熱門商品 */
.hot-goods{width: 1226px;height: 686px;margin:0 auto;background: #888;}
.ad-goods{width: 234px;height: 628px;float: left;background: #ccc;}
.ad-goods .top{width: 234px; height: 307px;background: red;}
.ad-goods .bottom{width: 234px; height: 307px;margin-top: 14px;background: green;}
.goods-list{width: 978px;height: 628px;float: right;background: silver;}
.goods-list ul{width: 978px;height: 628px;}
.goods-list ul li{width: 234px;height: 307px;float:left;background: #fff;}
.goods-list .page{width: 234px;height: 146.5px;float:left;
margin-top: 14px;margin-left:14px;background: indianred;}
/* 底部 */
.footer{width: 100%;height: 250px;margin-top: 60px;background: #fff;}
.footer-content{width: 1226px;height: 250px;margin: 0 auto;}
.footer-content a{color: #616161;display: inline-block;font-size: 18px;margin-left: 10px;
height: 40px;text-align: center;line-height: 50px;margin: 10px 48px;}
.footer-content a i{font-size: 22px;margin-right: 6px;}
.footer-content a:hover{color: #ff6700;}
.footer-content span{color: #ccc;}
.footer-content dl{width: 120px;height: 120px;float:left;margin-right:40px;}
.footer-content dl dt{font-size: 16px;margin: 20px 0px;color: #000;}
.footer-content dl dd{color: #757575;font-size: 12px;padding-bottom: 15px;}
.footer-content dl dd:hover{cursor: pointer;color: #ff6700;}
.footer-content .tel{width:240px;height:110px;float:left;border-left: 1px solid #ccc;
margin-left: -12px;margin-top: 20px;}
.tel span{font-size: 22px;color: #ff6700;margin-left: 50px;}
.tel p{font-size: 12px;color: gray;margin-left: 0px;text-align:center;}
.tel .btn{width: 110px;height: 30px;background: #fff;border: 1px solid #ff6700;line-height: 30px;
text-align: center;color: #ff6700;margin-top: 20px;margin-left: 64px;}
.tel .btn:hover{background: #ff6700;color: #fff;cursor: pointer;}
.footer-2{width: 1226px;height: 230px;margin: 0 auto;}
.buttom-logo, .font{float: left;}
.buttom-logo{margin-top: 30px;}
.font ul li{float: left;margin-top: 30px;margin-left: 6px;margin-bottom: 5px;}
.font ul li a{font-size: 14px;color: #616161;}
.font ul li span{color: #ccc;margin-left: 5px;}
.font ul li a:hover{color: #ff6700;}
.font p{font-size: 13px;color: gray;margin-left: 8px;margin-top: 5px;}
.font p a{color: gray;}
.font p a:hover{color: #ff6700;}
.font img{width: 80px;height: 28px;margin-left: 8px;margin-top: 5px;}
.footer-2 b{display: block;color: #ccc;font-family: '楷體';font-size: 20px;text-align: center;
margin: 25px auto;}
批改老師：天蓬老師批改時間：2019-02-15 15:46:52
老師總結(jié)：這樣圖文并茂的作業(yè), 讓人非常舒服, 代碼寫得也比較規(guī)范,如果是你自己完成,而不是復(fù)制教學(xué)代碼, 那你就太厲害了