博客分类、标签页面

（1）页面导航和页脚依然不变，只改中间内容即可

（2）中间内容分为三部分：分类数量统计、分类图标及数量、分类所对应博客列表、翻页按钮

分类数量统计：和首页的博客数量统计设计方式一致，直接按照首页来写即可

<div class="ui top attached segment">
    <div class="ui middle aligned two column grid">
        <div class="column">
            <h3 class="ui teal header">分类</h3>
        </div>
        <div class="right aligned column">
            共<h3 class="ui orange header my-inline-block my-text-thin">&nbsp;6&nbsp;</h3>个
        </div>
    </div>

分类图标及数量：直接去官网的 Button项目下找到自己中意的按钮即可。然后为了美观，增大一下分类按钮上下间距，可以自定义 css样式进行改变。然后指定选中和未选是呈现不同颜色即可。具体实现如下：

<!-- 分类列表 -->
<div class="ui attached segment my-padded-tb-large">
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic teal button">思考与感悟</a>
        <div class="ui basic teal left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">开发心得</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">技术交流</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">思考</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">感悟</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">联系我</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">开发者手册</a>
        <div class="ui basic left pointing label">5</div>
    </div>
    <div class="ui labeled button my-margin-tb-tiny">
        <a href="#" class="ui basic button">交流</a>
        <div class="ui basic left pointing label">5</div>
    </div>
</div>

效果如下：

分类所对应博客列表：与首页的博客列表类似，思路差不多

翻页按钮：依然采用首页博客列表下方的方式来写

<div class="ui bottom attached segment">
    <div class="ui middle aligned two column grid my-padded-lr-responsive">
        <div class="column">
            <a href="#" class="ui mini teal basic button">上一页</a>
        </div>
        <div class="right aligned column">
            <a href="#" class="ui mini teal basic button">下一页</a>
        </div>
    </div>
</div>

细节处理：发现导航栏和主页面颜色转变太过突然，添加一个阴影过渡，自定义一个名为为 my-shadow-small的 css样式

.my-shadow-small {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.4) !important;
}

至此，分类页完成！分类页效果如下图：

接下来的标签页和分类页布置方式几乎一模一样，稍微按照自己的想法改动即可

Semantic UI 个人博客分类及标签页面开发

博客分类、标签页面

然后是归档页、关于我页面的设计思路更新......

猜你喜欢