项目：个人博客系统 Part1 前端页面编写

博客页面主要包括：

　　主页、文章列表、文章详情、分类列表、分类详情、关于页面、登录页面七个部分。

一、导航栏

引入jQuery和Bootstrap；参考：Bootstrap导航条

<!-- 导航栏 -->
<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">
                <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="/">buwenyuwu</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/list">博客列表</a></li>
                <li><a href="/category">博客分类</a></li>
                <li><a href="/about">关于博客</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">账号管理
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">账号</li>
                        <li><a href="/login">后台管理</a></li>
                        <li><a href="/login">账号管理</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">管理</li>
                        <li><a href="/login">创建博文</a></li>
                        <li><a href="/login">博客管理</a></li>
                        <li><a href="/login">博客信息</a></li>

                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="输入...">
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
    </div>
</nav>

View Code

效果如图：

包括账号管理的下拉菜单：

导航栏单独编写，作为所有页面的公共部分。

二、主页

1.轮播界面；

主页为了美观可以设置一个简单轮播图界面，利用Bootstrap组件：

<!-- 轮播图 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- 轮播图1 -->
    <div class="carousel-inner">
        <div class="item active">
            <img style="width:100%;" class="first-slide" src="/static/img/1.jpg" alt="First slide">
            <div class="carousel-caption">
                <h3>不闻余物</h3>
                <p>晚风吻尽荷花叶，任我醉倒在池边。</p>
                <p><a class="btn btn-primary" href="#"> 访问 >> </a></p>
            </div>
        </div>

        <!-- 轮播图2 -->
        <div class="item">
            <img style="width:100%;" class="second-slide" src="/static/img/2.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h3>不闻余物</h3>
                <p>微言躬行，格物致知。谦逊待友，与人为善。</p>
                <p><a class="btn btn-primary" href="#"> 访问 >> </a></p>
            </div>
        </div>

        <!-- 轮播图3 -->
        <div class="item">
            <img style="width:100%;" class="second-slide" src="/static/img/6.jpg" alt="Second slide">
            <div class="carousel-caption">
                <h3>不闻余物</h3>
                <p>任凭你喊破喉咙，那岁月总是无声</p>
                <p><a class="btn btn-primary" href="#"> 访问 >> </a></p>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

View Code

效果如图：

需要注意的是要设置好图片的大小，不然比例奇怪会影响显示。

可以设置轮播组件的属性比如间隔多久切换图片等等；可以参考轮播组件：Carousel

在img之后添加div.container可以在轮播图上添加文字和标题；

2.项目列表

博客的主页适合展示自己的项目列表；借助Bootstrap的栅格系统来进行布局。参考：栅格系统

<div class="container">

    <div class="row project-list">

        <div class="col-sm-4 project">
            <img class="img-circle" src="/static/img/3.jpg" width="140" height="140">
            <h2>不闻余物的Blog项目</h2>
            <p>基于Spring+SpringMVC+yBatis框架做成的blog，实现了管理员和用户角色，实现博客基本功能。</p>
            <p><a class="btn btn-default" href="/item">访问 &raquo;</a></p>
        </div>

        <div class="col-sm-4 project">
            <img class="img-circle" src="/static/img/4.jpg" width="140" height="140">
            <h2>不闻余物的爬虫项目</h2>
            <p>基于Java的网易云音乐爬虫。对歌曲根据评论数目排序显示。对歌单根据播放数和收藏数排序显示。</p>
            <p><a class="btn btn-default" href="#">访问 &raquo;</a></p>
        </div>

        <div class="col-sm-4 project">
            <img class="img-circle" src="/static/img/5.jpg" width="140" height="140">
            <h2>不闻余物的Project3</h2>
            <p>基于SSM框架的模仿知乎风格的问答网站。</p>
            <p><a class="btn btn-default" href="#">访问 &raquo;</a></p>
        </div>

    </div>
</div>

View Code

将12格等分成3份来显示项目列表。

最终主页静态页面完成：

三、文章列表

文章列表可以分为两个部分来编写：左边的列表页面以及右边的信息栏页面；

用栅格系统划分这两个部分；

1.左侧列表页

<div class="col-sm-8">

<div class="blog-post">
  <h3 class="blog-post-title"><a href="./item.html">项目1：基于SSM框架的博客开发</a></h3>
  <p class="blog-post-meta">2017年7月2日 分组：<a href="#">Web开发</a></p>
  <p class="blog-post-content">Amet risus. Dolor ultrices justo, praesent eos nisl lacus, consectetuer vitae lorem cras magna dolor, mauris libero turpis aliquam sed, at sapien tellus penatibus accumsan nec. Parturient amet felis morbi. Quis ac penatibus elementum lacus, vestibulum sem tellus arcu.</p>
</div>
<hr/>

<div class="blog-post">
  <h3 class="blog-post-title"><a href="./item.html">项目2：Java实现网易云音乐爬虫</a></h3>
  <p class="blog-post-meta">2017年7月2日 分组：<a href="#">Java开发</a></p>
  <p class="blog-post-content">Amet risus. Dolor ultrices justo, praesent eos nisl lacus, consectetuer vitae lorem cras magna dolor, mauris libero turpis aliquam sed, at sapien tellus penatibus accumsan nec. Parturient amet felis morbi. Quis ac penatibus elementum lacus, vestibulum sem tellus arcu.</p>
</div>
<hr/>

<div class="blog-post">
  <h3 class="blog-post-title"><a href="./item.html">项目3：基于SSM框架的问答网站</a></h3>
  <p class="blog-post-meta">2017年7月2日 分组：<a href="#">Web开发</a></p>
  <p class="blog-post-content">Amet risus. Dolor ultrices justo, praesent eos nisl lacus, consectetuer vitae lorem cras magna dolor, mauris libero turpis aliquam sed, at sapien tellus penatibus accumsan nec. Parturient amet felis morbi. Quis ac penatibus elementum lacus, vestibulum sem tellus arcu.</p>
</div>
<hr/>

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

View Code

2.右侧信息栏

    <div class="col-sm-3 col-sm-offset-1">

<div class="sidebar-module sidebar-module-inset">
  <div class="avatar">
    <img class="img-circle img-rounded img-thumbnail avatar" src="static/img/3.jpg">
    <div>
      <h4>buwenyuwu</h4>
      <a>buwenyuwu@example.com</a>
    </div>
  </div>
  <p>Ornare sapien rhoncus, nec mi hendrerit. Ante aliquam dui arcu, diam sodales erat felis dolor sed in, nec placerat non.</p>
</div>

<div class="sidebar-module">
  <h4>归档</h4>
  <ol class="list-unstyled">
    <li><a href="#">2017年07月</a></li>
    <li><a href="#">2017年01月</a></li>
    <li><a href="#">2016年07月</a></li>
    <li><a href="#">2015年01月</a></li>
    <li><a href="#">2014年09月</a></li>
  </ol>
</div>

    </div>