2021-6-7：开发小而美的博客（分类页）

最新推荐文章于 2021-08-04 22:34:11 发布
最新推荐文章于 2021-08-04 22:34:11 发布
阅读量116 收藏
点赞数
分类专栏： Spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lydialhf/article/details/117651914
版权

2021-6-7：开发小而美的博客（分类页）

文章目录

1、新建文件types.html

在这里插入图片描述

2、复制内容

把详情页blog.html的内容复制过来，删除中间内容部分

在这里插入图片描述

3、中间部分

3.1、header头部

在这里插入图片描述

3.2、标签

在这里插入图片描述

3.2、博客文章列表

在这里插入图片描述

                <div class="ui top attached teal segment">
                    <div class="ui padded vertical  segment m-padded-tb-large 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="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img  src="http://unsplash.it/100/100?image=1005" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">奈一</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-6-2
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>2345
                                            </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>
                            <!--   文章图片       -->
                            <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-tb-large 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="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img  src="http://unsplash.it/100/100?image=1005" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">奈一</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-6-2
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>2345
                                            </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>
                            <!--   文章图片       -->
                            <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-tb-large 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="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img  src="http://unsplash.it/100/100?image=1005" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">奈一</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-6-2
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>2345
                                            </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>
                            <!--   文章图片       -->
                            <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-tb-large 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="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img  src="http://unsplash.it/100/100?image=1005" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">奈一</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-6-2
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>2345
                                            </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>
                            <!--   文章图片       -->
                            <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-tb-large 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="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img  src="http://unsplash.it/100/100?image=1005" class="ui avatar image">
                                                <div class="content"><a href="#" class="header">奈一</a></div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2021-6-2
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>2345
                                            </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>
                            <!--   文章图片       -->
                            <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>

3.3、底部按钮

在这里插入图片描述

4、CSS文件

在这里插入图片描述

6、效果展示

在这里插入图片描述

小芙子☞
关注
专栏目录
开发小而美的个人博客之框架搭建
erwaplus的博客
07-02 427
文章目录1、技术框架搭建二、处理1、异常处理2、日志处理3、页面处理4、实体类构建 1、技术框架搭建 首先IDEA中创建Spring Boot项目，并导入项目所需的依赖项，例如Thymleaf、Spring Boot DevTools、Spring Web、Spring Data JPA、MySQL Driver。 配置文件采用yaml格式，当然properties格式的配置文件同样可以。首先编写全局的配置文件application.yaml，为了适配于不同的应用环境，创建application-dev.y
小而美博客实训总结
csdn_ct1的博客
07-02 528
第1步：理清完成个人博客的整体思路。 第2步：对每一步进行细化。 第3步：分析如何完成：个人博客分成前端展示和后台管理两个大模块，前端用来展示后台的数据，后台用来支撑前端，这边是大数据可视化。 3.1：前端展示分为首页、分类、标签、归档、四个模块； 3.1.1：首页展示博客分页列表、展示top标签、展示top分类、最新博客推荐、博客详情； 3.1.2分类展示所有分类、展示单个分类下博客列表和博客详情。 3.1.3标签展示所有标签、展示单个标签对应博客列表、博客详情。 3.1.4归档展示按年度事件
搭建小而美博客总结
[爪洼ing]的博客
08-04 497
个人博客采取技术栈：semanticUI+Thymeleaf+springboot+Mybatis 博客搭建环境： JDK8 、MySQL 5.7 、Springboot 2.5.2、Maven、Idea 搭建博客所遇问题： SQL表与实体类的关系： 因为表中带有多个外键，所以会产生一对多，和多对一的关系，我们的实体类的编写，比如一个博客对应一个分类，但是SQL表中blog表与type表是以外键相关联，所以要查询全部博客的信息，需要采用mybatis的Assoation进行结果集映射，其余同理； 多.
2021-6-7：开发小而美的博客（标签页）
Lydialhf的博客
06-07 128
开发小而美的博客（标签页） 文章目录开发小而美的博客（标签页）1、创建tags.html文件2、标签3、博客文章内容4、CSS文件5、效果展示 1、创建tags.html文件 因为标签页和分类页很相似，所以直接复制分类页 添加一个显示活动窗口的标签active 2、标签 3、博客文章内容 在博客文章内容底部添加相对应的标签 4、CSS文件 body{ background: url("../images/bg.jpg");/*背景图*/ } .m-padded-mini{ pa
2021-6-9：开发小而美的博客（博客发布页）
Lydialhf的博客
06-09 148
2021-6-9：开发小而美的博客（博客管理列表页） 文章目录2021-6-9：开发小而美的博客（博客管理列表页）1、新建文件blogs-input.html2、中间部分2.1 原创及博文内容2.2 分类2.3 标签2.4 首图应用地址2.5 勾选框2.6 放置错误信息框2.7 提交按钮2.8 js样式2.9 全部代码3、引入插件4、新建文件夹editormd4.1 导入下载的插件内容5、显示效果 1、新建文件blogs-input.html 2、中间部分 2.1 原创及博文内容 2.2 分类 2.
2021-6-24：开发小而美的博客（分类管理）
Lydialhf的博客
06-24 230
2021-6-24：开发小而美的博客（分类管理） 文章目录2021-6-24：开发小而美的博客（分类管理） 分类管理： 分类管理页面 分类列表分页 分类新增、修改、删除
2021-6-27：开发小而美的博客（博客编辑）
Lydialhf的博客
06-27 244
2021-6-27：开发小而美的博客（博客编辑） 文章目录2021-6-27：开发小而美的博客（博客编辑） 博客管理 1. 博客分页查询 2. 博客新增 3. 博客修改 4. 博客删除
2021-6-22：开发小而美的博客（后台登录）
Lydialhf的博客
06-22 229
2021-6-22：开发小而美的博客（后台管理） 文章目录2021-6-22：开发小而美的博客（后台管理） 后台管理 登录 1. 构建登录页面和后台管理首页 2. UserService和UserRepositiory 3. LoginController实现登录 4. MD5加密 5. 登录拦截器 ...
2021-6-27：开发小而美的博客（博客新增）
Lydialhf的博客
06-27 220
2021-6-26：开发小而美的博客（分类管理） 文章目录2021-6-26：开发小而美的博客（分类管理）
SpringBoot开发小而美的个人博客
01-01
根据提供的标题、描述以及部分内容，本文将详细解析如何利用Spring Boot构建一个简约美观的个人博客系统。本项目涉及的关键技术栈包括Spring Boot、JPA、Thymeleaf、MySQL、Semantic UI等，并且使用了IntelliJ IDEA...
Spring Boot开发小而美的个人博客-李仁密-专题视频课程
01叔的博客
10-30 6557
该套课程为精心打造的Spring Boot项目实战视频课程，我会带你从零开始，一步一步的完成一个小而美的个人博客产品，通过学习能让你掌握完整的全栈开发套路，开发前端UI的小套路，还会get到很多小技能哦..........
开发小而美的个人博客之页面开发
erwaplus的博客
07-02 743
一、技术准备 前端：HTML、CSS、JS、Thymeleaf、Semantic UI 工具：WebStorm 二、前端展示 1、首页 ①首页效果展示 ②首页代码展示 导航栏部分 <nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" > <div class="ui container"> <d
springboot 小而美博客开发经验总结
Tom_boy_的博客
07-05 432
哔哩哔哩自学博客系统 Semantic UI开发前端，SpringBoot开发后端 技术组合： 后端：Spring Boot + JPA + thymeleaf模板 数据库：MySQL 前端UI：Semantic UI框架 工具与环境： IDEA Maven 3 JDK 8 Axure RP 8 课程内容模块： 需求分析与功能规划 页面设计与开发 技术框架搭建 后端管理功能实现 前端管理功能实现 1、创建SpringBoot项目勾选依赖 devtools web mysql jpa thymeleaf 2、
修改StudentInfo项目输出学生信息
Lydialhf的博客
04-28 846
修改StudentInfo项目输出学生信息
2021-4-19：基于XML配置方式搭建SSM框架实现用户登录
Lydialhf的博客
04-19 672
基于XML配置方式搭建SSM框架实现用户登录 创建Maven项目 - SSMLogin 在pom.xml文件里添加相关依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="h
2021-5-26：使用Thymeleaf配置国际化页面
Lydialhf的博客
05-26 601
使用Thymeleaf配置国际化页面 将上一讲ThymeleafDemo项目的内容拷贝到新项目里 在resources下创建i18n目录 在i18n目录里创建login.properties 在i18n目录里创建login_zh_CN.properties 在i18n目录里创建login_en_US.properties 编写全局配置文件 定制区域信息解析器 package net.lhf.lesson10.resolver; import org.springframework.co
2021-6-27：开发小而美的博客（前端首页展示）
Lydialhf的博客
06-27 558
2021-6-27：开发小而美的博客（前端首页展示） 文章目录2021-6-27：开发小而美的博客（前端首页展示）1、优化Blog.java代码 1、优化Blog.java代码 package net.lhf.po; import javax.persistence.*; import java.util.ArrayList; import java.util.Date; import java.util.List; /** * 功能： * 作者：李红芙 * 日期：2021年6月23日 */
2021-5-7：Spring Boot多环境配置
Lydialhf的博客
05-07 498
Spring Boot多环境配置
RT-Thread AI总监解读：嵌入式AI开发对RTOS的挑战与选择
RT-Thread，作为一个国内自主开发的小而美的物联网操作系统，自2006年成立以来，经历了多个发展阶段，从最初的0.1.0内核版本到2018年的4.0版本，不断优化和完善，以适应快速增长的嵌入式AI应用开发需求。 RT-Thread...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值