Advertisement

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

阅读量：

文章目录

  • 一、思维导图
  • 二、个人博客
    • 1、创建标签页面tags.html
    • 2、编写导航栏
    • 3、运行查看效果
    • 4、中间部分
    • 5、底部部分
    • 6、运行查看页面
    • 7、创建归档页面
    • 8、归档导航页面
    • 9、运行查看效果
    • 10、中间部分
    • 11、运行查看效果

一、思维导图

在这里插入图片描述

二、个人博客

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">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：865729312</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>
    
      </footer>

6、运行查看页面

在这里插入图片描述

7、创建归档页面

在这里插入图片描述

8、归档导航页面

复制代码 
      <!--导航-->
      <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=" m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
        <a href="#" class="active 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>

9、运行查看效果

在这里插入图片描述

10、中间部分

  • vertical 垂直
  • circle 圆点
复制代码 
      <!--中间内容-->
      <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">
      <!--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">
            共 <h2 class="ui orange header m-inline-block m-text-thin"> 114 </h2> 篇博客
          </div>
        </div>
      </div>
    
      <h3 class="ui center aligned header">2017</h3>
      <div class="ui fluid vertical menu">
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
      </div>
    
      <h3 class="ui center aligned header">2016</h3>
      <div class="ui fluid vertical menu">
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
          <span>
            <i class="mini teal circle icon"></i>关于刻意练习的清单
            <div class="ui teal basic left pointing label m-padded-mini ">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini ">原创</div>
        </a>
      </div>
    
    
    </div>
      </div>

11、运行查看效果

在这里插入图片描述

全部评论 (0)

还没有任何评论哟~

相关文章推荐

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

文章目录 一、思维导图 二、个人博客 1、创建标签页面tags.html 2、编写导航栏 3、运行查看效果 4、中间部分 5、底部部分 6、运行查看页面 7、创建归档页面 8、归档导航页面 9、运行查...

实训-个人博客（博客归档页面）

1，archives.html页面 <!DOCTYPEhtml <htmllang=enxmlns:th=http://www.w3.org/1999/xhtml <headth:replace=fr...

Spring Boot制作个人博客-博客归档页面

文章目录 1、归档页面 2、archives.html页面 3、新建方法 4、查询方法 5、方法实现 6、在定义一个接口方法 7、新建ArchiveShowController.java 8、运行测试...

Django 博客 - 6 标签、分类和归档页面

编写模板文件 首先编写tag的模板，新建blog/templates/blog/tags.html文件，假设传给模版的上下文里有一个tags，代表所有标签，因此模板可以这么写 <ul %fortagi...

Spring Boot制作个人博客-归档页

文章目录 1、创建归档页 2、修改代码 （1）修改标题 （2）修改默认选择标签 （3）修改文章列表标题栏 （4）删除中间内容代码 3、按照年份做分类列表 4、最终效果 根据不同年份，展示文章列表 1、...

Spring Boot制作个人博客-标签页

文章目录 1、创建标签页 2、更改标题 3、更改文章列表标题 4、修改标签样式 5、正文中添加标签 6、整体效果 1、创建标签页 标签页与分类页十分相似，所有我们直接复制分类页进行修改 2、更改标题 ...

springboot开发小而美的博客学习笔记05（归档页面）

归档页面分为导航、底部还有中间由时间划分归纳的列表 导航： <!导航 <navclass=uiinvertedattachedsegmentmpaddedtbminimshadowsmall <div...

实训-个人博客（博客关于我页面）

1，创建AboutShowController packagenet.zl.myblog.web; importorg.springframework.stereotype.Controller; i...

SpringBoot个人博客开发（三）分类及标签页面

\分类页面开始 是同样步骤，先把首页代码除开主体部分复制下来。 创建type.html 首页代码复制进去 修改此处 分类页面中间内容分为三部分：分类数量统计、分类图标及数量、分类所对应博客列表、翻页按...

SpringBoot个人博客开发（二）----博客详情页面

博客详情页面 \开始 导航页和页尾等信息保持不变，只需改动中间信息即可 改变中间信息开始 创建Blog.html 复制index的全部代码，然后删除掉中间部分 此时页面如图 加入预留位（中间区域分为五...