这章我们来构建一下页面,画了个草图,见笑了
大概是这个样子吧,后面bootstrap的时候还是可以修改的。
打开我们的layout.html如下修改:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="喵喵日记,多人分享日记社区,公开的,快乐的">
<meta name="author" content="Kvkens(kvkens@qq.com)">
<link rel="icon" href="./libs/favicon.ico">
<title>喵喵日记 - 多人分享日记社区 公开的 快乐的</title>
<!-- Bootstrap core CSS -->
<link href="./libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./libs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<style>
.body-main{
margin-top:65px;
/*background: #1B6D85;*/
}
.body-news{
border-bottom: 1px solid #ececec;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">喵喵日记社区</a>
</div>
<ul class="nav navbar-nav">
<li><a href="/">首页</a></li>
<li><a href="/">发现</a></li>
<li><a href="/">关于本站</a></li>
</ul>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<a href="./Login" class="btn btn-success">登录</a>
</div>
<div class="form-group">
<a href="./Join" class="btn btn-default">加入</a>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="container body-main">
<%-body -%>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">本站基于Node.js v0.12.9 技术构建 主要用于技术讲解</p>
<p class="text-muted">Copyright © 2016 喵喵日记 Power by Kvkens</p>
</div>
</footer>
<!-- Bootstrap core JavaScript================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./libs/jquery/dist/jquery.min.js"></script>
<script src="./libs/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
添加了一些样式和footer,留出我们的内容区域。布局文件会在我们后面做的过程中也会相应的修改的。
当前的文件夹是这样的:
打开index.html文件,开始我们的首页布局:
<div class="row">
<div class="col-md-8">
<div class="row">
<!--<div class="alert alert-danger" role="alert">喵喵日记当前开发中……</div>-->
<div class="well alert-info">
<h4>喵喵日记 - 多人分享日记社区 公开的 快乐的</h4>
<h5>此时已有0位朋友创建了0本日记, 写下了0件小事,0个秘密,0条心愿</h5>
</div>
</div>
<div class="row body-news">
<h4>最新日记</h4>
</div>
<% for(var i = 0;i < 10;i++){ %>
<div class="row">
<div class="alert alert-success" role="alert">
<div class="row">
<div class="col-sm-2">
<a href="#" class="thumbnail">
<img src="./avatar/null.gif" />
</a>
</div>
<div class="col-sm-10">
<div class="caption">
<a href="#" class="alert-link"><h5>美羊羊的日记</h5></a>
<h5>
<span class="label label-primary">发表:2016-01-29 13:13:33</span>
<span class="label label-primary">心情:美丽</span>
<span class="label label-primary">类别:成长</span>
<span class="label label-primary">坐标:北京</span>
</h5>
<div class="well alert-info">
<p class="text-success">
哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助
</p>
</div>
<div class="row">
<div class="col-sm-12 text-right">
<button type="button" class="btn btn-default btn-xs">0 回复</button>
<button type="button" class="btn btn-default btn-xs">0 阅读</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%}%>
<div class="row">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">开始你的喵喵之旅</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputAccount" class="col-sm-3 control-label">帐号:</label>
<div class="col-sm-9">
<input type="input" maxlength="20" class="form-control" name="account" id="inputAccount" placeholder="输入你的帐号">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">密码:</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" id="inputPassword" placeholder="输入你的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input name="memberme" type="checkbox" value="1"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">登录</button>
<a href="./Join" class="btn btn-info">加入</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
大致上按照草图来设计的,需求大致就是这样的首页,没有错误的话运行的时候首页是这样的:
拽到最下面看:
我们的首页原型目前设计成这样,右侧后面是需要补充的,临近年底了,下周要回东北老家,暂且这样先……
==================================================2016.2.1新加====================================================
把右侧的一些栏目模板写好了,看下最终代码吧!
<div class="row">
<div class="col-md-8">
<div class="row">
<!--<div class="alert alert-danger" role="alert">喵喵日记当前开发中……</div>-->
<div class="well alert-info">
<h4>喵喵日记 - 多人分享日记社区 公开的 快乐的</h4>
<h5>此时已有0位朋友创建了0本日记, 写下了0件小事,0个秘密,0条心愿</h5>
</div>
</div>
<div class="row body-news">
<h4>最新日记</h4>
</div>
<% for(var i = 0;i < 10;i++){ %>
<div class="row">
<div class="alert alert-success" role="alert">
<div class="row">
<div class="col-sm-2">
<a href="#" class="thumbnail">
<img src="./avatar/null.gif" />
</a>
</div>
<div class="col-sm-10">
<div class="caption">
<a href="#" class="alert-link"><h5>美羊羊的日记</h5></a>
<h5>
<span class="label label-primary">发表:2016-01-29 13:13:33</span>
<span class="label label-primary">心情:美丽</span>
<span class="label label-primary">类别:成长</span>
<span class="label label-primary">坐标:北京</span>
</h5>
<div class="well alert-info">
<p class="text-success">
哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助 哎~最近皮肤越来越不好了,求各位说说好友~推荐一款护肤品~求助
</p>
</div>
<div class="row">
<div class="col-sm-12 text-right">
<button type="button" class="btn btn-default btn-xs">0 回复</button>
<button type="button" class="btn btn-default btn-xs">0 阅读</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%}%>
<div class="row">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon glyphicon-heart" aria-hidden="true"></span> 开始你的喵喵之旅</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputAccount" class="col-sm-3 control-label">帐号:</label>
<div class="col-sm-9">
<input type="input" maxlength="20" class="form-control" name="account" id="inputAccount" placeholder="输入你的帐号">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">密码:</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="password" id="inputPassword" placeholder="输入你的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input name="memberme" type="checkbox" value="1"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success">登录</button>
<a href="./Join" class="btn btn-default">加入</a>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon glyphicon-volume-up" aria-hidden="true"></span> 公告</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-danger">开发进度记录</a>
<a href="#" class="list-group-item">举报非法的日记</a>
<a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
<a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
<a href="#" class="list-group-item">关于本站禁止发布广告的说明</a>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 最新动态</div>
<div class="panel-body">
<h6><a href="#">Kvkens</a> 在 <a href="#">你好</a> 的日记本里面写了<a href="#">你好2016</a> 日记</h6>
<h6><a href="#">Kvkens</a> 创建了一本名叫 <a href="#">你好</a> 的日记本</h6>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 活跃用户</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/avatar/null.gif" alt="Kvkens" title="Kvkens">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
效果图如下:
我会用后面几章来设计一下各种页面,快过年回家了,就先这样了。后面会先做注册和登录的。敬请期待,春节快乐!