Spring Boot开发小而美的博客学习笔记04（标签页面）

最新推荐文章于 2021-07-05 01:40:18 发布
最新推荐文章于 2021-07-05 01:40:18 发布
阅读量153 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LALisafans/article/details/117918873
版权

标签页面和之前做过的分类页面十分相似，它分为导航栏、底部、中间内容（中间内容分为标签部分和博客列表部分）
导航部分：
在这里插入图片描述
效果：
在这里插入图片描述
底部：

<!--   底部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">用户故事（User Story）</a>
                    <a href="#" class="item">关于刻意练习的清单</a>
                    <a href="#" class="item">失效要趁早</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">Email：2192787371@qqc.com</a>
                    <a href="#" class="item">QQ：2192787371</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 Jiujiu Designed by Jiujiu</p>
    </div>

</footer>

效果：
在这里插入图片描述

中间内容：
1：标签部分：

<!--        头部header-->
        <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">
                    共<h2 class="ui orange header m-inline-block m-text-thin">14</h2>个
                </div>
            </div>
        </div>
        <div class="ui attached segment m-padded-tb-large">
            <a href="#" target="_blank" class="ui teal basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>
            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>

            <a href="#" target="_blank" class="ui basic left pointing large label m-margin-tb-tiny">
                方法论<div class="detail">22</div>
            </a>


        </div>

效果：
在这里插入图片描述
2.博客列表部分：

                      </div>
                    </div>
                </div>

                <div class="ui padded vertical  segment m-padded-lr-clear">
                    <div class="ui mobile reversed stackable grid">
                        <!--   文章内容     -->
                        <div class="eleven wide column">
                            <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                            <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">啾啾</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui  basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--   文章图片       -->
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="http://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ui padded vertical  segment m-padded-lr-clear">
                    <div class="ui mobile reversed stackable grid">
                        <!--   文章内容     -->
                        <div class="eleven wide column">
                            <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                            <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">啾啾</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui  basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--   文章图片       -->
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="http://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ui padded vertical  segment m-padded-lr-clear">
                    <div class="ui mobile reversed stackable grid">
                        <!--   文章内容     -->
                        <div class="eleven wide column">
                            <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                            <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">啾啾</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui  basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--   文章图片       -->
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="http://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ui padded vertical  segment m-padded-lr-clear">
                    <div class="ui mobile reversed stackable grid">
                        <!--   文章内容     -->
                        <div class="eleven wide column">
                            <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                            <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">啾啾</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui  basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--   文章图片       -->
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="http://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ui padded vertical  segment m-padded-lr-clear">
                    <div class="ui mobile reversed stackable grid">
                        <!--   文章内容     -->
                        <div class="eleven wide column">
                            <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                            <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                            <div class="ui stackable grid">
                                <div class="row">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">啾啾</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i> 2017-10-01
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> 2342
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column">
                                        <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="column">
                                        <a href="#" class="ui  basic teal left pointing label m-padded-mini m-text-thin">方法论</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--   文章图片       -->
                        <div class="five wide column">
                            <a href="#" target="_blank">
                                <img src="http://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>

效果：
在这里插入图片描述

整体效果：
在这里插入图片描述

LALisafans
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot常用标签介绍
软件老王
05-23 2111
springboot下，基本全标签化了，spring标签很多，有时候会混淆，简单记录下，以免有时候会迷糊。
Spring Boot制作个人博客-标签页
qq_48838980的博客
06-06 310
文章目录1、创建标签页2、更改标题3、更改文章列表标题4、修改标签样式5、正文中添加标签6、整体效果 1、创建标签页 标签页与分类页十分相似，所有我们直接复制分类页进行修改 2、更改标题 3、更改文章列表标题 4、修改标签样式 <div class="ui attached segment m-padded-tb-large"><!--attached贴附--> <a href="#" class="ui teal basic poi
Spring boot实训 个人博客系统一 首页
aqaerw的博客
07-05 343
1. 个人博客介绍: 个人博客的大概内容:博客首页、博客文章、博客管理。实现的各种功能：留言板、回复功能、多级回复功能、标签分类、归档页、关于我页面、搜索、导航页面、后台管理博文。 个人博客思维导图： 需要的代码： 后端：Spring Boot +JPA +thymleaf模板 数据库: MySQL 前端UI: SemanticUI框架 工具与环境: IDEA Maven 3 JDK 8 Axure RP 8 2.功能实现: 1.创建index.html文件: 2.到Sem
个人博客---学习02
uoprewqsnh的博客
06-02 220
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
SpringBoot个人博客开发（三）分类及标签页面
ce121的博客
06-01 382
----分类页面开始----- 是同样步骤，先把首页代码除开主体部分复制下来。 创建type.html 首页代码复制进去 修改此处 分类页面中间内容分为三部分：分类数量统计、分类图标及数量、分类所对应博客列表、翻页按钮 <!--页面主体--> <div class="m-padded-tb-large m-container-small"> <div class="ui container"> <!--header-->
springboot开发小而美的博客学习笔记05（归档页面）
LALisafans的博客
06-15 292
归档页面分为 导航、底部还有中间由时间划分归纳的列表 导航： <!-- 导航 --> <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > <div class="ui container"> <div class="ui inverted secondary stackable menu"> <!-- L
Spring Boot开发小而美的博客学习笔记01（首页）
LALisafans的博客
05-31 393
完成后显示效果： （一）个人博客的首页： 1、左边是博客的列表（图文区域），支持上下分页； 2、右边分类进行展示（标签、分类、二维码等）； 3、底部有信息栏（博客最新内容、个人联系方式、二维码等）； （二）个人博客详情页： 1、图文 2、支持代码语法高量展示 3、导航栏： （1）目录：根据博客内容生成目录，可快速浏览 （2）留言：可进行留言也可进行回复(回复可进行二级、三级等评级的回复) （3）微信二维码：鼠标移动到微信图标时，自动显示二维码 (4) 赞赏：以扫码方式进行赞赏 （三）分类页面 1、标签：
Spring Boot开发一个小而美的个人博客
11-22
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦....... ...
Spring Boot开发小而美的个人博客.zip
02-06
**技术组合：** * 后端：Spring Boot + JPA + thymeleaf模板 * 数据库：MySQL * 前端UI：Semantic UI框架 ...* 基于Spring Boot的完整全栈式的开发套路 * Semantic UI框架的使用 * 一套博客系统的源代码与设计
Spring Boot开发小而美的个人博客
06-09
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦.......
一个小而美的个人博客，基于Spring Boot开发
05-30
一个小而美的个人博客，基于Spring Boot开发 安装运行 clone 项目,加载 maven。 还原数据库，导入 sql 文件夹下的 light-blog.sql 文件。 运行，大功告成。 frontend-design 文件夹下为原型设计图及设计好的原始 ...
Spring Boot学习笔记
03-21
【Spring Boot学习笔记】 Spring Boot是Java开发领域中一个非常受欢迎的框架，它极大地简化了创建独立、生产级别的基于Spring的应用程序的过程。Spring Boot的核心理念是“约定优于配置”，这使得开发者可以快速...
夜光带你走进我擅长的领域：SpringBOOT（10）
夜光的博客
08-20 343
夜光序言： 有时候我们有些近视，忽略了离我们最真的情感；有时候我们有些远视，模糊了离我们最近的幸福。一辈子真的很短，远没有我们想象的那么长，永远真的没有多远。所以,对爱你的人好一点，对自己好一点，今天是你的枕畔人，明天可能成了陌路人，如果这辈子来不及好好相爱，就更不要指望下一辈子还能遇见。 正文：采用Semantic UI前端框架，和jquery，css，js...
SpringBoot如何修改网页标签上展示的小树叶图标
xinzi11243094的博客
05-14 1万+
Spring Boot Web项目启动时，打开SpringBoot网页时，网页的标签页最左侧会显示一个绿色小树叶状的图片，此图片有个专业术语称为Favicon，本文主要介绍如何修改SpringBoot Web应用网页标签面上默认展示的Favicon图标。工具/原料SpringBoot 1.5.9.RELEASE方法/步骤打开Spring Boot Web应用，进入应用首页后可以看到如下默认的绿色小...
通过SpringBoot访问HTML页面
吃瓜的猫~
10-25 10万+
本文章内容主要讲下怎么通过SpringBoot进入HTML页面 1、首先在pom.xml添加对HTML的相关依赖/** * pom.xml文件 */ <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter
spring boot评论+分类页面+标签页面
jigsaw6213的博客
07-31 183
实体类设计 @Entity @Table(name="t_comment") public class Comment { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String nickname;//用户昵称 private String email;//邮箱 private String content;//评论内容 privat
springboot如何访问html页面,Springboot访问html页面的教程详解
weixin_29602351的博客
06-04 2万+
Springboot访问html页面的教程详解1. 在原有的项目resouces目录下创建static包,并在static下创建pages,然后在pages包下hello.html.这时你会发现hello.html并没有在static中,它跑哪去了呢?打开src下的webapp,发现有一个hello.htm,删除web.xml,并将hello.html用鼠标左键移到static目录下;hello....
如何配置springboot跳转html页面
热门推荐
不二的博客
08-15 11万+
1.首先在pom文件中引入模板引擎jar包，即： &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-thymeleaf&lt;/artifactId&gt; &lt;/dependency&gt; ...
Crypto_30_vHsm_Types.h
最新发布
07-09
Crypto_30_vHsm_Types
Spring Boot学习资料教程.docx
11-01
"这是一份详细的Spring Boot学习教程，适合初学者。教程涵盖了从基础的Hello World到更复杂的配置和实战应用。作者已验证所有代码，确保可运行。教程内容包括注解理解、配置文件（YAML）、配置文件优先级、Profile...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值