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>

效果如下：

H5mui微信浏览器登录页相关推荐

Vue 移动端 hash模式下微信授权登录
需求分析: 1.移动端微信公众号项目,需要获取微信授权进行登录 2.默认打开首页,在路由进入之前进行判断,有如下三种情况 3.本项目有两种账号类型:商家.企业,需在登录页进行选择未授权过,跳到微信授 ...
uniapp微信浏览器H5授权微信登录
1.准备一个触发微信登录的按钮 <button class="wechat-logo" @click="getWeChatCode">微信授权登录& ...
h5-浏览器点击跳转微信小程序或微信内部广告页（微信浏览器）跳转小程序的实现方法。
一.微信内部浏览器使用<微信开放标签>唤起微信小程序官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/ ...
uni-app：处理微信浏览器中授权微信登录后，无法正常回退问题
一.情景在微信浏览器中,需要使用用户微信的code数据,因此采用了"location.href"获取微信授权信息的方式来实现授权登录,并且在重定向页面中获取code,完成操作后需 ...
苹果下微信浏览器返回上一页不刷新问题解决方案
苹果下微信浏览器返回上一页不刷新问题解决方案参考文章: (1)苹果下微信浏览器返回上一页不刷新问题解决方案 (2)https://www.cnblogs.com/liuxiaojie/p/78325 ...
微擎人人商城后台开启WAP访问后微信浏览器跳过授权手机号密码登录
公众号未认证人人商城后台开启了WAP访问可以在普通浏览器里面用手机号密码登录不过在微信里浏览器里访问url提示需要认证号认证登录首先判断微信环境下访问返回false 然后在 ewei_shopv ...
h5单页，微信浏览器唤醒APP
微信内的H5单页,都不能直接唤醒APP.所以需要打开外部浏览器.目前android能够通过后台的配合修改请求头,打开外部浏览器唤醒APP.ios目前没找到合适的方法,只能引导用户自己使用默认浏览器打开 ...
python 模拟微信浏览器请求_如何用Python模拟登录微信，抓取所有好友个人信息！微信后台很强...
微信模拟登录的过程比较复杂,当然不管怎么样方法都是万变不离其宗,我们还是使用fiddler抓包工具来模拟登录的过程. 好了,下面让我们一步一步的详细讲解一下如何实现的这个复杂的过程. 2.模拟获取二维 ...
360浏览器，qq浏览器等登录页输入账号密码，在页面内再次遇见有密码框的地方会自动填充的解决办法。
在360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充,在网上没有找到合适的解决办法,然后自己琢磨了一个,仅供参考. 登录页的账号密码输入框不需要做任何变化. 我们可 ...

H5mui微信浏览器登录页

H5mui微信浏览器登录页

H5mui微信浏览器登录页相关推荐

最新文章

热门文章