Spring Boot制作个人博客-详情页
本文共 13871 字，大约阅读时间需要 46 分钟。
文章目录
一、创建详情页面
- 直接拷贝index.html改名为blog.html
- 删除中间内容代码，其他不变
二、制作框架
头部
三、编写头部
2017-10-012032
四、编写图片区域
五、主要内容区域
- 以下代码都放入上方框架之中
1、原创按钮
原创
2、内容
充满智慧的人生格言
有些道理，总要在碰得鼻青脸肿以后才会明白。有些情感，总要到无法挽回以后才去珍惜。人生太多的悲哀与不幸，都是因为自己的眼高手低造成的。
1
看清一个人又何必去揭穿；讨厌一个人又何必去翻脸。活着，总有看不惯的人，就如别人看不惯我们。人的成熟不是年龄，而是懂得了放弃，学会了圆融，知道了不争。
2
年龄越大，越学会了顺其自然，不想再挽留什么，相信该在的不会走。得之坦然，失之淡然，争取必然，顺其自然。遇见的人多了你才会明白，哪些人值得用生命去珍惜，哪些人只适合绕道而行。
3
我们最大的善良莫过于对陌生人礼貌，对家人耐心，对爱人体贴，对旧人不打扰。
4
有些事当你一直说自己非常忙碌，就永远不会得到空间；当你一直说自己没有时间，就永远不会得到时间；当你一直说这件事明天再做，你的明天就永远不会来！
5
你要忍，忍到春暖花开；你要走，走到灯火通明；你要看过世界辽阔，再评判是好是坏；你要卯足劲变好，再旗鼓相当的站在不敢想象的人身边；你要变成想象中的样子，这件事，一步都不能让。
6
回首那些走过的路，每一步都走的好孤独，而学会孤独正是成长的必修课，所以，别慌，一步步走，只要通过了，这就是上天给的礼物。
7
很多关系，不是老的好，也不是新的好，而是一起经历了一些事之后，你还真切的觉得对方挺好，这才是值得你去认真对待和掏心窝子的关系。
总结
对未来，要抱最大希望；对目标，要尽最大努力；对结果，要做最坏打算；对成败，要持最好心态。不急不躁，不骄不馁，祝你把握好每分每秒，让成功拥抱！
3、标签
方法论
4、赞赏
- 点击赞赏按钮弹出收款二维码
5、博客信息
- 作者：beauty （联系作者）
- 发表时间：2017-10-02 09：08
- 版权声明：自由转载-非商用-非衍生-保持署名（创意恭喜
- 作者：beauty （联系作者）
6、留言区域
-
访问：https://semantic-ui.com/views/comment.html
-
直接复制代码
-
效果图
7、最终全部代码
（1）详情页代码 blog.html
详情页 
原创充满智慧的人生格言
有些道理，总要在碰得鼻青脸肿以后才会明白。有些情感，总要到无法挽回以后才去珍惜。人生太多的悲哀与不幸，都是因为自己的眼高手低造成的。
1
看清一个人又何必去揭穿；讨厌一个人又何必去翻脸。活着，总有看不惯的人，就如别人看不惯我们。人的成熟不是年龄，而是懂得了放弃，学会了圆融，知道了不争。
2
年龄越大，越学会了顺其自然，不想再挽留什么，相信该在的不会走。得之坦然，失之淡然，争取必然，顺其自然。遇见的人多了你才会明白，哪些人值得用生命去珍惜，哪些人只适合绕道而行。
3
我们最大的善良莫过于对陌生人礼貌，对家人耐心，对爱人体贴，对旧人不打扰。
4
有些事当你一直说自己非常忙碌，就永远不会得到空间；当你一直说自己没有时间，就永远不会得到时间；当你一直说这件事明天再做，你的明天就永远不会来！
5
你要忍，忍到春暖花开；你要走，走到灯火通明；你要看过世界辽阔，再评判是好是坏；你要卯足劲变好，再旗鼓相当的站在不敢想象的人身边；你要变成想象中的样子，这件事，一步都不能让。
6
回首那些走过的路，每一步都走的好孤独，而学会孤独正是成长的必修课，所以，别慌，一步步走，只要通过了，这就是上天给的礼物。
7
很多关系，不是老的好，也不是新的好，而是一起经历了一些事之后，你还真切的觉得对方挺好，这才是值得你去认真对待和掏心窝子的关系。
总结
对未来，要抱最大希望；对目标，要尽最大努力；对结果，要做最坏打算；对成败，要持最好心态。不急不躁，不骄不馁，祝你把握好每分每秒，让成功拥抱！
方法论
- 作者：beauty （联系作者）
- 发表时间：2017-10-02 09：08
- 版权声明：自由转载-非商用-非衍生-保持署名（创意恭喜
- 作者：beauty （联系作者）
Comments
（2）css代码 css.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-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; } }/文本设置 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; /设置英文透明度/ }
你可能感兴趣的文章
Android电源管理（zz）
查看>>
Android HAL基础
查看>>
Android电源管理（zz）
查看>>
Android平台开发-Android HAL deve…
查看>>
Android HAL基础
查看>>
2011年06月21日
查看>>
2011年06月21日
查看>>
Android Sensor传感器系统架构初探
查看>>
Android的传感器HAL层的书写---基…
查看>>
生成和使用动态链接库和静态链接库…
查看>>
linux工作队列（转）
查看>>
工作队列的初始化（INIT_WORK的参…
查看>>
sysfs and /proc/bus/usb/device
查看>>
linux工作队列（转）
查看>>
跟我一起写udev规则(译)
查看>>
sysfs and /proc/bus/usb/device
查看>>
跟我一起写udev规则(译)
查看>>
USB和sysfs文件系统
查看>>
USB和sysfs文件系统
查看>>
udev（八）：实战：使用udevadm修…
查看>>
Comments
This has been very useful for my research. Thanks as well!