手机版(兼容android和ios)用户登录界面H5

最新推荐文章于 2021-08-13 17:37:38 发布

developerFBI

最新推荐文章于 2021-08-13 17:37:38 发布

阅读量1.5k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/developerFBI/article/details/105774292

版权

前端开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文主要是开发的一个手机版(兼容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">&nbsp;&nbsp;</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="";
}

大家有问题欢迎留言讨论。

developerFBI

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
手机版(兼容android和ios)用户登录界面H5

本文主要是开发的一个兼容android和ios的登录页面。1、接下来直接上HTML的代码<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0 us...
复制链接

扫一扫