前端实战：仿写小米官网第一天

最新推荐文章于 2023-12-22 16:08:21 发布
最新推荐文章于 2023-12-22 16:08:21 发布
阅读量946 收藏
点赞数 2
分类专栏： 前端 文章标签： html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BATP2516/article/details/108015146
版权

前端实战的第一天

小米官网
目前效果：
效果01
实现功能：
导航栏，首页切换，无淡入淡出效果的轮播图，搜索功能，产品展示栏下滑
代码（便于记录，将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">
						&#xe624;
					</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>
彼岸天平
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Netty 入门与实战：仿写微信 IM 即时通讯系统
06-26
Netty 入门与实战：仿写微信 IM 即时通讯系统
JavaScript实现淘宝商品展示(鼠标放在小图片上，上面会出现相应的大图片)
whr
10-10 4165
在淘宝的商品展示界面，下面有一排缩略图，当鼠标放在缩略图上的时候上面会出现相应的大图片
css3实现过渡transition动画效果
祈盼的博客
12-10 749
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 例如在小米商城中，鼠标移到盒子上，会有一个缓慢出现的阴影，使用的就是transition属性； 鼠标没放在图片上面的情况 鼠标放在上面的情况 鼠标放上图片 从上面变成下面这样 <style> .trans { margin: 200px auto; width: 70px; height: 50px; border: 1px solid red
HTML、CSS实现小米商城鼠标悬停
最新发布
m0_65321031的博客
12-22 345
鼠标悬停子菜单效果图。
鼠标放上去，出现大图预览效果
Mr_Yan的博客
03-23 8302
前天逛淘宝，看见淘宝的商品图片，鼠标放上去就会就会有相应大图的预览，于是就想着自己能不能做一个这样的效果出来，毕竟以前也看过这样类似的教程。 思路：             一：页面布局             二：鼠标放上去，出现透明浮动块             三：鼠标在目标元素上移动时，出现预览图。             四：鼠标离开目标元素时，浮动块和大图预览消失。
仿写小米官网（登录、注册页面、首页、详情页、购物车）
weixin_69174819的博客
06-10 3434
仿写小米官网（登录、注册页面、首页、详情页、购物车）需要源码私
使用HTML+CSS仿写小米官网首页
weixin_53153139的博客
07-09 848
通过学习，仅使用HTML+CSS仿写小米首页，以下是我的制作过程。 1.使用sublime编辑器 2.下载素材 1）.HTML部分 1.通过外链样式将创建好的 index.css文件导入到html文件中 2.导航栏部分 ① 小米logo ② 编写导航栏标题 3.中间部分图片分区 4.尾部 2）.CSS部分1.清除误差 设置默认值 2.设置字体 3.导航栏分区样式 4.导航栏标题下悬浮效
教你用html和css仿制小米官网页面
SunAndYou
12-13 9102
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
HTML+CSS仿小米官网首页 项目总结
weixin_48701221的博客
08-25 3525
使用css+html仿写小米官网首页静态页面
前端小白仿写小米官网首页（静态页面+jquery轮播图）
@微你
10-18 5746
前言： 最近为了稍微复习一下html和css,决定写一个页面练练手，最后决定仿写一下小米官网的首页，零零散散的时间加起来，大致用了一天半时间。有很多不足的地方，欢迎大家给出指导！ 结构： ...
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
小米网页仿写
03-14
小米所有特效，交互，以及响应式。 小米所有特效，交互，以及响应式。 小米所有特效，交互，以及响应式。
仿写小米官网首页.zip
11-16
仿写了一个小米的官网首页，主要是为了锻炼对页面的布局能力，从中收益了许多， 做了倒计时、下滑滚动显示回到顶部等功能
仿小米网站主页，低端
07-03
仿照小米主页做的一个简单网络页面，适用于课程设计，简洁
xiaomi:小米官网仿写
04-28
xiaomi 小米官网仿写
Netty 入门与实战：仿写微信 IM 即时通讯系统.zip
02-26
Netty 入门与实战：仿写微信 IM 即时通讯系统
Netty 入门与实战：仿写微信 IM 即时通讯系统.rar
07-16
Netty 入门与实战：仿写微信 IM 即时通讯系统，掘金小册子，netty教程。章节齐全无缺失，排版非常不错。 1.仿微信IM系统简介 1 2.Netty是什么? 2 3.服务端启动流程 8 4.客户端启动流程 11 5.实战:客户端与服务端双向...
Netty入门与实战：仿写微信IM即时通讯系统
01-12
Netty实现IM通讯
Netty 入门与实战：仿写微信 IM 即时通讯系统.pdf
06-12
Netty 入门与实战：仿写微信 IM 即时通讯系统
《netty入门实战:仿写微信im及时通讯系统》
10-20
《Netty入门实战: 仿写微信IM即时通讯系统》是一本关于网络编程框架Netty的实践指南。本书以仿写微信IM即时通讯系统为例，通过实际的项目案例引导读者学习和掌握Netty的使用。 Netty是一款基于Java的网络编程框架，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值