前端實戰：仿寫小米官網第一天
2020-08-14 23:07:49
前端實戰的第一天
小米官網
目前效果：
實現功能：
導航欄，首頁切換，無淡入淡出效果的輪播圖，搜尋功能，產品展示欄下滑
程式碼（便於記錄，將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{ /* css無法做到返回時也緩慢，使用js*/
transform: translate(100px);
transition-duration: .3s;
}
#h1:hover a{ /* css無法做到返回時也緩慢，使用js*/
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; /* 記錄滑鼠是否移動到div上，實現滑鼠在div上時，滑鼠離開li div不回滑*/
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(){
// alert(555);
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>