apicloud apicloud

注册
查看: 12636|回复: 33

[新手教程] 跟着扶孙公子一起写故事汇APP(二)效果图和前端页面布局

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

[新手教程] 跟着扶孙公子一起写故事汇APP(二)效果图和前端页面布局

12636 33 | 发表于 2016-2-29 21:32:31 |阅读模式 | |
本帖最后由 孙健 于 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   今天发布登陆框架页面的实现。

下面是代码
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>登陆框架</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  8. </head>
  9. <style>
  10.         body{ background-color:#FFFFFF;}
  11.         .kjs{height:150px; margin:auto; border:none; width:180px; background-image:url(../image/xin.png); margin-top:140px;}
  12.         .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;}
  13.         .login:hover{ background-color:#00BBA7;}
  14.         .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;}
  15.         .reg:hover{ background-color: #E5E5E5;}
  16.         .kj{ width: 100%; height:300px; float: left;}
  17. </style>
  18. <body>
  19.         <div class="kj" id="header">
  20.             <div class="kjs"></div>
  21.     </div>
  22.    
  23.     <div class="kj">
  24.             <div class="login" onclick="login()">登 陆</div>
  25.         <div class="reg" onclick="reg()">注 册</div>
  26.     </div>
  27. </body>
  28. </html>
  29. <script type="text/javascript" src="../script/api.js"></script>
  30. <script type="text/javascript">
  31.     apiready = function () {
  32.             api.parseTapmode();
  33.         var header = $api.byId('header');
  34.         $api.fixStatusBar(header);
  35.         var headerPos = $api.offset(header);
  36.         var body_h = $api.offset($api.dom('body')).h;
  37.     }
  38.         
  39.         // 打开登陆窗口
  40.     function login() {
  41.               api.openWin({
  42.             name: 'login',
  43.             url: 'user_login_frm.html',
  44.             animation:{
  45.             type:"push",                //动画类型(详见动画类型常量)
  46.             duration:400                //动画过渡时间,默认300毫秒
  47.                         }
  48.                 });
  49.     }
  50.    
  51.     // 打开注册窗口
  52.     function reg() {
  53.               api.openWin({
  54.             name: 'login',
  55.             url: 'user_login_reg.html',
  56.             animation:{
  57.             type:"push",                //动画类型(详见动画类型常量)
  58.             duration:400                //动画过渡时间,默认300毫秒
  59.                         }
  60.                 });
  61.     }
  62.    
  63. </script>
复制代码


上面的代码实现的图片就如下面图片。


这就实现了登陆框架的页面

这个是真机测试,所以沉浸效果还看不出来,你生成安装包就可以看出了。


本次教程结束啦,下个教程,做登陆页面。


好了我们接着来做,下面是做登陆页面的源码。
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>会员登录</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9. </head>
  10. <style>
  11.         body{ background-color:#FFFFFF;}
  12.         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  13.         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  14.         
  15.         .form{ width:280px; margin:auto; margin-top:60px;}
  16.         
  17.         .aui-btn-rows {
  18.     position:0;
  19.     text-align: center;
  20.     padding:0px;
  21. }
  22. .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
  23. .aui-input-addons{ float:right; font-size: 14px; margin-top:20px; color: #999999;}
  24. .aui-btn-rowss{ width:100%;}
  25. </style>
  26. <body>
  27.         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  28.         <a class="aui-pull-left">
  29.             <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
  30.         </a>
  31.         <div class="aui-title">登录</div>
  32.         </header>
  33.    
  34.    
  35.     <div class="form">
  36.     <div class="aui-input-row">
  37.         <label class="aui-input-addon">邮箱</label>
  38.         <input type="number" class="aui-input" placeholder="注册邮箱"/>
  39.     </div>
  40.     <div class="aui-input-row">
  41.         <span class="aui-input-addon">密码</span>
  42.         <input type="password" class="aui-input" placeholder="账户密码"/>
  43.     </div>
  44.      <div class="aui-btn-rowsss">
  45.        <span class="aui-input-addons" onClick="zhmm()">忘记密码?</span>
  46.     </div>
  47.     <div class="aui-btn-rows">
  48.         <div class="aui-btn aui-btn-success">登 陆</div>
  49.     </div>
  50.     </div>
  51.    
  52. </body>
  53. </html>
  54. <script type="text/javascript" src="../script/api.js"></script>
  55. <script type="text/javascript">
  56.     apiready = function () {
  57.             api.parseTapmode();
  58.         var header = $api.byId('header');
  59.         $api.fixStatusBar(header);
  60.         var headerPos = $api.offset(header);
  61.         var body_h = $api.offset($api.dom('body')).h;
  62.     }
  63.    
  64.     function gb(){
  65.      api.closeWin();
  66.     }
  67.         
  68.         //找回密码
  69.         function zhmm(){
  70.          api.openWin({
  71.             name: 'zhmm',
  72.             url: 'user_login_zhmm.html',
  73.             animation:{
  74.             type:"push",                //动画类型(详见动画类型常量)
  75.             duration:400                //动画过渡时间,默认300毫秒
  76.                         }
  77.                 });
  78.     }
  79.    
  80. </script>
复制代码
以后的代码有部分是自己写的样式表,还有就是AUI默认的。大家应该能看懂吧。
真机试试看,是什么样子的页面。


OK,那么登陆页面就做好啦。


接下来继续做找回密码页面,有了上面的代码就简单多了,就是删除多余的,然后修改文字即可。

代码如下
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>忘记密码</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9. </head>
  10. <style>
  11.         body{ background-color:#FFFFFF;}
  12.         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  13.         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  14.         
  15.         .form{ width:280px; margin:auto; margin-top:60px;}
  16.         
  17.         .aui-btn-rows {
  18.     position:0;
  19.     text-align: center;
  20.     padding:0px;
  21. }
  22. .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}
  23. </style>
  24. <body>
  25.         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  26.         <a class="aui-pull-left">
  27.             <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
  28.         </a>
  29.         <div class="aui-title">忘记密码</div>
  30.         </header>
  31.    
  32.    
  33.     <div class="form">
  34.     <div class="aui-input-row">
  35.         <label class="aui-input-addon">邮箱</label>
  36.         <input type="number" class="aui-input" placeholder="请输入注册邮箱"/>
  37.     </div>
  38.     <div class="aui-btn-rows">
  39.         <div class="aui-btn aui-btn-success">重置密码</div>
  40.     </div>
  41.     </div>
  42.    
  43. </body>
  44. </html>
  45. <script type="text/javascript" src="../script/api.js"></script>
  46. <script type="text/javascript">
  47.     apiready = function () {
  48.             api.parseTapmode();
  49.         var header = $api.byId('header');
  50.         $api.fixStatusBar(header);
  51.         var headerPos = $api.offset(header);
  52.         var body_h = $api.offset($api.dom('body')).h;
  53.     }
  54.    
  55.     function gb(){
  56.      api.closeWin();
  57.     }
  58.         
  59.    
  60. </script>
复制代码
OK,然后我们也是真机看哈效果是什么样子的。


OK,那么上面的登陆部分就结束啦。

下面的教程就是实现注册页面。大概在晚上9点半左右上传,在此谢谢大家对我的支持。

下面上传注册页面,以下代码。
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>会员注册</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9. </head>
  10. <style>
  11.         body{ background-color:#FFFFFF;}
  12.         .aui-bar-primary { background-color: #FFFFFF; color:#000000; font-size:14px;}
  13.         .aui-bar .aui-iconfont { position: relative; z-index: 20; font-size: 20px; color: #000000; font-size: 400; line-height: 45px;}
  14.         
  15.         .form{ width:280px; margin:auto; margin-top:60px;}
  16.         
  17.         .aui-btn-rows {
  18.     position:0;
  19.     text-align: center;
  20.     padding:0px;
  21. }
  22. .aui-btn-success{ width:280px; height:45px; line-height:30px; border-radius: 25px; margin-top:40px;}

  23. </style>
  24. <body>
  25.         <header class="aui-bar aui-bar-nav aui-bar-primary" id="header">
  26.         <a class="aui-pull-left">
  27.             <span class="aui-iconfont aui-icon-left" onClick="gb()"></span>
  28.         </a>
  29.         <div class="aui-title">注册</div>
  30.         </header>
  31.    
  32.    
  33.     <div class="form">
  34.     <div class="aui-input-row">
  35.         <label class="aui-input-addon">邮箱</label>
  36.         <input type="number" class="aui-input" placeholder="注册邮箱"/>
  37.     </div>
  38.     <div class="aui-input-row">
  39.         <span class="aui-input-addon">密码</span>
  40.         <input type="password" class="aui-input" placeholder="请输入密码"/>
  41.     </div>
  42.         <div class="aui-input-row">
  43.         <span class="aui-input-addon">昵称</span>
  44.         <input type="password" class="aui-input" placeholder="请输入昵称"/>
  45.     </div>
  46.     <div class="aui-btn-rows">
  47.         <div class="aui-btn aui-btn-success">注 册</div>
  48.     </div>
  49.     </div>
  50.    
  51. </body>
  52. </html>
  53. <script type="text/javascript" src="../script/api.js"></script>
  54. <script type="text/javascript">
  55.     apiready = function () {
  56.             api.parseTapmode();
  57.         var header = $api.byId('header');
  58.         $api.fixStatusBar(header);
  59.         var headerPos = $api.offset(header);
  60.         var body_h = $api.offset($api.dom('body')).h;
  61.     }
  62.    
  63.     function gb(){
  64.      api.closeWin();
  65.     }
  66.         
  67.         
  68.    
  69. </script>
复制代码


真机运行下,图片如下。



好了,我们已经把会员初始页面这块都做完了,扶孙也在此感谢大家的支持,希望版主推荐为热门就好啦。嘻嘻



跟着扶孙公子一起写故事汇APP(三)
就是利用THINKPHP去实现登陆注册找回密码这些。大家请继续关注关注。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-1 12:28:55 |
搜农 发表于 2016-3-1 09:27
希望能够用数据云当数据库

你好 由于后期好二次开发以及维护,我们使用的是THINKPHP+MYSQL

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-1 18:08:56 |

嗯嗯  马上上传新教程,登陆页面  忘记密码页面 注册页面实现

新手上路

UID:196221

主题:
11
帖子:
84
云币:
192
发表于 2016-3-1 09:27:54 |
希望能够用数据云当数据库

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-1 12:29:25 |
longjack 发表于 2016-3-1 09:13
不错,希望继续更新,顶一下

非常感谢你的支持

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-1 16:38:34 |
longjack 发表于 2016-3-1 13:39
background-image:url(../image/xin.png)  这个缺失,建议完整的做个案例,然后把这个系列,做成论坛的精华 ...

这个是背景图片  CSS  我最后会吧源码发布的

入门司机

UID:59844

主题:
86
帖子:
355
云币:
1651

中秋节一周年

 楼主| 发表于 2016-3-1 23:02:42 |
明天感谢  睡觉了

主题:
5
帖子:
54
云币:
76
发表于 2016-4-14 16:56:14 |
感谢分享!

主题:
22
帖子:
85
云币:
178
发表于 2016-4-21 10:43:46 |
好人啊,全是干货

主题:
0
帖子:
1
云币:
3
发表于 2016-4-22 14:34:07 |
灰常好,支持一下
1234下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表