首页 > 其他 > 详细

Semantic UI 个人博客归档页面开发

时间:2020-03-12 17:53:48      阅读:207      评论:0      收藏:0      [点我收藏+]

博客归档页面



 

 

该页面由两部分构成:博客总篇数统计、时间线博客列表

  • 篇数统计:采用分类或者标签页面的统计方式即可
  • 时间线布置:
    • 年份定义为 h2标题大小即可
    • 文章列表采用竖向菜单模式
      <!-- header -->
      <div class="ui top attached padded 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;105&nbsp;</h3></div>
          </div>
      </div>
      <!-- 时间线 -->
      <h2 class="ui center aligned header" style="color: beige">2020</h2>
      <div class="ui fluid vertical menu">
          <a href="#" target="_blank" class="item">
              <span>
                  <i class="teal mini circle icon"></i>关于刻意练习
                  <div class="ui teal basic left pointing label my-padded-mini">01-03</div>
              </span>
              <div class="ui basic red label my-padded-small">原创</div>
          </a>
          ...
          ...
          ...
          <a href="#" target="_blank" class="item">
              <span>
                  <i class="teal mini circle icon"></i>关于刻意练习
                  <div class="ui teal basic left pointing label my-padded-mini">07-03</div>
              </span>
              <div class="ui basic red label my-padded-small">转载</div>
          </a>
          ...
          ...
          ...
      </div>

  最终效果如下:技术分享图片

 

 

接下来是关于我页面开发流程及思路......

 

Semantic UI 个人博客归档页面开发

原文:https://www.cnblogs.com/skygrass0531/p/12470134.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!