前端 ：用HTML和css制作一个小米官网的静态页面

1.HTML：

		
			
				
					
						MI
						小米账号
					
					
						用户协议
						隐私政策
						帮助中心
						 | 
						(中文简体)
					
				
				
					
						
							登录
							
						
						
							注册
						
					
					
					

					
					
						
						
							已阅读并同意小米账号用户协议和与隐私协议
						
					
					登录
					
						忘记密码
						手机号登录
					
					其他方式登录
					
						
					
				
				
					小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
				
			
		
	

css代码：

		
		
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			#content{
				width: 100%;
				height: 100%;
				min-width: 1040px;
				min-height: 500px;
				background-color: #f2f2f2;
				position: relative;
				background-image: url("https://blog.csdn.net/aisheisadas/article/details/img/1.jpg");
				background-size:auto 100%;
				background-repeat: no-repeat;
			}
			#box{
				width:80% ;
				height: 100%;
				/* background-color: red; */
				position: absolute;
				top: 0;
				right: 0;	
				}
			#top{
				width: 100%;
				height: 30px;
				/* padding-top: 20px; */
				
			}
			#top-left{
				width: 120px;
				height: 30px;
				position: relative;
				display: inline-block;
				padding: 5px;
			}
			#logo{
				background: rgba(255, 105, 0, 1);
				color: white;
				font-size: 25px;
				wargin-left:3px;
				bottom: 20px;
				text-align: center;
				line-height: 40px;
				font-weight: bold;
				border-radius: 3px;
			}
			#text-logo{
				font-size: 20px;
				left: 10px;
				font-weight: bold;
				coler:black;
			}
			#top-right{
				width: 400px;
				height: 30px;
				position: absolute;
				right: 0;
				display: inline-block;
				/* background-color: blue; */
				padding: 10px;
			}
			.text1{
				font-size:15px;
				color: gray;
				margin-left: 20px;
				text-decoration: none;
			}
			.text:hover{
				color: orangered;
			}
			#center{
				width: 41%;
				height: 500px;
				position: absolute;
				/* background-color: yellow; */
				left: 50%;
				margin-left: -22%;
				top: 130px;
				box-shadow: 0 0 10px gainsboro;
				}
				#menu{
					width: 34%;
					height: 40px;
					position: relative;
				}
				#menu-login{
					display: inline-block;
					width: 60px;
					height: 28px;
					font-size: 16px;
					text-align: center;
					position: relative;
				}
				.menu-text{
					margin-bottom: 10px;
					font-weight: 500;
					color: #333333;
				}
				.line{
				width: 30px;
				height: 3px;
				background-color: orangered;
				position: absolute;
				left: 50%;
				margin-left: -15px;
				bottom: 0;
				border-radius: 10px;				
			}
			#menu-regist{
				display: inline-block;
				width: 60px;
				height: 28px;
			}
			#regist{
				color: gainsboro;
			}
			.input{
				width: 80%;
				display: block;
				margin: 20px auto;
				height: 30px;
				padding-left: 5px;
				border:0 solid red;
				background: #f1f1f1;
				outline: none;
				border-radius: 3px;
			}
			#box-moren{
				font-size: 12px;
				width: 80%;
				margin: 0 auto;
			}
			#moren{
				position: relative;
				font-size: 12px;
				top: -2px;
			}
			#btn-login{
				width: 80%;
				display: block;
				margin: 0px auto;
				background: rgba(255, 92, 0, 0.6);
				color: white;
				text-align: center;
				margin-top: 20px;
				height: 50px;
				line-height: 50px;
				border-radius: 5px;
			}
			#other-login{
				width: 80%;
				display: block;
				margin: 0px auto;
				font-size: 14px;
				color: orangered;
				position: relative;
				margin-top: 10px;
			}
			#way-right{
				position: absolute;
				right: 0;
			}
			#otherway{
				width: 100%;
				font-size: 15px;
				text-align: center;
				color: gray;
				margin-top: 15px;
			}
			#4img{
				width: 80%;
				display: block;
				margin: 0 auto;
				position: relative;
				margin-top: 20px;
				margin-bottom: 30px;
			}
			.image{
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-left:20px ;
			}
			#bottom{
				width: 100%;
				height: 20px;
				position: absolute;
				font-size: 14px;
				/* background-color: green; */
				bottom: -130px;
				color: #bcbcbc;
				text-align: center;
				/* margin-left: -15%;
				bottom: 0px; */
			}
		

效果图：

小米官网图