摘要：HTML中有些注釋是沒有寫內(nèi)容的,那個是需要復制就行,所以省略了HTML<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁-小米商
HTML中有些注釋是沒有寫內(nèi)容的,那個是需要復制就行,所以省略了
HTML
<!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> <div> <ul> <li><a href="">小米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">loT</a></li> <li><a href="">云服務(wù)</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="">資質(zhì)證照</a></li> <li><a href="">協(xié)議規(guī)則</a></li> <li><a href="">下載app</a> <div> <div></div> <img src="static/images/code.png"> <p>小米商城APP</p> </div> </li> <li><a href="">Select Region</a></li> </ul> </div> <div> <ul> <li><a href="">登錄</a></li> <li><a href="">注冊</a></li> <li><a href="">消息通知</a></li> <li><i class="fa fa-shopping-cart"></i>購物車(<span>0</span>) <div> 購物車中還沒有商品，趕緊選購吧！ </div> </li> </ul> </div> </div> </div> <!-- 導航 --> <div> <div> <img src="static/images/footlogo.png"> <img src="static/images/logoAD.gif" style="margin-left: 11px;"> </div> <div> <ul> <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> <li><a href="">服務(wù)</a></li> <li><a href="">社區(qū)</a></li> </ul> </div> <div> <form> <input type="text" name=""> <div> <a href="">紅米Note 7</a> <a href="">小米8</a> </div> <button><i class="fa fa-search"></i></button> <div> <ul> <li>小米6x<span>約有6件</span></li> <li>小米mix 2s<span>約有5件</span></li> <li>黑鯊游戲手機<span>約有3件</span></li> <li>紅米note 5<span>約有6件</span></li> <li>紅米5a<span>約有3件</span></li> <li>小米電視4c<span>約有5件</span></li> <li>電視32英寸<span>約有8件</span></li> <li>筆記本pro<span>約有7件</span></li> <li>空氣凈化器<span>約有9件</span></li> </ul> </div> </form> </div> </div> <!-- 導航的隱藏菜單 --> <div> <div> <ul> <li> <span>熱賣</span> <a href=""> <div><img src="static/images/h/1.png"></div> <p>小米電視</p> </a> <p>1399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/2.png"></div> <p>小米筆記本</p> </a> <p>3399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/3.png"></div> <p>小米手機</p> </a> <p>2399元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>熱賣</span> <a href=""> <div><img src="static/images/h/4.png"></div> <p>紅米手機</p> </a> <p>799元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/5.png"></div> <p>小米路由器</p> </a> <p>199元</p> </li><div></div> <li style="margin-left:29.2px;"> <span>新品</span> <a href=""> <div><img src="static/images/h/6.png"></div> <p>小米電視</p> </a> <p>2399元</p> </li> </ul> </div> </div> <!-- 主體內(nèi)容 --> <div> <div> <div> <ul> <li style="margin-top:20px;"><a href="">手機 電話卡<span class="fa fa-chevron-right"></span></a> <div>111</div> </li> <li><a href="">電視 盒子<span class="fa fa-chevron-right"></span></a> <div>222</div> </li> <li><a href="">筆記本 平板<span class="fa fa-chevron-right"></span></a> <div>333</div> </li> <li><a href="">家電 插線板<span class="fa fa-chevron-right"></span></a> <div>444</div> </li> <li><a href="">出行 穿戴<span class="fa fa-chevron-right"></span></a> <div>555</div> </li> <li><a href="">智能 路由器<span class="fa fa-chevron-right"></span></a> <div>666</div> </li> <li><a href="">電源 配件<span class="fa fa-chevron-right"></span></a> <div>777</div> </li> <li><a href="">健康 兒童<span class="fa fa-chevron-right"></span></a> <div>888</div> </li> <li><a href="">耳機 音箱<span class="fa fa-chevron-right"></span></a> <div>999</div> </li> <li><a href="">生活 箱包<span class="fa fa-chevron-right"></span></a> <div>10</div> </li> </ul> </div> <div id="slide"> <div id="test1"> <div carousel-item> <div><img src="static/images/slide05.jpg" height="460" width="992"></div> <div><img src="static/images/slide04.jpg" height="460" width="992"></div> <div><img src="static/images/slide03.jpg" height="460" width="992"></div> <div><img src="static/images/slide02.jpg" height="460" width="992"></div> <div><img src="static/images/slide01.jpg" height="460" width="992"></div> </div> </div> </div> </div> <div> <div> <ul> <li> <a href=""><span class="fa fa-building-o"></span><p>選購手機</p></a> </li> <li> <a href=""><span class="fa fa-calendar"></span><p>企業(yè)團購</p></a> </li> <li> <a href=""><span class="fa fa-compass"></span><p>F碼通道</p></a> </li> <li> <a href=""><span class="fa fa-address-card-o"></span><p>米粉卡</p></a> </li> <li> <a href=""><span class="fa fa-circle-o"></span><p>以舊換新</p></a> </li> <li> <a href=""><span class="fa fa-language"></span><p>話費充值</p></a> </li> </ul> </div> <div> <div><a href=""><img src="static/images/hot01.jpg"></a></div> <div><a href=""><img src="static/images/hot02.jpg"></a></div> <div><a href=""><img src="static/images/hot03.jpg"></a></div> </div> </div> <!-- 廣告欄 --> <div> <a href=""> <img src="static/images/ad05.jpg" width="1226" height="120"> </a> </div> </div> <!-- 灰色部分 --> <div> <!-- 熱門手機 --> <div> <div> <h1>手機</h1> <a href=""><span>查看全部 <i class="fa fa-chevron-circle-right"></i></span></a> </div> <div> <div><a href=""><img src="static/images/ad06.jpg"></a></div> <div> <ul> <li><a href=""> <div style="background: #E53935;">減200元</div> <img src="static/images/p/1.jpg"> <p id="name">小米8青春版</p> <p>潮流鏡面漸變色，2400萬自拍旗艦</p> <span>1499元</span><del>1699元</del> </a></li> <li style="margin-left:14px;"><a href=""> <div style="background: #83C44E;">新品</div> <img src="static/images/p/2.png"> <p id="name">小米Play</p> <p>內(nèi)置每月10GB高速流量，高顏值流光</p> <span>1099元</span> <!-- <del>1699元</del> --> </a></li> <li style="margin-left:14px;"><a href=""> <div style="background: #E53935;">減400元</div> <img src="static/images/p/3.jpg"> <p id="name">小米8</p> &批改老師：滅絕師太批改時間：2019-02-25 16:23:25
老師總結(jié)：完成的代碼還是很細致的,布局比較考驗?zāi)托?繼續(xù)加油!