项目：个人博客系统 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 navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="/">buwenyuwua>
        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>

    
    <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>

        
        <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>

        
        <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>

        
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left">span>
            <span class="sr-only">Previousspan>
        a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right">span>
            <span class="sr-only">Nextspan>
        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">访问 »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="#">访问 »a>p>
        div>

        <div class="col-sm-4 project">
            <img class="img-circle" src="/static/img/5.jpg" width="140" height="140">
            <h2>不闻余物的Project3h2>
            <p>基于SSM框架的模仿知乎风格的问答网站。p>
            <p><a class="btn btn-default" href="#">访问 »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">←span> 上一页a>li>
    <li class="next"><a href="#">下一页 <span aria-hidden="true">→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>buwenyuwuh4>
      <a>[email protected]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>

View Code

最终页面：

 

 

四、文章详情页

与文章列表类似，分成两块：文章详情和信息栏。

同时在底部添加一个footer页脚作为简单的声明。

最终页面：

分类列表页、分类详情页、关于页面这三个部分布局和上面类似， 只需稍作修改即可。

 

五、登录界面

登录界面基于模板稍作修改，包括js背景图轮播；添加了验证码功能和记住用户功能；

最终登录界面：

背景图会根据设置在候选图里每秒变换。

 

至此，博客前端的主要页面就都完成。

主要是对Bootstrap框架的应用来实现基本的博客布局和页面。

 

转载于:https://www.cnblogs.com/buwenyuwu/p/7095940.html