WeUI实现登录页面

利用WeUIz做的登录页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"><title>注册/登录</title><link href="../css/weui.min.css" rel="stylesheet" type="text/css" />  <link href="../css/wx_style.css" rel="stylesheet" type="text/css" />  <link href="../css/app_style.css" rel="stylesheet" type="text/css" />  <script src="../js/zepto.min.js"></script><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>
<body><div class="logo"><img src="../images/logo.png"/></div><div><div class="weui-cells"><div class="weui-cell weui-cell_select weui-cell_select-before"><div class="weui-cell__hd"><select class="weui-select" name="select2"><option value="1">+86</option></select></div><div class="weui-cell__bd"><input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号"/></div></div><div class="weui-cell weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">验证码</label></div><div class="weui-cell__bd"><input class="weui-input" type="tel" placeholder="请输入验证码"/></div><div class="weui-cell__ft"><button class="weui-vcode-btn">获取验证码</button></div></div></div><label for="weuiAgree" class="weui-agree"><input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a></span></label><div class="weui-btn-area"><a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确&nbsp;&nbsp;&nbsp;定</a></div></div><div class="page__bd page__bd_spacing"><div class="weui-footer weui-footer_fixed-bottom"><p class="weui-footer__links"><a href="javascript:home();" class="weui-footer__link">猪八戒有限公司</a></p><p class="weui-footer__text">Copyright &copy; 2019-2030 www.abc.com</p></div></div><!-- 计算单位，伸缩式布局 --><!-- <script src="../js/auto-rem.js"></script> -->
</body>
</html>

样式：

app_style.css

.logo{width:100%; height:150px; text-align:center;}
.logo img{position: relative; top:55%; transform:translateY(-45%);}

wx_style.css就是weui-master\dist\example.css

完！！！

WeUI实现登录页面相关推荐

react登录页面_「开源」React-Admin终极后台管理项目解决方案
前端chenghao大神的作品,页面非常完善漂亮,不折不扣的企业级作品.学习react的小伙伴不可错过的好东西. 功能模块首页完整布局换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块 ...
一个最简单的登录页面测试case
具体需求: 有一个登陆页面, (假如上面有2个textbox, 一个提交按钮. 请针对这个页面设计30个以上的testcase.) 此题的考察目的:面试者是否熟悉各种测试方法,是否有丰富的Web测试经 ...
amazeui页面分析之登录页面
amazeui页面分析之登录页面一.总结 1.tpl命名空间:tpl命名空间的样式都是从app.css里面来的,app.css用用来移动网站开发的样式 2.表单样式:am-form到am-form- ...
问题解决10使用带有框架的页面跳转到登录页面时，登录页面只显示在子框架中，未能铺满整个浏览器--解决方案如下：...
问题描述: 使用带有框架的页面跳转到登录页面时,登录页面只显示在子框架中,未能铺满整个浏览器,例如: 当登录信息过期时,点击左边的菜单栏会让登录页面显示在右边的框架中,而不能铺满整个浏览器解决方案: ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
Ajax Session失效跳转登录页面的方法
在Struts应用中,我们发出的请求都会经过相应的拦截器进行相关处理,一般都会有一个用户登录拦截(Session失效拦截):一般请求的话,如果Session失效时,我们会跳到登录页面,可是如果我们采 ...
SharePoint2013自定义登录页面
SharePoint默认创建的WebApplication是基于windows的身份验证模式,以弹出窗口方式进行身份输入登录.这种方式可能对于国内的企业用户来说感觉不是很友好.一般而言,我们会把这种登 ...
javascript页面登录代码_自己动手做一个很酷的登录页面
登录页面静态效果登录页面动态效果登录页面是项目开发中最常用的.今天教大家手写一个登录页面,最终效果见上图.本页面的的开发运用了HTML,CSS和JavaScript的知识. 首先创建一个空的CSS ...
dede login.php,DedeCms会员登录成功，又跳转到登录页面
我使用的是dedecms5.7的sp1版本,整合了Discuz+UChome,三个都通信成功.然后后面我测试同步登录和退出的时候,发现dede的会员登录成功,但是又马上跳转到登录页面,就是说不能进入会 ...

WeUI实现登录页面

WeUI实现登录页面相关推荐

最新文章

热门文章