Java简单博客系统主页静态页面设计

Posted 2021-01-19 三云

一、基本思想

首先，随便瞎掰一些文本画静态界面，调CSS样式实现静态页面效果；

然后，造一些数据插入数据表user,blog,comment；

最后，建立后台方法，将数据库中的内容代替静态页面中的瞎掰的内容。

二、设计过程

采用BootStrap前端框架进行设计的举例:https://v3.bootcss.com/

（一）设计页面布局：

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>&nbsp;<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提供的：

<div class="container-fluid">
<!--  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="blogItem">
            <div class="digg">
                <div class="diggit"> 
                    <span class="diggnum">&nbsp;&nbsp;&nbsp;0</span>   <!-- 推荐数 -->
                </div>
                <div class="clear"></div>   <!-- 中间隔开的空白 -->
                <div class="digg_tip"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;推荐</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>&nbsp;&nbsp;发布于 2018-11-06 20:14&nbsp;&nbsp;<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>&nbsp;评论(0)&nbsp;&nbsp;<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;阅读(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
}

到这里，静态页面基本画完了，接下来是将静态页面化为动态页面。