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

Posted 三云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Java简单博客系统主页静态页面设计相关的知识,希望对你有一定的参考价值。

一、基本思想

首先,随便瞎掰一些文本画静态界面,调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
}

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

以上是关于Java简单博客系统主页静态页面设计的主要内容,如果未能解决你的问题,请参考以下文章

php 使用静态主页时如何获取博客页面的URL

博客页面设计(试水版)

在静态 html 页面上显示最新的 wordpress 特色图片

Java语言------图书馆管理系统(入门简略版)

如何在Github Pages搭建自己写的页面

从零开始,搭建博客系统MVC5+EF6搭建框架上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件