layui登陆界面布局

Original 2019-04-30 16:05:32 443
abstract:<!DOCTYPE html> <html> <head>   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> &
<!DOCTYPE html>
<html>
<head>
	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	  <link rel="stylesheet" href="/im/static/layui/css/layui.css">
	  <script type="text/javascript" src="/im/static/layui/layui.js "></script>
	<meta charset="utf-8">
	<title>登陆</title>
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
		.logo{text-align: center;margin: 20px;}
		.logo img{width:80px;}
		.btn{
			width:50px;
			height: 50px;
			background-color: rgb(14,148,248);
			text-align: center;
			margin:0px auto;
			border-radius: 50%;
			line-height: 50px;
			transform: rotate(180deg);
			color: #fff;
		}
		.user_reg_passwd {
			text-align: center;
			font-size: 12px;
		}
		.login_service {
			text-align: center;
			font-size: 10px;
			color: #666;
		}
		.mt20{margin-top: 20px;}
		/*登陆边框*/
		.layui-input{border-radius: 20px!important;}
	</style>
</head>
<body>
	<div class="logo">
		<img src="static/image/logo.png" alt="QQ登陆">
	</div>
	<div class="layui-container layui-form">
	<div class=" layui-form-item">
			<input type="text" name="qq" placeholder="请输入QQ号码!" class="layui-input">
	</div>
	<div class="layui-form-item">
			<input type="password" name="password" placeholder="请输入QQ密码!" class="layui-input">
	</div>
	
	<div class="btn" onclick="dologin();">
		<i class="layui-icon layui-icon-return"></i>
	</div>
 <div class="layui-row mt20">
 	<div class="layui-col-xs6 user_reg_passwd">忘记密码</div>
 	<div class="layui-col-xs6 user_reg_passwd">用户注册</div>
 	 <div class="layui-col-xs12 login_service mt20">登陆即代表阅读并同意服务条款</div>
 </div>

</div>
</body>
</html>
<script type="text/javascript">
	layui.use(['layer'],function(){
		$ = layui.jquery;
		var layer = layui.layer;



	});

	function dologin(){
			var qq = $("input[name='qq']").val();
			var password = $("input[name='password']").val();
		
			$.post('/im/server/login.php',{qq:qq,password:password},function(res){
				if(res.status==0){
		         layer.msg(res.msg,{icon:2});
				}else if (res.status==1){
				 layer.msg(res.msg,{icon:1},function(){
				 	window.location.href = 'index.php';
				 });
				
				}
				
		},'json')
	}
		



</script>


Correcting teacher:查无此人Correction time:2019-05-05 09:17:04
Teacher's summary:完成的不错。layui框架很不错,跟bootstrap都是非常好的前端框架。继续加油。

Release Notes

Popular Entries