(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"> 6 </h3>个 </div> </div>
<!-- 分类列表 --> <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 { -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; }
分类页效果如下图:
接下来的标签页和分类页布置方式几乎一模一样,稍微按照自己的想法改动即可