Spring Boot制作个人博客-分类页
本文共 12155 字，大约阅读时间需要 40 分钟。
文章目录
- 视频学习网站：https://www.bilibili.com/video/BV1NJ411s7yb?p=28
一、创建分类页面
- 复制详情页进行修改
分类页
- 页面的开头和结尾是相同的
二、复制index.html代码
- 并修改文字
三、分类选框
- 没有颜色代表未选中
四、复制index.html代码
1、复用一下文章列表代码
2、修改代码样式
- 多拷贝几个
五、上下文分页
六、为导航栏添加阴影效果
1、自定义效果
2、分别给首页以及详情页面的导航栏添加效果
七、最终效果
1、分类页
分类页 分类
共14
个
2、css代码
/*body*/body{ background: url("../imags/bg.jpg");}/*导航栏样式*//* padded */.m-padded-tb-mini{ padding-top: 0.2em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 0.2em !important;}.m-padded-tb-tiny{ padding-top: 0.3em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 0.3em !important;}.m-padded-tb-small{ padding-top: 0.5em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 0.5em !important;}.m-padded-tb-tb{ padding-top: 1em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 1em !important;}.m-padded-tb-large{ padding-top: 2em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 2em !important;}.m-padded-tb-big{ padding-top: 3em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 3em !important;}.m-padded-tb-huge{ padding-top: 4em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 4em !important;}.m-padded-tb-massive{ padding-top: 5em !important;/*!important 提高级别，才能覆盖之前的样式*/ padding-bottom: 5em !important;}.m-padded-lr-responsive{ padding-left: 4em !important; padding-right: 4em !important;}/*margin*/.m-margin-top-small{ margin-top:0.5em !important;}.m-margin-top{ margin-top:1em !important;}.m-margin-top-large{ margin-top:2em !important;}.m-margin-tb-tiny{ margin-top:0.3em !important; margin-bottom: 0.3em !important;}.m-margin-bottom-small{ margin-bottom: 0.5em !important;}/*去除h3标签自动换行*/.m-inline-block{ display: inline-block;}.m-container{ max-width: 72em !important; margin: auto !important;}.m-container-small{ max-width: 60em !important; margin: auto !important;}.m-shadow-small{ -webkit-box-shadow:0 4px 8px rgba(0,0,0,0.2) !important ;/*适应浏览器版本*/ box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;}/*颜色*/.m-black{ color:#333;}/*指定位置 position*/.m-right-top{ position: absolute; top:0; right: 0;}/*网页中不显示按钮*/.m-mobile-show{ display: none !important;}/*定义隐藏列表样式(在手机端时)*/@media screen and (max-width:768px){ /*显示界面大小在小于768px时，不显示列表*/ .m-mobile-hide{ display: none !important; } /*手机端显示按钮*/ .m-mobile-show{ display: block !important; } .m-padded-lr-responsive{ padding-left: 0 !important; padding-right: 0 !important; } .m-mobile-wide{ width: 100% !important; } .m-mobile-lr-clear{ padding-left: 0 !important; padding-right: 0 !important; }}/*文本设置 text*/.m-text{ font-weight: 300 !important; letter-spacing:1px !important; line-height: 1.8;}.m-text-thin{ /*设置字体粗细*/ font-weight: 300 !important;}.m-text-spaced{ /*设置字间距*/ letter-spacing:1px !important;}.m-text-lined{ /*设置行间距*/ line-height: 1.8;}.m-opacity-mini{ opacity: 0.8 !important; /*设置英文透明度*/} 转载地址：http://rntki.baihongyu.com/
你可能感兴趣的文章
i2c子系统之__i2c_first_dynamic_b…
查看>>
浅析linux内核中的idr机制
查看>>
i2c子系统之__i2c_first_dynamic_b…
查看>>
linux内核SPI总线驱动分析（一）
查看>>
浅析linux内核中的idr机制
查看>>
source insight使用
查看>>
linux内核SPI总线驱动分析（一）
查看>>
linux设备模型之uart驱动架构分析
查看>>
source insight使用
查看>>
git基本使用
查看>>
网络子系统5_设备队列规则 .
查看>>
七、WordPress配置HTTPS与开启CDN加速
查看>>
linux下如何手动编译安装bzip2库
查看>>
view must be a callable or a list tuple in the case of include
查看>>
CentOS 6.7下MySQL 5.6 yum快速安装及参数详解
查看>>
CentOS6.8二进制安装MySQL5.6
查看>>
centos 6x系统下源码安装mysql操作记录
查看>>
Centos搭建Mysql主从复制
查看>>
centos下部署redis服务环境及其配置说明
查看>>
Centos7下部署两套python版本并存环境的操作记录
查看>>