生活随笔
收集整理的這篇文章主要介紹了
前端实战：仿写小米官网第一天
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前端實戰的第一天
小米官網
目前效果：
實現功能：
導航欄，首頁切換，無淡入淡出效果的輪播圖，搜索功能，產品展示欄下滑
代碼（便于記錄，將js、css和html糅合在了一起）：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米商城
</title><style type="text/css">body{padding: 0;margin: 0;background-color: white;}#img01{width: 100%;}#nav011{list-style-type: none;margin: -4px;font-size: 12px;width: 700px;height: 40px;overflow: hidden;}#userinfo011{list-style-type: none;margin: -4px;font-size: 12px;width: 140px;height: 40px;overflow: hidden;position: relative;left: 40px;z-index: 30;background-color: #333333;}#div01{background-color: #333333;height: 40px;}#nav011>li, #userinfo011>li{float: left;margin-left: 5px;color: #b0b0b0;margin-top: 16px;}#nav01{margin-left: 100px;float: left;}.open{color: white;margin-left: 5px;margin-top: 14px;float: left;color: #424242;}#userinfo{margin-left: 1050px;width: :;px;position: relative;}.iconfont{position: relative;top: 10px;left: 220px;}#cartword{font-size: 12px;position: relative;top: 9px;left: 220px;}#carlist{background-color: #3498DB;width: 150px;height: 100px;}#cart{background-color: #424242;width: 350px;height: 40px;margin-left: 190px;position: relative;top: -35px;color: #b0b0b0;right: 150px;z-index: 10;transition: background-color .3s,height .3s;overflow: hidden;}#cart:hover{background-color: white;color: red;height: 120px;}#userinfo011>li{margin-top: 12px;}#carli{position: relative;top: 50px;left: 90px;font-size: 12px;}#h{margin-top:24px;margin-left: 145px;width: 1500px;height: 80px;}#h1{background-color: #FF6700;width: 55px;height: 55px;margin: 0;overflow:hidden ;float: left;}#a01{display: inline-block;width: 55px;height: 55px;background-color: #FF6700;}#a02{display: inline-block;background-color: #FF6700;width: 55px;height: 55px;text-decoration: none;color: white;font-size: 20px;position: relative;top: -34.3px;margin-left: -110px;}#a011,#a012{width: 55px;height: 55px;}#s01{position: relative;top: 15px;left: 7px;}#h1:hover img{ transform: translate(100px);transition-duration: .3s;}#h1:hover a{ transform: translate(53px);transition-duration: .3s;}#h2{margin-left: 15px;float: left;}.ul2>li{float: left;list-style-type: none;height: 50px;}.ul2 a{display: inline-block;text-decoration: none;color: black;height: 50px;margin-left: 18px;}.ul2>li>a:hover{color: #FF6700;}.ul2 a{list-style-type: none;text-decoration: none;color: black;transition: color .1s;height: 70px;}.ul2{margin-left: -40px;float: left;}#h3{width: 70%;margin: 0;overflow: hidden;}#inp{margin-left: 120px;width:245px;height: 50px;padding: 0 10px;outline: none;}#sub{width: 52px;height: 53px;padding: 1px 6px;background-color: white;outline: none;border: solid 1px grey;margin-left: -6px;position: relative;top: 1.3px;transition: color .3s,background-color .3s;z-index: 0;}#sub:hover{color: white;background-color: #FF6700;}#alll{width: 1600px;}#ps{height: 0;background-color: white;overflow: hidden;position: relative;right: 150px;width: 1600px;z-index: 20;}#ul233 li{list-style-type: none;float: left;text-align: center;border-right: solid 1px #E0E0E0;width: 210px;margin-left: 25px;}#ul233 span{font-size: 12px;}.a666{color: #FF6700;}.lb{width: 1226px;height: 460px;margin-left: 150px;float: left;position: relative;z-index: 15;}#lbpicture,#lbnb{height: 460px;position: relative;left: 75px;}</style><link rel="stylesheet" type="text/css" href="css/iconfont.css"/><script type="text/javascript">var flag=false; var flag2=false;var cnt=0;function dol(a){setTimeout(doll,10,a);}function doll(a){var ps=document.getElementById("ps");ps.style.borderTop="solid 0.5px lightgray";ps.style.height="0px";var id=setInterval(function a(){ps.style.height=Number(ps.style.height.substr(0,ps.style.height.length-2))+4+"px";if (ps.style.height.substr(0,ps.style.height.length-2)>=200){flag2=true;clearInterval(id);}},5);if (a.id=="aa1"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span></ul>";} else if(a.id=="aa2"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;} else if(a.id=="aa3"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;} else if(a.id=="aa4"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;} else if(a.id=="aa5"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;} else if(a.id=="aa6"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;} else if(a.id=="aa7"){ps.innerHTML="<ul id='ul233'><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10至尊版'><br /><span>小米10至尊紀念版</span><br /><span class='a666'>5299元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 Pro'><br /><span>小米10 Pro</span><br /><span class='a666'>4999元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米 10'><br /><span>小米 10</span><br /><span class='a666'>3699元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米10 青春版 5G'><br /><span>小米10 青春版 5G</span><br /><span class='a666'>1899元起</span></li><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='小米MIX Alpha'><br /><span>小米MIX Alpha</span><br /><span class='a666'>19999元</span><li><img src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb=1&w=200&h=138&f=webp&q=90' alt='Redmi 9'><br /><span>Redmi 9</span><br /><span class='a666'>799元起</span></li></ul>";;}}function dolout(){setTimeout(dollout,10);}function dollout(){if(flag==true){return;}if (cnt>=40){alert("頻繁操作提醒：差不多就行了，第一次做頁面真的不會");cnt=0;}var ps=document.getElementById("ps");ps.style.borderTop="";var id=setInterval(function a(){ps.style.height=Number(ps.style.height.substr(0,ps.style.height.length-2))-4+"px";if (ps.style.height=="0px"){flag2=false;cnt++;clearInterval(id);}},1);}function maintain(){var ps=document.getElementById("ps");ps.style.height="200px";}function changeflag(){flag=!flag;}function lbpicture(){var srcs=["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7c2e5c62dfcaae720a3cd909c0eae52.jpg?w=2452&h=920","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/845deea18c7ccddeb01676fe16e99712.jpg?thumb=1&w=1533&h=575&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6eecc57f60b6b55b779f7908cfce230c.jpg?thumb=1&w=1533&h=575&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe253b0048a5517abca36a605acacba3.jpg?thumb=1&w=1533&h=575&f=webp&q=90","https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9a8a020cf3058f05e8db9483d7a0e45.jpg?thumb=1&w=1533&h=575&f=webp&q=90"];var ele=document.getElementById("lbnb");var now=0;var id=setInterval(function(){ele.src=srcs[now%5];now++;},2000);}</script></head><body onload="lbpicture();"><div id="alll"><div id="ad1"><img src="images/QQ截圖20200813103054.png" id="img01"></div><div id="div01"><div id="nav01"><ul id="nav011"><li id="li1">小米商城
</li><span style="float: left;" class="open">|
</span><li>MIUI
</li><span class="open">|
</span><li>IoT
</li><span class="open">|
</span><li>云服務
</li><span class="open">|
</span><li>金融
</li><span class="open">|
</span><li>有品
</li><span class="open">|
</span><li>小愛開放平臺
</li><span class="open">|
</span><li>企業團購
</li><span class="open">|
</span><li>資質證照
</li><span class="open">|
</span><li>協議規則
</li><span class="open">|
</span><li>下載app
</li><span class="open">|
</span><li>Select Location
</li></ul></div><div id="userinfo"><ul id="userinfo011"><li>登錄
</li><span class="open">|
</span><li>注冊
</li><span class="open">|
</span><li>消息通知
</li></ul><div id="cart"><i class="iconfont"></i><span id="cartword">購物車（0）
</span><div id="cartlist"><span id="carli" style="color: black;">購物車中還沒有商品，趕緊選購吧！
</span></div></div></div></div><div id="h"><div id="h1"><a href="index.html" id="a01"><img src="images/mi-logo.png" id="a011"></a><a href="index.html" id="a02"><span id="s01">主頁
</span></a></div><div id="h2"><a href="https://www.mi.com/a/h/16602.html" target="_blank"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b06819007feedbea62aedaa3089633d2.gif" ></a></div><div id="h3"><ul class="ul2"><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa1">小米手機
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa2">Redmi 紅米
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa3">電視
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa4">筆記本
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa5">家電
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa6">路由器
</a></li><li><a href="javascript:void(0)" onmouseover="dol(this);" onmouseout="dolout();" id="aa7">智能硬件
</a></li><li><a href="https://www.mi.com/service/" target="_blank">服務
</a></li><li><a href="http://www.xiaomi.cn/" target="_blank">社區
</a></li></ul><form action="https://www.mi.com/search" method="get"><input type="text" name="keyword" id="inp" value="" placeholder="小米10Pro"/><input type="submit" value="搜索" id="sub"/></form><div style="clear: both;"></div> </div><div id="ps" onmouseover="maintain(); changeflag();" onmouseout="changeflag(); dolout();"></div></div></div><div id="lbpicture"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7c2e5c62dfcaae720a3cd909c0eae52.jpg?w=2452&h=920" id="lbnb"></div></div></body>
</html>
總結
以上是生活随笔為你收集整理的前端实战：仿写小米官网第一天的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
