前端实战：仿写小米官网第一天
前端实战的第一天
小米官网
目前效果：
实现功能：
导航栏，首页切换，无淡入淡出效果的轮播图，搜索功能，产品展示栏下滑
代码（便于记录，将js、css和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="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
";
} else if(a.id=="aa2"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
} else if(a.id=="aa3"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
} else if(a.id=="aa4"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
} else if(a.id=="aa5"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
} else if(a.id=="aa6"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
} else if(a.id=="aa7"){
ps.innerHTML="
小米10至尊纪念版
5299元起
小米10 Pro
4999元起
小米 10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元
Redmi 9
799元起
";;
}
}
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>MIUIli>
<span class="open">|span>
<li>IoTli>
<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>下载appli>
<span class="open">|span>
<li>Select Locationli>
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>