Java简单博客系统（⼆）主页静态页⾯设计⼀、基本思想
⾸先，随便瞎掰⼀些⽂本画静态界⾯，调CSS样式实现静态页⾯效果；
然后，造⼀些数据插⼊数据表user,blog,comment；
最后，建⽴后台⽅法，将数据库中的内容代替静态页⾯中的瞎掰的内容。
⼆、设计过程
（⼀）设计页⾯布局：
bootstrap栅格系统+流式布局管器实现基本页⾯架构，上⾯黄⾊和绿⾊板块都设计为流式布局
<div class="container-fluid">
<div class="row">
...
</div>
</div>
绿⾊板块左边“链接⾯板“和右边”导航标签+博客列表”以⽐例3:9划分
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
...国内旅游哪里好玩
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
张娜拉圈钱其余框框都是<div>元素；
（⼆）写静态页⾯：整个页⾯是参考博客园的，最终想要的效果是这样
页⾯头部：⽤了三个栅格系统+流式布局管器，分别表⽰装载“页⾯信息“，“logo”,"导航栏”。
<div class="container-fluid">
<div class="row">
<div class="col-md-12 info">
<p>代码改变世界<p>
<div class="link">[<a href="">登录</a> <a href="">注册</a>]</div>
</div>
</div>
</div>
<!-- 每⼀个div都是⼀个流式布局 -->
宁静怼某演员<div class="container-fluid">
<div class="row">
<div class="col-md-12 logo">
<img src="./images/logoImg.png"/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 lead">
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">博问</a></li>
<li><a href="#">闪存</a></li>如何下载百度文库的文档
<li><a href="#">⼩组</a></li>
<li><a href="#">收藏</a></li>
道晖芝整容
<li><a href="#">招聘</a></li>
<li><a href="#">班级</a></li>
<li><a href="#">看</a></li>
</ul>
</div>
</div>
</div>
页⾯主体：链接列表和页⾯主体3:9分，链接列表分为三个字列表<div class="data_list">，每个⼦列表有列表头和列表主体；
页⾯内容分为导航标签<div class="blogNav">，博客列表<div class="blogContent">，导航标签使⽤的是bootstrap提供的：
<!-- container-fluid表⽰占据屏幕100%-->
<div class="row">
<div class="col-md-3">
<div class="data_list">
<div class="list_header">48⼩时阅读排⾏榜</div>
<div class="list">
<ul>
<li><a href="#">程序员，你焦虑吗？</a></li>
<li><a href="#">国内开源社区巨作AspectCore-Framework⼊门</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
</div>
<div class="data_list">
<div class="list_header">10天推荐排⾏榜</div>
<div class="list">
<ul>
<li><a href="#">程序员，你焦虑吗？</a></li>
<li><a href="#">国内开源社区巨作AspectCore-Framework⼊门</a></li>
<li><a href="#">...</a></li>
..
</ul>
</div>
</div>
<div class="user_data_list">
<div class="user_list_header">博客排⾏</div>
<div class="user_list">
<ul>
<li><a href="#">Artech</a></li>
<li><a href="#">国内开源社区巨</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="blogNav">
<ul class="nav nav-tabs" id="navUrl">
<li role="presentation"><a href="Home?action=showByTime">⾸页</a></li>
<li role="presentation"><a href="Home?action=showByViews">48⼩时阅读排⾏榜</a></li>
<li role="presentation"><a href="Home?action=showByLikes">10天推荐排⾏榜</a></li>
</ul>
</div>
<div class="blogContent">
<div class="blogItem">
.
..
</div>
</div>
</div>
</div><!--row-->
</div><!--container-fluid-->
⽐较复杂的是博客列表项
<div class="digg">
<div class="diggit">
<span class="diggnum"> 0</span><!-- 推荐数 -->
</div>
<div class="clear"></div><!-- 中间隔开的空⽩ -->
<div class="digg_tip"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> ；推荐</div>
<div class="digg_text" id="message"></div>
</div>
<div class="item_body">
<div class="title"><a href="#">数据库学习笔记</a></div>
<div class="abstract"><p>创建XMLHttpRequest 对象向服务器发送请求 xmlhttp.open("请求的类型","请求的URL","是否为异步") GET与POST请求的适⽤条件⼤多数情况使⽤GET，因为GET请求简单快速但以下情况使⽤POST 1. ⽆法使⽤缓存⽂件（更新服务器上的⽂件或数据库） 2. 向 ... <p></div> <div class="footer"><a>Lazy.Cat</a> ；发布于 2018-11-06 20:14 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> ；评论(0) <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> ；阅读(9)</div> </div>
</div>
以上，就是静态页⾯的html代码实现，关键还剩下调节CSS样式：
(三）调CSS样式，复杂⼀点的是页头导航栏和博客列表项
1、页头导航栏
.lead{
background-color:#006699;
margin-top:10px;
}
.lead ul{
北京爱情故事演员list-style:none; /*去除列表项圆点*/
margin:0px;
padding:0px;
}
.lead ul li{
float:left; /*列表项⽔平排列*/
}
.lead ul li a{
color:white; /*链接⽂字显⽰为⽩⾊*/
font-size:16px; /*链接⽂字字体⼤⼩为16p*/
padding:6px 12px; /*通过内边距使得每个列表项有⼀定的距离*/
}
2.博客列表项
.
blogItem {
padding:20px;
border-bottom:dotted 1px #C8C8C8; /*每个列表项有⼀定间距，⽤点横线隔开*/ }
.blogItem .item_body .title a{
font-size:16px;
font-weight:bold;
text-decoration:underline;
color:#006699;
}
.blogItem .item_body .title a:hover{
text-decoration:underline;
color:#F80000; /*每个列表项标题*/
}
.blogItem .item_body .abstract{
padding:5px 0px;
}
.blogItem .item_body .abstract p{
font-size:13px; /*每个列表项内容*/
}
.blogItem .item_body .footer{
}
.blogItem .digg{
float: left;
width: 50px;
height: 100px;
margin:0px 10px 10px 10px; /*每个列表项左边推荐和推荐数*/
}
.blogItem .digg .diggit{
background-color:#FFFFCC;
padding:5px;
}
.blogItem .digg .digg_tip{
background-color:#CCFFFF;
font-size:small;
padding:2px
}
.blogItem .digg .digg_text{
display:none
}
到这⾥，静态页⾯基本画完了，接下来是将静态页⾯化为动态页⾯。
发布评论