> 今天重点跟大家分享一个小米商城的登录页面的案例，目前的代码暂时没考虑浏览器的兼容性。主要用于练习使用。代码可直接运行，有兴趣的小伙伴可以下载学习下。
## 效果图如下：
##代码如下：
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模仿小米的登录页面</title>
<style>
/**样式重置***/
*{margin:0px;padding:0px;}
/**指定字体**/
body{
font-size:12px;
font-family:arial,"Hiragino Sans GB", "Microsoft YaHei","微軟正黑體","儷黑 Pro", sans-serif;
color: #757575;
background: #fff;
}
.header{
height: 96px;
color: #FFFFFF;
}
.header .header-logo{
width:300px;
height:90px;
background: url(img/mistore_logo.png) no-repeat;
margin-left: 80px;
}
.container{
position: relative;
width: 100%;
height: 500px;
text-align: center;
background: url(img/banner.jpg) no-repeat top center;
background-color: #14212B;
}
.container .login-form{
height: 420px;
width:410px;
background: #FFFFFF;
position: absolute;
top:34px;
right:40px;
text-align: center;
margin: 0 auto;
}
.login-form input{
color: #333;
height: 22px;
line-height: 22px;
padding: 13px 16px 13px 14px;
width: 320px;
}
.row{
text-align: center;
margin: 20px auto;
}
.login-type{
font-size: 24px;
margin-bottom: 20px;
margin-top: 10px;
}
.login-type .active{
color: #f56600;
}
.login-btn{
width:356px;
height:60px;
background: #F56600;
color: #FFFFFF;
outline: none;
border: none;
}
.forget{
margin-top: 10px;
}
.forget a{
text-decoration: none;
color: #757575;
}
/***底部样式定义****/
.footer{
position: relative;
margin-top:20px auto;
text-align: center;
}
.footer a{display: block;color: #757575;text-decoration: none;font-size: 14px;}
.footer ul{list-style-type: none;margin: 10px auto;}
.footer ul li{display:inline-block;margin-right: 10px;}
</style>
</head>
<body>
<!--顶部导航区域 -->
<div class="header">
<div class="header-logo"></div>
</div>
<!--内容区域-->
<div class="container">
<!--登录表单 -->
<form class="login-form" action="" method="post">
<div class="login-type">
<a class="active">账号登录</a>
|
<a>扫码登录</a>
</div>
<div class="row">
<input type="text" name="user_name" placeholder="邮箱/手机号码/小米账号" />
</div>
<div class="row">
<input type="password" name="user_password" placeholder="密码" />
</div>
<button class="login-btn" onclick="return login_vertify()">立即登录</button>
<div class="forget">
<a href="#">注册小米账号</a> |
<a href="#">忘记密码</a>
</div>
</form>
</div>
<!--底部导航区域 -->
<div class="footer">
<ul>
<li><a href="#">简体 |</a></li>
<li><a href="#">繁体 |</a></li>
<li><a href="#">English |</a></li>
<li><a href="#">常见问题 </a></li>
</ul>
<p>小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号</p>
</div>
<script>
function login_vertify(){
alert("正在拼命登录中...");
return false;
}
</script>
</body>
</html>
~~~
#### 附件为用到的两张图片
