跟着扶孙公子一起写故事汇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去实现登陆注册找回密码这些。大家请继续关注关注。

孙健

longjack 发表于 2016-3-1 17:32
明白，OK

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

孙健

搜农发表于 2016-3-1 09:27
希望能够用数据云当数据库

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

搜农

希望能够用数据云当数据库

孙健

longjack 发表于 2016-3-1 09:13
不错，希望继续更新，顶一下

非常感谢你的支持

孙健

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

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

孙健

明天感谢睡觉了

永无止境

感谢分享！

wu_tuo_bang

好人啊，全是干货

lin_lin_at

灰常好，支持一下