abstract:<!doctype html> <html> <head> <meta charset="UTF-8"> <title>小米首頁</title> <script type="text/javascript" src="js/j
<!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做的 $('.uu01-back').hide() $('#uu01').mouseover(function(){ $('.uu01-back').show() }) $('#uu01').mouseleave(function(){ $('.uu01-back').hide() }) $('.uu02-back').hide() $('#uu02').mouseover(function(){ $('.uu02-back').show() }) $('#uu02').mouseleave(function(){ $('.uu02-back').hide() }) $('.uu03-back').hide() $('#uu03').mouseover(function(){ $('.uu03-back').show() }) $('#uu03').mouseleave(function(){ $('.uu03-back').hide() }) $('.uu04-back').hide() $('#uu04').mouseover(function(){ $('.uu04-back').show() }) $('#uu04').mouseleave(function(){ $('.uu04-back').hide() }) $('.uu05-back').hide() $('#uu05').mouseover(function(){ $('.uu05-back').show() }) $('#uu05').mouseleave(function(){ $('.uu05-back').hide() }) $('.uu06-back').hide() $('#uu06').mouseover(function(){ $('.uu06-back').show() }) $('#uu06').mouseleave(function(){ $('.uu06-back').hide() }) $('.uu07-back').hide() $('#uu07').mouseover(function(){ $('.uu07-back').show() }) $('#uu07').mouseleave(function(){ $('.uu07-back').hide() }) $('.uu08-back').hide() $('#uu08').mouseover(function(){ $('.uu08-back').show() }) $('#uu08').mouseleave(function(){ $('.uu08-back').hide() }) $('.uu00-back').hide() }) </script> <!-- 頭部 --> <div class="header"> <div class="topMenu"> <ul> <li>小米商城<span>|</span></li> <li>MIUI<span>|</span></li> <li>loT<span>|</span></li> <li>云服務<span>|</span></li> <li>金融<span>|</span></li> <li>有品<span>|</span></li> <li>小愛開放平臺<span>|</span></li> <li>政企服務<span>|</span></li> <li>資質(zhì)證照<span>|</span></li> <li>協(xié)議規(guī)則<span>|</span></li> <li id="ll">下載app<span>|</span> <div class="down"> <a href="#"><img src="static/images/D.png"></a> </div> </li> <li>Select Region</li> <li style="margin-left:265px;">登陸<span>|</span></li> <li>注冊<span>|</span></li> <li id="xxtz">消息通知</li> <li id="rr" style="float:right;margin-right:1px;"><i class="fa fa-shopping-cart"></i>購物車(0) <div class="gwc"> <span>購物車中還沒有商品,趕緊選購吧!</span> </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> <!-- 這個div框包含前8個ul,鼠標移入,下拉顯示白色背景,鼠標移出,折疊白色背景 --> <div class="logo-menu-back"> <li id="uu01"> 小米手機 <!-- 下拉框背景div --> <div class="uu01-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-b.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <!-- uu02-t:白色邊框,占位用 --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-b.png" alt=""><br><a href="#1">小米8 青春版</a><br><a href="#2">1399元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-b.png" alt=""><br><a href="#1">小米8</a><br><a href="#2">2699元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-b.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-b.png" alt=""><br><a href="#1">小米8 SE</a><br><a href="#2">1699元起</a> </div> </div> </div> </div> </li> <li id="uu02">紅米 <!-- 下拉框背景div --> <div class="uu02-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-c.png" alt=""><br><a href="#1">紅米Note 7</a><br><a href="#2">999元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-c.png" alt=""><br><a href="#1">紅米6 Pro</a><br><a href="#2">1299元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-c.png" alt=""><br><a href="#1">紅米6</a><br><a href="#2">799元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-c.png" alt=""><br><a href="#1">紅米6A</a><br><a href="#2">599元起</a> </div> </div> <span></span> <div class="uu01-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-c.png" alt=""><br><a href="#1">紅米Note 5</a><br><a href="#2">1099元起</a> </div> </div> </div> </div> </li> <li id="uu03">電視 <!-- 下拉框背景div --> <div class="uu03-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-d.png" alt=""><br><a href="#1">小米電視4S 75英寸</a><br><a href="#2">7999元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">熱賣</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-d.png" alt=""><br><a href="#1">小米電視4A 32英寸</a><br><a href="#2">899元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-d.png" alt=""><br><a href="#1">小米電視4A 43英寸青春版</a><br><a href="#2">1499元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">熱賣</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-d.png" alt=""><br><a href="#1">小米電視4A 50英寸</a><br><a href="#2">1999元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">熱賣</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-d.jpg" alt=""><br><a href="#1">小米電視4A 55英寸</a><br><a href="#2">2199元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-d.png" alt=""><br><a href="#1">查看全部</a><br><a href="#2">小米電視</a> </div> </div> </div> </div> </li> <li id="uu04">筆記本 <!-- 下拉框背景div --> <div class="uu04-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-e.jpg" alt=""><br><a href="#1">小米筆記本Air 12.5"</a><br><a href="#2">3599起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-e.jpg" alt=""><br><a href="#1">小米筆記本Air 13.3"</a><br><a href="#2">4999元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-e.png" alt=""><br><a href="#1">小米筆記本 15.6"</a><br><a href="#2">4199元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-e.png" alt=""><br><a href="#1">小米筆記本Pro 15.6"</a><br><a href="#2">5599元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-e.png" alt=""><br><a href="#1">小米游戲本</a><br><a href="#2">6699元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-e.png" alt=""><br><a href="#1">小米平板</a><br><a href="#2">1099起</a> </div> </div> </div> </div> </li> <li id="uu05">家電 <!-- 下拉框背景div --> <div class="uu05-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-f.jpg" alt=""><br><a href="#1">米家互聯(lián)網(wǎng)洗烘一體機10kg</a><br><a href="#2">2499元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-f.jpg" alt=""><br><a href="#1">米家互聯(lián)網(wǎng)空調(diào)(一級能效)</a><br><a href="#2">2699元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-f.jpg" alt=""><br><a href="#1">米家互聯(lián)網(wǎng)空調(diào)</a><br><a href="#2">2299元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-f.jpg" alt=""><br><a href="#1">小米凈水器</a><br><a href="#2">1999元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-f.jpg" alt=""><br><a href="#1">米家掃地機器人</a><br><a href="#2">1699元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-f.jpg" alt=""><br><a href="#1">新風機</a><br><a href="#2">2499元</a> </div> </div> </div> </div> </li> <li id="uu06">新品 <!-- 下拉框背景div --> <div class="uu06-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-g.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">新品</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-g.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-g.png" alt=""><br><a href="#1">小米藍牙耳機Air</a><br><a href="#2">399元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-g.png" alt=""><br><a href="#1">小米小愛音響HD</a><br><a href="#2">599元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-g.png" alt=""><br><a href="#1">米家臺燈Pro</a><br><a href="#2">349元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-g.png" alt=""><br><a href="#1">米家飛天豬足金吊墜</a><br><a href="#2">799元</a> </div> </div> </div> </div> </li> <li id="uu07">路由器 <!-- 下拉框背景div --> <div class="uu07-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">雙頻雙核</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-h.png" alt=""><br><a href="#1">小米路由器 4</a><br><a href="#2">199元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-h.jpg" alt=""><br><a href="#1">小米路由器 4C</a><br><a href="#2">99元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-h.png" alt=""><br><a href="#1">小米路由器 3A</a><br><a href="#2">139元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">雙千兆</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-h.png" alt=""><br><a href="#1">小米路由器 3G</a><br><a href="#2">249元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu01-t">大容量</div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-h.png" alt=""><br><a href="#1">小米路由器 HD/Pro</a><br><a href="#2">499元起</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-h.png" alt=""><br><a href="#1">查看全部小米路由器</a><br><a href="#2"></a> </div> </div> </div> </div> </li> <li id="uu08">智能硬件 <!-- 下拉框背景div --> <div class="uu08-back"> <!-- 下拉背景框居中div --> <div class="uu01-cen"> <!-- 頂部文字+下面圖片+價格總體div --> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu01-j.jpg" alt=""><br><a href="#1">小米米家智能攝像機云臺版</a><br><a href="#2">199元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu02-j.jpg" alt=""><br><a href="#1">小米自動洗衣機套裝</a><br><a href="#2">79元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu03-j.jpg" alt=""><br><a href="#1">小米藍牙耳機AirDots青春版</a><br><a href="#2">199元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu04-j.jpg" alt=""><br><a href="#1">小米小愛音響mini</a><br><a href="#2">169元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu05-j.jpg" alt=""><br><a href="#1">米家電動剃須刀</a><br><a href="#2">199元</a> </div> </div> <span></span> <div class="uu03-1"> <!-- 圖片上部文字div --> <div class="uu02-t"></div> <!-- 圖片+下部名字+價格div --> <div class="uu01-b"> <img src="static/images/uu06-j.jpg" alt=""><br><a href="#1">查看全部</a><br><a href="#2">智能硬件</a> </div> </div> </div> </div> </li> </div> <li id="uu09">服務</li> <li id="uu10">社區(qū)</li> </ul> </div> <!-- logo后搜索框 --> <div class="logo-so"> <div class="logo-so-l"> <div class="so01"> <a href="#1">小米8</a><a href="#2">小米MIX 2S</a> </div> </div> <div class="logo-so-r"> <button><i class="fa fa-search"></i></button> </div> </div> </div> <div class="clear"></div> <!-- 輪換圖 --> <div class="con01"> <!-- 左邊菜單 --> <div class="con01-l"> <ul> <li id="lh1"><a href="">手機 電話卡</a><i class="fa fa-angle-right"></i> <div class="lh1"> <div><img src="static/images/lh1-01.png" alt=""><a href="">小米9</a></div> <div><img src="static/images/lh1-02.png" alt=""><a href="">小米8 SE</a></div> <div><img src="static/images/lh1-03.png" alt=""><a href="">紅米Note 7</a></div> <div><img src="static/images/lh1-04.jpg" alt=""><a href="">對比手機</a></div> <div><img src="static/images/lh1-05.png" alt=""><a href="">小米9 SE</a></div> <div><img src="static/images/lh1-06.png" alt=""><a href="">小米MIX 2S</a></div> <div><img src="static/images/lh1-07.png" alt=""><a href="">紅米6 Pro</a></div> <div><img src="static/images/lh1-08.jpg" alt=""&aCorrecting teacher:滅絕師太Correction time:2019-02-26 09:05:37
Teacher's summary:開始布局的時候,要完整練習,對后面學習有好處哦!