H5mui微信浏览器登录页

公司的H5手机的项目有时候需要做一些登录页
每次都要去找项目干脆直接发出来
页面基于Mui框架
头部的样式可能按照需要去更改就行了
一个背景图就OK的登录页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style type="text/css">
			.mui-content {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: -10;
				background-image: url(img/background.jpg);
				background-repeat: no-repeat;
				background-position: 0px 0px;
				background-size: 100% 100%;
			}
			.mui-bar-nav {
				background-color: transparent;
				box-shadow: 0 1px 6px transparent;
				top: 35px;
			}
			.mui-title {
				color: #FFFFFF;
				font-size: 21px;
			}
			.mui-input-group {
				width: 90%;
				margin: 5%;
				border-radius: 15px;
				filter: alpha(Opacity=80);
				-moz-opacity: 0.6;
				opacity: 0.6;
			}
			.mui-input-group:before {
				height: 0px;
			}
			.mui-input-group:after {
				height: 0px;
			}
			.mui-input-group .mui-input-row:after {
				height: 0px;
			}
			.mui-btn-block{
				width: 90%;
				margin: 5%;
				padding: 10px 0;
				border-radius: 15px;
			}
			.mui-btn-blue, .mui-btn-primary, input[type=submit]{
				color: #037fcb;
				font-weight: bold;
				border: 1px solid #fff;
				background-color: #fff;
			}
			.mui-btn-blue.mui-active:enabled, .mui-btn-blue:enabled:active, .mui-btn-primary.mui-active:enabled, .mui-btn-primary:enabled:active, input[type=submit].mui-active:enabled, input[type=submit]:enabled:active{
				border: 1px solid #037fcb;
				background-color: #037fcb;
			}
			.logo{
				width: 50%;
				margin: 25% 25% 10% 25%;
			}
			.logo-img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="logo">
				<img class="logo-img" src="img/logo.png" >
			</div>
			<!-- 账号 -->
			<form class="mui-input-group" style="top: 50px;">
				<div class="mui-input-row">
					<input type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
			</form>
			<!-- 密码 -->
			<form class="mui-input-group" style="top: 50px;">
				<div class="mui-input-row">
					<input type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<button onclick="denglu()" style="top: 60px;" type="button" class="mui-btn mui-btn-blue mui-btn-block">登录</button>
		</div>
	</body>
	
	<script type="text/javascript">
		//登录跳转至主页面
		function denglu(){
			window.location = 'index.html'
		}
	</script>
</html>

效果如下：

原文链接：https://blog.csdn.net/weixin_44422264/article/details/112324346