|
跟着扶孙公子一起写故事汇APP(二)效果图和前端页面布局
[复制链接]
本帖最后由 孙健 于 2016-3-2 15:04 编辑
OK 上次给大家讲解了我们要实现什么功能,这次教程给大家讲解页面布局
首先给大家献上我们前端——登陆 注册 忘记密码的效果图
以上就是效果图,我们下一步就是去把这张效果图也实现,做成HTML页面
下载AUI框架 然后在桌面上创建一个文件夹为项目文件夹 最后把AUI框架解压到项目文件夹
接下来创建一个为gushihui的文件夹,这个就是我们的项目html页面文件夹。
在gushihui文件夹中创建以下文件:user_login_win.html(登陆框架) user_login_frm.html(登陆页面) user_login_reg.html (注册页面) user_login_zhmm.html(找回密码页面)
好的这次教程结束
下次就是页面实现
OK 今天发布登陆框架页面的实现。
下面是代码- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <title>登陆框架</title>
- <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
- </head>
- <style>
- body{ background-color:#FFFFFF;}
- .kjs{height:150px; margin:auto; border:none; width:180px; background-image:url(../image/xin.png); margin-top:140px;}
- .login{ font-size:14px; width:280px; height:45px; border:1px solid; margin:auto; border-radius: 25px; background-color:#00C8B8; line-height:45px; color:#FFFFFF; text-align:center; margin-top:40px;}
- .login:hover{ background-color:#00BBA7;}
- .reg{ font-size:16px; width:280px; height:45px; border:1px solid #999999; margin:auto; border-radius: 25px; margin-top:30px; line-height:45px; color: #000000; text-align:center;}
- .reg:hover{ background-color: #E5E5E5;}
- .kj{ width: 100%; height:300px; float: left;}
- </style>
- <body>
- <div class="kj" id="header">
- <div class="kjs"></div>
- </div>
-
- <div class="kj">
- <div class="login" onclick="login()">登 陆</div>
- <div class="reg" onclick="reg()">注 册</div>
- </div>
- </body>
- </html>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- apiready = function () {
- api.parseTapmode();
- var header = $api.byId('header');
- $api.fixStatusBar(header);
- var headerPos = $api.offset(header);
- var body_h = $api.offset($api.dom('body')).h;
- }
-
- // 打开登陆窗口
- function login() {
- api.openWin({
- name: 'login',
- url: 'user_login_frm.html',
- animation:{
- type:"push", //动画类型(详见动画类型常量)
- duration:400 //动画过渡时间,默认300毫秒
- }
- });
- }
-
- // 打开注册窗口
- function reg() {
- api.openWin({
- name: 'login',
- url: 'user_login_reg.html',
- animation:{
- type:"push", //动画类型(详见动画类型常量)
- duration:400 //动画过渡时间,默认300毫秒
- }
- });
- }
-
- </script>
复制代码
上面的代码实现的图片就如下面图片。
这就实现了登陆框架的页面
这个是真机测试,所以沉浸效果还看不出来,你生成安装包就可以看出了。
本次教程结束啦,下个教程,做登陆页面。
好了我们接着来做,下面是做登陆页面的源码。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <title>会员登录</title>
- <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
- <link rel="stylesheet" type="text/css" href="../css/aui.css" />
- </head>
- <style>
- body{ background-color:#FFFFFF;}
- .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
- .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
-
- .form{ width:280px; margin:auto; margin-top:60px;}
-
- .aui-btn-rows {
- position:0;
- text-align: center;
- padding:0px;
- }
- .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
- .aui-input-addons{ float:right; font-size: 14px; margin-top:20px; color: #999999;}
- .aui-btn-rowss{ width:100%;}
- </style>
- <body>
- <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
- <a class="aui-pull-left">
- <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
- </a>
- <div class="aui-title">登录</div>
- </header>
-
-
- <div class="form">
- <div class="aui-input-row">
- <label class="aui-input-addon">邮箱</label>
- <input type="number" class="aui-input" placeholder="注册邮箱"/>
- </div>
- <div class="aui-input-row">
- <span class="aui-input-addon">密码</span>
- <input type="password" class="aui-input" placeholder="账户密码"/>
- </div>
- <div class="aui-btn-rowsss">
- <span class="aui-input-addons" onClick="zhmm()">忘记密码?</span>
- </div>
- <div class="aui-btn-rows">
- <div class="aui-btn aui-btn-success">登 陆</div>
- </div>
- </div>
-
- </body>
- </html>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- apiready = function () {
- api.parseTapmode();
- var header = $api.byId('header');
- $api.fixStatusBar(header);
- var headerPos = $api.offset(header);
- var body_h = $api.offset($api.dom('body')).h;
- }
-
- function gb(){
- api.closeWin();
- }
-
- //找回密码
- function zhmm(){
- api.openWin({
- name: 'zhmm',
- url: 'user_login_zhmm.html',
- animation:{
- type:"push", //动画类型(详见动画类型常量)
- duration:400 //动画过渡时间,默认300毫秒
- }
- });
- }
-
- </script>
复制代码 以后的代码有部分是自己写的样式表,还有就是AUI默认的。大家应该能看懂吧。
真机试试看,是什么样子的页面。
OK,那么登陆页面就做好啦。
接下来继续做找回密码页面,有了上面的代码就简单多了,就是删除多余的,然后修改文字即可。
代码如下
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <title>忘记密码</title>
- <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
- <link rel="stylesheet" type="text/css" href="../css/aui.css" />
- </head>
- <style>
- body{ background-color:#FFFFFF;}
- .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
- .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
-
- .form{ width:280px; margin:auto; margin-top:60px;}
-
- .aui-btn-rows {
- position:0;
- text-align: center;
- padding:0px;
- }
- .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
- </style>
- <body>
- <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
- <a class="aui-pull-left">
- <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
- </a>
- <div class="aui-title">忘记密码</div>
- </header>
-
-
- <div class="form">
- <div class="aui-input-row">
- <label class="aui-input-addon">邮箱</label>
- <input type="number" class="aui-input" placeholder="请输入注册邮箱"/>
- </div>
- <div class="aui-btn-rows">
- <div class="aui-btn aui-btn-success">重置密码</div>
- </div>
- </div>
-
- </body>
- </html>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- apiready = function () {
- api.parseTapmode();
- var header = $api.byId('header');
- $api.fixStatusBar(header);
- var headerPos = $api.offset(header);
- var body_h = $api.offset($api.dom('body')).h;
- }
-
- function gb(){
- api.closeWin();
- }
-
-
- </script>
复制代码 OK,然后我们也是真机看哈效果是什么样子的。
OK,那么上面的登陆部分就结束啦。
下面的教程就是实现注册页面。大概在晚上9点半左右上传,在此谢谢大家对我的支持。
下面上传注册页面,以下代码。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
- <title>会员注册</title>
- <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
- <link rel="stylesheet" type="text/css" href="../css/aui.css" />
- </head>
- <style>
- body{ background-color:#FFFFFF;}
- .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
- .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
-
- .form{ width:280px; margin:auto; margin-top:60px;}
-
- .aui-btn-rows {
- position:0;
- text-align: center;
- padding:0px;
- }
- .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
- </style>
- <body>
- <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
- <a class="aui-pull-left">
- <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
- </a>
- <div class="aui-title">注册</div>
- </header>
-
-
- <div class="form">
- <div class="aui-input-row">
- <label class="aui-input-addon">邮箱</label>
- <input type="number" class="aui-input" placeholder="注册邮箱"/>
- </div>
- <div class="aui-input-row">
- <span class="aui-input-addon">密码</span>
- <input type="password" class="aui-input" placeholder="请输入密码"/>
- </div>
- <div class="aui-input-row">
- <span class="aui-input-addon">昵称</span>
- <input type="password" class="aui-input" placeholder="请输入昵称"/>
- </div>
- <div class="aui-btn-rows">
- <div class="aui-btn aui-btn-success">注 册</div>
- </div>
- </div>
-
- </body>
- </html>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- apiready = function () {
- api.parseTapmode();
- var header = $api.byId('header');
- $api.fixStatusBar(header);
- var headerPos = $api.offset(header);
- var body_h = $api.offset($api.dom('body')).h;
- }
-
- function gb(){
- api.closeWin();
- }
-
-
-
- </script>
复制代码
真机运行下,图片如下。
好了,我们已经把会员初始页面这块都做完了,扶孙也在此感谢大家的支持,希望版主推荐为热门就好啦。嘻嘻
跟着扶孙公子一起写故事汇APP(三)
就是利用THINKPHP去实现登陆注册找回密码这些。大家请继续关注关注。 |
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|