本文主要是開發的一個手機版(兼容android和ios)的商城登錄頁面。
1、接下來直接上HTML的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="max-age=300" />
<title>登錄</title>
<link rel="stylesheet" href="${ctx}static/css/login.css?v=1117" type="text/css">
</head>
<body>
<div class="header">
<a onclick="forward(this)" data-url="${ctx}index.jsp"><i class="icon-close"> </i></a>
<div class="header-title">歡迎登錄</div>
</div>
<div class="address_main">
<div class="line">
<select class="subphone">
<option>+086</option>
</select>
<input type="text" class="phone" onfocus="clearValue(this)" value="輸入手機號" maxlength="11">
</div>
<div class="line">
<label>驗證碼</label>
<input type="text" class="phoneCode" onfocus="clearValue(this)" id="phoneCode" value="輸入驗證碼">
<a href="javascript:void(0);" class="SmsCode" onclick="getSmsCode()">獲取驗證碼</a>
</div>
<div class="loginbtn" onclick="login()">登錄</div>
<div class="loginbypwd">
<a href="javascript:void(0);" class="usepwdlogin" onclick="loginpwd()">用密碼登錄</a>
<a href="javascript:void(0);" class="nogetpwd" onclick="noGetSmsCode()">收不到驗證碼?</a>
</div>
<div class="otherlogin">
<a href="javascript:void(0);" onclick="">其他登錄方式</a>
</div>
<div class="loginprotocol">
登錄即同意<a class="userprotocol">用戶協議</a>和<a class="privicyprotocol">隱私政策</a>首次登錄自動註冊
</div>
</div>
<input type="hidden" name="basePath" value="${ctx}" id="basePath"/>
<input type="hidden" name="logintype" value="0" id="logintype"/>
<script type="text/javascript" src="${ctx}static/js/login.js?v=112"></script>
</body>
</html>
${ctx}是jsp中的項目路徑標籤值，如果大家用純HTML或PHP換成你們項目路徑就可以了。
2、CSS頁面login.css代碼
body {
margin: 0px;
background: #FFFFFF;
-moz-appearance: none;
}
a {
text-decoration: none;
}
input {
-webkit-appearance: none;
border: none;
background: none;
}
.header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 90%;
}
.icon-close {
background-image: url(../../static/img/icon-home/closex.png);
margin: 9% 0 0 16px;
width: 6%;
height: 6%;
background-position: left center;
background-repeat: no-repeat;
background-size: 80% 80%;
display: block;
}
.header-title {
width: 50%;
text-align: left;
font-size: 22px;
height: 54px;
line-height: 44px;
margin: 11% 0 0 10%;
font-weight: bold;
letter-spacing: 3px;
}
.address_main {
height: auto;
width: 90%;
padding: 0px 4%;
background: #fff;
margin-top: 42%;
}
.address_main .line {
height: 44px;
width: 93%;
border-bottom: 1px solid #f0f0f0;
line-height: 44px;
}
.address_main .textline {
height: 144px;
width: 100%;
border-bottom: 1px solid #f0f0f0;
line-height: 144px;
}
.phoneCode {
height: 44px;
width: 35%;
padding: 0px;
margin-left: 6%;
outline: none;
color: #E6E5EB;
}
.address_main .line select {
font-weight: bold;
height: 40%;
width: 17%;
font-size: 15px;
color: #1A1A1F;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url(../../static/img/icon-home/downpic.png) no-repeat scroll right center transparent;
background-size: 25% 40%;
border: none;
margin-left: 7%;
}
.phone{
height: 100%;
width: 55%;
outline: none;
margin-left: 5%;
color: #E6E5EB;
}
.loginbtn {
height: 44px;
margin: 6% 0;
background-color: #ABAABA;
border-radius: 4px;
text-align: center;
font-size: 16px;
line-height: 44px;
width: 92%;
color: #E5E5F1;
}
.select-list {
margin-top: 30px;
}
.select-list ul li {
height: 110px;
width: 33.3333%;
}
.select-list ul li a {
border: 1px solid #dcdcdc;
display: block;
height: 80px;
text-align: center;
line-height: 80px;
width: 84%;
margin: 0px auto;
margin-top: 14px;
font-size: 16px;
font-weight: 400;
border-radius: 5px;
}
.line label{
margin: 1% 0 0 7%;
color: black;
font-weight:bold;
}
.SmsCode{
color:#E6E5EB;
}
.SmsCode,.line label,.phoneCode,.phone,.otherlogin,.nogetpwd,.usepwdlogin{
font-size: 14px;
}
.loginbypwd{
margin-top:8%;
}
.usepwdlogin{
font-weight:400;
margin:3% 0 0 4%;
color: black;
}
.nogetpwd{
font-weight: 400;
margin: 3% 0 0 36%;
color: #E6E5EB;
}
.otherlogin{
margin-top: 20%;
text-align: center;
}
.otherlogin a{
color:black;
}
.loginprotocol{
margin: 7% 0;
color: #A5A3AC;
font-size: 12px;
text-align: center;
}
.userprotocol,.privicyprotocol{
color:black;
font-weight:bold;
padding:0 1%;
}
3、JS代碼文件login.js
/**
* 獲取短信驗證碼
*/
function getSmsCode(){
}
/**
* 登錄方法
*/
function login(){
}
function clearValue(o){
o.value="";
}
大家有問題歡迎留言討論。