个人博客【博客标签、归档页面】---学习05

一、思维导图

二、个人博客

1、创建标签页面tags.html

2、编写导航栏

• active 选中状态

  <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui teal header item">Blog</h2>
        <a href="#" class=" m-item item m-mobile-hide"><i class="mini home icon"></i>首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
        <a href="#" class="active m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>关于我</a>
        <div class="right m-item item m-mobile-hide">
          <div class="ui icon inverted transparent input m-margin-tb-tiny">
            <input type="text" placeholder="Search....">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

3、运行查看效果

4、中间部分

5、底部部分

  <!--底部footer-->
  <footer class="ui inverted vertical segment m-padded-tb-massive"