> 今天重點跟大家分享一個小米商城的登錄頁面的案例，目前的代碼暫時沒考慮瀏覽器的兼容性。主要用于練習使用。代碼可直接運行，有興趣的小伙伴可以下載學習下。
## 效果圖如下：
##代碼如下：
~~~
<!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>
~~~
#### 附件為用到的兩張圖片
