HTML+CSS实现小米账号注册界面
话不多说，先上图：
HTML部分源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="login.css">
<title>小米账号-注册</title>
</head>
<body>
<!-- 首部部分 start-->
<div class="top">
<a href="index.html" class="title"></a>
<h4>注册小米账号</h4>
<div class="middle">
<form enctype="multipart/form-data">
<div style="width:500px;float:left;margin:0 20px;">
<br />
<span class="p">*</span>
<label for="username" class="l">用户名:</label>
<div style="position:relative;display:inline;">
<input id="username" type="text" style="height:30px;width:250px;padding-right:50px;">
</div>
<br /><br />
<span class="p">*</span>
<label for="phonenumber" class="l">手机号:</label>
<div class="d">
<input id="phonenumber" type="text" class="i">
</div>
<br /><br />
<span class="c">*</span>
<label for="login_password" class="l">登录密码:</label>
<div class="d">
<input id="login_password" type="text" class="i">
</div>
<br /><br />
<span class="c">*</span>
<label for="confirm_password" class="l">确认密码:</label>
<div class="d">
<input id="confirm_password" type="text" class="i">
</div>
<br /><br />
<span class="p">*</span>
<label for="ver_code" class="l">验证码:</label>
<div class="d">
<input id="ver_code" type="text" class="i">
</div>
<br /><br />
<input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" />
<span style="font-size:10px;">我已阅读并同意《用户注册协议》</span>
<br /><br />
<input type="submit" value="同意以上协议并注册"
style="margin-left:100px;height:30px;width:300px;background-color:#FF6700;display:inline-block; border:none;color:white;font-size: 14px;" />
</div>
</form>
</div>
</div>
<!-- 首部部分 end -->
<!-- 尾部部分 start -->
<div class="footer">
<ul>
<li><a href="#">简体</a><span>|</span></li>
<li><a href="#">繁体</a><span>|</span></li>
<li><a href="#">English</a><span>|</span></li>
<li><a href="#">常见问题</a><span>|</span></li>
<li><a href="#">隐私政策</a></li>
</ul>
</div>
<!-- 尾部部分 end -->
</body>
</html>
CSS部分源代码如下：
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
body{
background-color: #F9F9F9;
}
.top{
width: 786px;
height: 520px;
background-color: white;
margin: 0 auto;
padding: 0 34px 30px 34px;
}
.title{
display: block;
width: 55px;
height: 55px;
background-image: url(images/mi-logo.png);
background-color: #FF6700;
background-position: 50%;
margin: 0 auto;
margin-bottom: 40px;
}
.top h4{
display: block;
color: #333;
width: 786px;
height: 45px;
line-height: 45px;
font-size: 30px;
font-weight: normal;
text-align: center;
}
.middle{
margin: 0 0 0 130px;
color: #757575;
}
.middle input{
border:1px solid #757575;
}
.p{
color:red;
margin-left:20px;
display:inline-block;
}
.c{
color:red;
margin-left:4px;
display:inline-block;
}
.l{
font-size:18px;
}
.d{
display:inline;
}
.i{
height:30px;
width:300px;
}
.footer{
display: block;
height: 30px;
margin: 100px 0 0 600px;
}
.footer li{
float: left;
}
.footer li a ,
.footer li span {
color: #757575;
font-size: 14px;
}
.footer li a{
display: inline-block;
height: 19px;
padding: 0 10px;
text-align: center;
}
.footer li a:hover{
color: #FF6700;
}