在之前已经把首页做好，头部和尾部都是一样的，这样就节省了很多写代码的时间

文章目录

  • 页面制作
    • 1.详情页面
    • 2.分类页面
    • 3.标签页
    • 4.归档
    • 5.关于

页面制作

1.详情页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>博客详情</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"><link rel="stylesheet" href="./static/css/me.css">
</head>
<body><!-- 导航 --><nav class="ui inverted attached segment m-padded-tb-mini"><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="home icon"></i> 首页</a><a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a><a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a><a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a><a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于</a><div class="right m-item item m-mobile-hide"><div class="ui icon inverted transparent input"><input type="text" placeholder="Search...."></input><i class="search link icon"></i></div></div></div></div><a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show"><i class="sidebar icon"></i></a></nav><!--  中间部分  --><div class="m-container-small m-padded-tb-big"><div class="ui container"><div class="ui top attached segment"><!-- 头部 --><div class="ui horizontal link list"><div class="item"><img src="https://picsum.photos/id/1/100/100" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">观山奇</a></div></div><div class="item">日期：2021-6-10</div><div class="item">浏览量：1000+</div></div></div><div class="ui attached segment"><!-- 图片 --><img src="https://picsum.photos/id/1/800/400" class="ui rounded fluid image" alt=""></div><div class="ui padded attached segment"><!-- 内容 --><div class="ui right aligned basic segment"><div class="ui orange basic label">原创</div></div><h2 class="ui center aligned header">你真的理解什么是财富自由吗？</h2><div style="padding-bottom: 2em;" id="content" class="m-padded-lr-responsive"><h1>1</h1><p>  正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p><h1>2</h1><p>  正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p><h1>3</h1><p>  正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p></div><div class="m-padded-lr-responsive"><!-- 标签 --><div class="ui basic teal left pointing label">方法论</div></div><span><!-- 赞赏 --><div class="ui center aligned basic segment"><button id="payBtn" class="ui orange basic circular button">赞赏</button></div><div class="ui payQR flowing popup transition hidden"><div class="ui orange basic label"><div class="ui images" style="font-size: inherit !important;"><div class="image" ><img src="./static/images/QR_csdn.png" alt="" class="ui rounded bordered image" style="width: 120px;"><div>支付宝</div></div><div class="image"><img src="./static/images/QR_csdn.png" alt="" class="ui rounded bordered image" style="width: 120px;"><div>微信</div></div></div></div></div></span></div><div class="ui attached positive message"><!-- 说明 --><div class="ui middle aligned grid"><div class="eleven wide column"><ul class="list"><li>作者：观山奇1号机</li><li>发表时间：2021-06-11 16：19</li><li>版权声明：转载需标注</li></ul></div><div class="five wide column"><img src="./static/images/QR_csdn.png" alt="" class="ui right floated rounded bordered image" style="width: 110px;"></div></div></div><div class="ui bottom attached segment"><!-- 评论 --><div class="ui teal segment"><div class="ui comments"><h3 class="ui dividing header">评论</h3><div class="comment"><a class="avatar"><img src="https://picsum.photos/id/1/100/100"></a><div class="content"><a class="author">Matt</a><div class="metadata"><span class="date">Today at 5:42PM</span></div><div class="text">How artistic!</div><div class="actions"><a class="reply">回复</a></div></div></div><div class="comment"><a class="avatar"><img src="https://picsum.photos/id/1/100/100"></a><div class="content"><a class="author">Elliot Fu</a><div class="metadata"><span class="date">Yesterday at 12:30AM</span></div><div class="text"><p>This has been very useful for my research. Thanks as well!</p></div><div class="actions"><a class="reply">回复</a></div></div><div class="comments"><div class="comment"><a class="avatar"><img src="https://picsum.photos/id/1/100/100"></a><div class="content"><a class="author">Jenny Hess</a><div class="metadata"><span class="date">Just now</span></div><div class="text">Elliot you are always so right :)</div><div class="actions"><a class="reply">回复</a></div></div></div></div></div><div class="comment"><a class="avatar"><img src="https://picsum.photos/id/21/100/100"></a><div class="content"><a class="author">Joe Henderson</a><div class="metadata"><span class="date">5 days ago</span></div><div class="text">Dude, this is awesome. Thanks so much</div><div class="actions"><a class="reply">回复</a></div></div></div></div></div><div class="ui form"><div class="field"><textarea name="content" placeholder="请输入评论信息..."></textarea></div><div class="fields"><div class="field m-mobile-wide m-margin-btn-small"><div class="ui left icon input"><i class="user icon"></i><input type="text" name="nickname" placeholder="姓名"></div></div><div class="field m-mobile-wide m-margin-btn-small"><div class="ui left icon input"><i class="mail icon"></i><input type="text" name="email" placeholder="邮箱"></div></div><div class="field m-mobile-wide m-margin-btn-small"><button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button></div></div></div></div></div></div><!-- 底部 --><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/QR_csdn.png" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a></div></div><div class="three wide column"><h4 class="ui inverted header">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email：tyaojoy@foxmail.com</a><a href="#" class="item">QQ：211163529</a></div></div><div class="seven wide column"><h4 class="ui inverted header">Blog</h4><div class="ui inverted link list"><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 Blog Designed by 观山奇</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});$('#payBtn').popup({popup: $('.payQR.popup'),on: 'click',position: 'bottom center'})</script>
</body>
<!--二维码：https://cli.im/url/info?0297762c270418e77178bc4e7a61378b-->
<!-- 背景图片：https://www.toptal.com/designers/subtlepatterns/ -->
</html>

2.分类页面

分类页面所使用到的元素，大部分都是之前用到的，直接复用就行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>分类</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"><link rel="stylesheet" href="./static/css/me.css">
</head>
<body><!-- 导航 --><nav class="ui inverted attached segment m-shadow-small m-padded-tb-mini"><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="home icon"></i> 首页</a><a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a><a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a><a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i> 归档</a><a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i> 关于</a><div class="right m-item item m-mobile-hide"><div class="ui icon inverted transparent input"><input type="text" placeholder="Search...."></input><i class="search link icon"></i></div></div></div></div><a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show"><i class="sidebar icon"></i></a></nav><!--  中间部分  --><div class="m-container-small m-padded-tb-big"><div class="ui container"><!-- header --><div class="ui 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">共<h3 class="ui orange header m-text-thin m-inline-block">14</h3>篇</div></div></div><!-- 标签 --><div class="ui attached segment m-padded-tb-large"><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic button">思考和感悟</a><div class="ui basic left pointing label">23</div></div><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic teal button">开发者手册</a><div class="ui basic teal left pointing label">21</div></div><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic button">思</a><div class="ui basic left pointing label">23</div></div><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic button">悟</a><div class="ui basic left pointing label">23</div></div><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic button">学习</a><div class="ui basic left pointing label">23</div></div><div class="ui labeled button m-margin-tb-tiny"><a href="#" class="ui basic button">思考</a><div class="ui basic left pointing label">23</div></div></div><!--  --><div class="ui top attached teal segment"><div style="padding-left: 2em" class="ui vertical segment m-mobile-lr-clear m-padded-tb-large"><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="https://picsum.photos/id/1/100/100" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">观山奇</a></div></div><div class="item"><i class="calendar icon"></i>2021-6-10</div><div class="item"><i class="eye icon"></i>1000+</div></div></div><div class="five wide column"><a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">认知升级</a></div></div></div><div class="five wide column"><a href="#" target="_blank"><img src="https://picsum.photos/id/1/800/400" alt="" class="ui rounded image"></a></div>  </div></div><div style="padding-left: 2em" class="ui vertical segment m-mobile-lr-clear m-padded-tb-large"><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="https://picsum.photos/id/1/100/100" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">观山奇</a></div></div><div class="item"><i class="calendar icon"></i>2021-6-10</div><div class="item"><i class="eye icon"></i>1000+</div></div></div><div class="five wide column"><a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">认知升级</a></div></div></div><div class="five wide column"><a href="#" target="_blank"><img src="https://picsum.photos/id/1/800/400" alt="" class="ui rounded image"></a></div>  </div></div><div style="padding-left: 2em" class="ui vertical segment m-mobile-lr-clear m-padded-tb-large"><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="https://picsum.photos/id/1/100/100" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">观山奇</a></div></div><div class="item"><i class="calendar icon"></i>2021-6-10</div><div class="item"><i class="eye icon"></i>1000+</div></div></div><div class="five wide column"><a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">认知升级</a></div></div></div><div class="five wide column"><a href="#" target="_blank"><img src="https://picsum.photos/id/1/800/400" alt="" class="ui rounded image"></a></div>  </div></div><div style="padding-left: 2em" class="ui vertical segment m-mobile-lr-clear m-padded-tb-large"><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="https://picsum.photos/id/1/100/100" alt="" class="ui avatar image"><div class="content"><a href="#" class="header">观山奇</a></div></div><div class="item"><i class="calendar icon"></i>2021-6-10</div><div class="item"><i class="eye icon"></i>1000+</div></div></div><div class="five wide column"><a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">认知升级</a></div></div></div><div class="five wide column"><a href="#" target="_blank"><img src="https://picsum.photos/id/1/800/400" alt="" class="ui rounded image"></a></div>  </div></div></div><!-- footer --><div class="ui bottom attached segment"><div class="ui middle aligned two column grid"><div class="column"><a href="#" class="ui mini teal basic button">上一页</a></div><div class="right aligned column"><a href="#" class="ui mini teal basic button">下一页</a></div></div></div></div></div><!-- 底部 --><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/QR_csdn.png" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header">最新博客</h4><div class="ui inverted link list"><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a><a href="#" class="item">用户故事(User Story)</a></div></div><div class="three wide column"><h4 class="ui inverted header">联系我</h4><div class="ui inverted link list"><a href="#" class="item">Email：tyaojoy@foxmail.com</a><a href="#" class="item">QQ：211163529</a></div></div><div class="seven wide column"><h4 class="ui inverted header">Blog</h4><div class="ui inverted link list"><p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 Blog Designed by 观山奇</p></div></footer><script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script><script>$('.menu.toggle').click(function () {$('.m-item').toggleClass('m-mobile-hide');});</script>
</body>
<!--二维码：https://cli.im/url/info?0297762c270418e77178bc4e7a61378b-->
<!-- 背景图片：https://www.toptal.com/designers/subtlepatterns/ -->
</html>

3.标签页

因为标签页和分类页基本相同就没贴代码

4.归档

5.关于

个人博客制作——其他页面相关推荐

  1. 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...

    前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...

  2. 博客园修改页面显示样式

    博客园修改页面显示样式 一.总结 HTML源码吧(FireBug或审查元素) 火狐浏览器下通过FireBug插件来查看源码 二.打造自己的博客园页面 刚接触博客园时,总有一种要定制打造自己博客页面的冲 ...

  3. 博客园修改页面显示样式css

    博客园修改页面显示样式css 一.总结 二. 博客园修改页面显示样式css 1.点管理 2.点设置 3.在页面定制css代码中加入你想要改变样式的css代码即可 不会写css的下面有代码示例,直接复制 ...

  4. 博客系统程序(页面设计)

    咱们学习javaEE的目的就是完成一个网站.在当前学习的基础上,已经可以完成我们的博客系统的页面的设计了!!! 首先我们要进行统筹规划: 首先我们的博客页面将会有4个页面: 1.博客列表页 2.博客详 ...

  5. 实现一个博客系统(前端页面设计)

    博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...

  6. 博客系统前端页面代码实现及页面展示(代码版)

    hi,大家好,今天为大家带来博客系统的前端代码及页面展示 我们使用VS code 这个编码工具来编写代码 博客系统前端页面分为四个部分 1.博客列表页 2.博客编辑页 3.博客登录页 4.博客详情页

  7. 博客系统（页面设计）

    目录 博客系统(页面设计) 效果预览 博客列表页 博客详情页 博客登录页 博客编辑页 实现博客列表 实现导航栏 实现版心 实现左侧个人信息 实现博客列表 实现博客详情页 引入导航栏(HTML.CSS) ...

  8. 关于给hexo博客增加相册页面（实现瀑布流相册，实现加密相册）

    前言: 本文是关于给自己的博客网站添加一个相册页面,并且实现瀑布流相册效果,基于matery主题,其他主题亦可参考. 首先,直接上效果图,详细浏览地址: 关于给hexo博客增加相册页面(实现瀑布流相册 ...

  9. 关于给hexo博客增加随笔页面（并对页面仿信纸作业纸样式修饰）

    前言: 本文是给hexo博客增加随笔页面,并对页面仿信纸作业纸样式修饰,基于matery主题,其他主题亦可参考. 至于为什么要写本文,是因为有一天,突然有了一个想法,想把以前初高中写的那些作文,整理一 ...

最新文章

  1. Python培训入门基础知识学什么?
  2. [转]如何将属性表嵌入对话框中显示
  3. 查看虚拟机cpu型号_虚拟机管理器（Virtual Machine Manager）简介 | Linux 中国
  4. matlab集群搭建问题
  5. 【数据结构笔记03】算法实例：最大子列和
  6. java Comparable 和 Cloneable接口
  7. DenseNet翻译：Densely Connected Convolutional Networks
  8. php源码添加多国语言包,为win7系统添加多国语言包的方法
  9. Spark写入Hudi报分区列乱码问题java.net.URISyntaxException: Illegal character in path at index 46:
  10. 【Unity】Obi插件系列（八）—— Obi Softbody
  11. logo版权注册流程
  12. python turtle画动物_用python画简单的动物
  13. 软件体系结构-03-层次体系结构概述
  14. 1002: 简单多项式求值 ZZULIOJ
  15. 2019中国智能制造十大发展趋势
  16. MATLAB基于Canny边缘检测的车牌识别
  17. HTML a标签之空链接
  18. 练习-Java字符串之String类常用方法之文件名与邮箱验证
  19. 富士康员工盗卖iPhone部件3年赚3亿；张朝阳称工作只为赚钱太low；国产统一操作系统 UOS 正全面适配 | EA周报...
  20. 无线传感器网络Dv-hop定位算法

热门文章

  1. Unity简易实现角色脚下光圈
  2. MYSQL中如何创建存储过程和存储函数（上篇）
  3. mysql point 经纬度_lbs - Mysql POINT类型数据，怎么计算经纬度偏差
  4. cv2的简单使用（持续更新）
  5. 超详细Vue Devtools的下载和安装——Vue的调试工具
  6. HTTP/HTTP/HTTP
  7. ios11非越狱如何安装ipa
  8. js 获取ip地址进行跳转
  9. 企业信息化建设都包括哪些方面？
  10. 数据分析之爬虫实例-获取天气AQI数据-附python代码