从零开始一步步带你开发自己的博客系列教程二 前台页面最新日志列表布局

上一节介绍了 从零开始一步步带你开发自己的博客系列教程一 前台页面公共头部开发       前台页面最新日志列表区域布局，首页列表，栏目列表共同使用最新日志列表页面，博客采用简单明了形式，主要区域分左右两列，左侧为主要预览区域，右侧为辅助区域。

    不要为功能而做功能，自己非常需要的，就加入进来，最新日志列表为文字列表，不采用缩略图形式，喜欢缩略图的博友们自行加入缩略图列表布局，日志列表展示日志标题，日志属性，置顶、发布日期、所属栏目，浏览器及日志简介，默认展示10条日志，更多日志查看更多加载下一页形式，栏目日志列表与首页列表布局一致，只是日志数据不同而已。

index.html 加入下方代码

<article>
    <div class="container">
        <div class="main main-list">
            <div class="new-title">最新日志</div>
            <div class="new-article">
                <div class="list-item">
                    <h2 class="list-title"><a href="#" title="标题">标题</a></h2>
                    <div class="list-icon">
                        <span class="top">置顶</span>
                        <span class="time"><i class="icon icon-rili"></i>2022-01-14</span>
                        <span class="classlfy"><i class="icon icon-wenjian"></i>web前端</span>
                        <span class="brows browse-huo"><i class="icon icon-huo"></i>100人</span>
                    </div>
                    <div class="list-context">日志内容</div>
                    <div class="list-go">
                        <span></span>
                        <a href="#" title="查看全文">
                            <i class="icon icon-file"></i>
                            <span>查看全文</span>
                            <i class="icon icon-gengduo gl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="load-more">查看更多</div>
        </div>
        <!-- 右侧区域 -->
    </div>
</article>

common.css 加入下方代码

article{
    padding-top: 73px;
    width:100%;
    overflow: hidden;
}

article .container{
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
}

article .container .main{
    width: 74%;
    float: left;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
}

article .container .main .breadcrumb{
    height: 30px;
    line-height: 30px;
    padding: 5px;
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    background-color: #e1f0ff;
    color:#999;
}

article .container .main .breadcrumb a{
    color:#666;
}

article .container .main .breadcrumb span{
    color:#999;
    padding:0 .3rem;
}

article .container .main .new-title{
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    padding-left: 10px;
    color: #0b0b37;
    font-weight: 600;
    border-bottom: 1px #EEEEEE solid;
}

.list-item{
    padding: 10px 8px;
    border-bottom: 1px #eee solid;
}

.list-item:last-child{
    border-bottom: none;
}

.list-item .list-title{
    margin-top: 10px;
}

.list-item .list-title a{
    color: #0b0b37;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
}

.list-item .list-title a:hover{
    color: #1e80ff;
}

.list-item .list-icon{
    padding: 10px 0;
}

.list-item .list-icon span{
    padding: 0 5px;
    border-radius: 2px;
    color:#8590a6;
    margin-right: 5px;
}

.list-item .list-icon span i{
    padding-right: 4px;
}

.list-item .list-icon .top{
    color: #1e80ff;
    background: #e6f7ff;
    border: 1px #91d5ff solid;
}

.list-item .list-icon .collection{
    color: #eb2f96;
    background: #fff0f6;
    border: 1px #ffadd2 solid;
}

.list-item .list-icon .browse-huo{
    color: #f0732e;
}

.list-item .list-context {
    font-size: 14px;
    color: #999;
    line-height: 22px;
}

.list-item .list-context p{
    margin-bottom: 1rem;
}

.list-item .list-go{
    margin-right: 0.2rem;
    color: #bbb;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-go a{
    display: flex;
    align-items: center;
    color: #4f5a70;
}

.list-go a:hover{
    color: #1e80ff;
}

.list-item .list-go span{
    line-height: 2rem;
    padding:0 0.1rem;
}

.load-more{
    border-top: 1px #eee solid;
    text-align: center;
    height: 44px;
    cursor: pointer;
    line-height: 44px;
}

.load-more:hover{
    color: #1e80ff;
}

实际效果如下：

    首页最新日志列表完成了，栏目列表页面，如：新建 list_template.html 页面，引入公用头部文件header.html，复制index.html 最新日志html内容，栏目列表就完成了，具体操作等后续教程；引用公共文件，需要模板引擎的支持。本节到此介绍完了，你的博客之路越来越近了。