html+css练习（仿小米官网）

 学习了三天的css和html模仿的写出来的，很多标签还是用的模模糊糊，希望大家学习的时候一定要多多敲代码。附源码！！！

 头部的小米商城那一部分，其实是通过position: fixed;固定的，翻页的过程中他的位置不变，大家看一看，小白，代码写的比较拉跨。

两张图片分两边排列，是通过相对位置relative和absolute进行固定的;

这里用了dl标签，具体和ul和ol的区别，大家自行查，有机会再发。

	
		
		
		
	
	
		

			
			

				
					
				
				

					小米官网
					小米商城
					小米影像
					MIUI
					IoT
					云服务
					天星数科
					有品
					小爱开放平台
					企业团购
					Location
				
				

					登录
					|
					注册
				
			
			
			

				

					
				
				

				

					
				
				

				

					
				
				

				

					
				
				

				

					
				
				

				

					
				
				

				

					
					
				
			
			
			

				
					

						

							选购指南
						
						

							手机
						
						

							手表
					
					

						

							服务中心
						
						

							申请售后
						
					
					

						

							线下门店
						
						

							小米之家
						
						

							服务网点
						
					
					

						

							关于小米
						
						
了解小米
					
					

						
联系我们
						
新浪微博
					
			
			

				
400-100-5678
				 
8:00-18:00 (仅收市话费)
				
					联系客服
			
			
			            

			                
			                

			                    小米商城|
			                    MIUI|
			                    米家|
			                    米聊|
			                    多看|
			                    游戏|
			                    路由器|
			                    米粉卡|
			                    政企服务|
			                    小米天猫店|
			                    隐私政策|
			                    问题反馈|
			                    廉政举报|
			                    Select Region

			                    
@mi.com 京ICP证110507号 京ICP备xxxxxxxx号 京公网安备xxxxxxxxxxxxxx号 京网文[xxxx]xxxx-xxx号 
 违法和不良信息举报电话: xxx-xxxx-xxx, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
			                
		
				
		
	

*{
	margin: 0;
	padding: 0;
}
html,body{
	width: 100%;
	height: 100%;
}
#content{
	width: 100%;
	height: auto;
	min-width: 1440px;
	position: relative;
}
#menu{
	width: 100%;
	min-width: 1440px;
	position: fixed;
	
}
#miloge{
	width: 60px;
	height: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
}
#text{
	
	text-align: center;
	margin-top: 30px;
	position: relative;
}
.guanwang{
	margin-left:25px ;
	color:white;
	text-decoration: none;
}
#top_right{
	position: absolute;
	right: 10px;
	top: 30px;
}
.denglu{
	margin-right: 25px;
	color: white;
	text-decoration: none;
}
.guanwang:hover{
	color: darkorange;
}
#id01{
	color: orange;
}
.denglu:hover{
	color: darkorange;
}
#lr{
	position: relative;
	
}

#r{
	position: absolute;
	
}
#text_bottom{
	text-align: center;
	display: block;
	position: relative;
	text-decoration: none;
	list-style: none;
	
}

 #list1{
	position: absolute;
	display:inline-block;
	left: 20%;
	
	text-decoration: none;
	} 
#list2{
	position: absolute;
	left: 30%;
}
#list3{
	position: absolute;
	left: 40%;
}
#list4{
	position: absolute;
	left: 50%;
}
#list5{
	position: absolute;
	left: 60%;}
#a{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
	
}
#a1:hover{
	color: orange;
}
#a1{
	text-decoration: none;
	color: grey;
	letter-spacing: 5px;
	line-height: 35px;
}
#a4:hover{
	color: orange;
}
#a4{
	text-decoration: none;
		color: grey;
		letter-spacing: 5px;
		line-height: 35px;
	
}
#a2{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a3{
	text-decoration: none;
		color: grey;
		letter-spacing: 5px;
		line-height: 35px;
}
#a5{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a6{
	text-decoration: none;
			color: grey;
			letter-spacing: 5px;
			line-height: 35px;
	
}
#a7{
	text-decoration: none;
			color: grey;
			letter-spacing: 5px;
			line-height: 35px;
	
}
#a8{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
#a9{
	text-decoration: none;
	list-style: none;
	line-height: 85px;
	font-size: 20px;
	color: black;
}
.bottom_text2{
	position: absolute;
	width: 100%;
	left: 70%;
}
.bottom_text2 h4{
	position: absolute;
	top: 15px;
	font-size: 40px;
	color: #ff6700;
}
.bottom_text2 p{
	position: absolute;
	font-size: 20px;
	top: 60px;
}
.bottom_text2 a{
	position: absolute;
	font-size: 35px;
	text-decoration: none;
	color: aliceblue;
	top: 90px;
	background: #ff6700;
	border: 2px solid #ff6700;
	border-radius: 10px;
	
}
.copyright{
	height: 55px;
	    padding: 350px 10px 0 0;
}
#loge{
	position: absolute;
    width: 45px;
	bottom: 5px;
	left: 36%;
}
.co-nav{
	position: absolute;
	margin-left: 38%;
	color: gray;
	}
.co-nav a{
	color: gray;
}