【Web 三件套】个人简单博客系统页面搭建（附源码）

转x33g5p2x  于2022-02-20 转载在 其他  
字(13.9k)|赞(0)|评价(0)|浏览(364)

1. 成品展示

以下为个人搭建的一个简单博客系统页面，以后会不断改进，并且与后端结合，形成一个完整的博客系统

2. 知识准备

该博客系统页面是由 HTML + CSS + JavaScript 搭建的，如果没有了解过这些知识的友友，可以通过本人之前写好的几篇相关文章入门

  • 文章一：《超多动图带你入门 HTML》
  • 文章二：《两万字入门 CSS》
  • 文章三：《JavaScript 入门知识》
  • 文章四：《JavaScript 的数组、函数、对象》
  • 文章五：《JavaScript WebAPI 介绍》

3. 博客系统页面搭建

3.1 基本介绍

该博客系统页面现由4个部分组成，分别为：博客列表页、博客详情页、博客登录页、博客编辑页

针对每个页面后面都会进行页面和代码的展示，并且代码中含有个人的注释。为了方便下载使用，下面附上该博客系统页面的 Gitee 链接

Gitee 链接：https://gitee.com/bbbbbge/blog-system

3.2 博客列表页

页面展示：

页面元素 HTML 代码：blog_list.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>博客列表页</title>
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog_list.css">
  10. </head>
  11. <body>
  12.     <!-- 导航栏 -->
  13.     <div class="nav">
  14.         <img src="image/log.png" alt="">
  15.         <span class="title">我的博客系统</span>
  16.          <!-- 使用 span 把左右两侧的元素给撑开 -->
  17.          <span class="spacer"></span>
  18.         <a href="blog_list.html">主页</a>
  19.         <a href="blog_edit.html">写博客</a>
  20.         <a href="blog_login.html">注销</a>
  21.     </div>
  22.     <!-- 版心 -->
  23.     <div class="container">
  24.         <!-- 左侧区域，显示用户信息 -->
  25.         <div class="container-left">
  26.             <!-- 用户详情 -->
  27.             <div class="card">
  28.                 <!-- 用户的头像 -->
  29.                 <img src="image/head.jpg" alt="">
  30.                 <!-- 用户名 -->
  31.                 <h3>吞吞吐吐大魔王</h3>
  32.                 <!-- 其它信息 -->
  33.                 <a href="https://blog.csdn.net/weixin_51367845?type=blog">CSDN 地址</a>
  34.                 <a href="#">GitHub 地址</a>
  35.                 <!-- 文章分类 -->
  36.                 <div class="counter">
  37.                     <span>文章</span>
  38.                     <span>分类</span>
  39.                 </div>
  40.                 <div class="counter">
  41.                     <span>2</span>
  42.                     <span>1</span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <!-- 右侧区域，显示博客列表 -->
  47.         <div class="container-right">
  48.             <!-- 每个 blog 代表一篇博客 -->
  49.             <div class="blog">
  50.                 <div class="title">第一篇博客</div>
  51.                 <div class="date">2022-2-16</div>
  52.                 <div class="desc">
  53.                     中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
  54.                 </div>
  55.                 <a href="blog_detail.html" class="detail">查看全文&gt;&gt;</a>
  56.             </div>
  57.             <div class="blog">
  58.                 <div class="title">第二篇博客</div>
  59.                 <div class="date">2022-2-16</div>
  60.                 <div class="desc">
  61.                     中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
  62.                 </div>
  63.                 <a href="blog_detail.html" class="detail">查看全文&gt;&gt;</a>
  64.             </div>
  65.         </div>
  66.     </div>
  67. </body>
  68. </html>

专属页面样式 CSS 代码：blog_list.css

  1. /* 这个 CSS 专门针对博客列表页来设置样式 */
  3. .blog {
  4.     width: 100%;
  5.     padding: 10px 20px;
  6. }
  8. /* 博客的标题 */
  9. .blog .title {
  10.     text-align: center;
  11.     font-size: 25px;
  12.     font-weight: 700;
  13.     padding-top: 10px;
  14.     padding-bottom: 5px;
  15. }
  17. /* 博客的日期 */
  18. .blog .date {
  19.     text-align: center;
  20.     padding-bottom: 10px;
  21.     color: grey;
  22. }
  24. /* 博客的描述 */
  25. .blog .desc {
  26.     text-indent: 2em;
  27. }
  29. /* 查看博客详情的按钮 */
  30. .blog .detail {
  31.     display: block;
  32.     width: 120px;
  33.     color: grey;
  34.     height: 30px;
  35.     /* 设置边框 */
  36.     border: 2px solid grey;
  37.     /* 文字水平居中 */
  38.     text-align: center;
  39.     /* 文字垂直居中 */
  40.     line-height: 30px;
  41.     /* 去掉下划线 */
  42.     text-decoration: none;
  43.     /* 让按钮来到屏幕中间 */
  44.     margin: 10px auto;
  45.     /* 加上一个过度效果 */
  46.     transition: all 1s;
  47. }
  49. /* 实现鼠标悬停在按钮上时有一个背景色切换的效果 */
  50. .blog .detail:hover {
  51.     background-color: grey;
  52.     color: white;
  53. }

3.3 博客详情页

页面展示：

页面元素 HTML 代码：blog_detail.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>博客详情页</title>
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog_detail.css">
  10. </head>
  11. <body>
  12.     <!-- 导航栏 -->
  13.     <div class="nav">
  14.         <img src="image/log.png" alt="">
  15.         <span class="title">我的博客系统</span>
  16.          <!-- 使用 span 把左右两侧的元素给撑开 -->
  17.          <span class="spacer"></span>
  18.         <a href="blog_list.html">主页</a>
  19.         <a href="blog_edit.html">写博客</a>
  20.         <a href="blog_login.html">注销</a>
  21.     </div>
  22.     <!-- 版心 -->
  23.     <div class="container">
  24.         <!-- 左侧区域，显示用户信息 -->
  25.         <div class="container-left">
  26.             <!-- 用户详情 -->
  27.             <div class="card">
  28.                 <!-- 用户的头像 -->
  29.                 <img src="image/head.jpg" alt="">
  30.                 <!-- 用户名 -->
  31.                 <h3>吞吞吐吐大魔王</h3>
  32.                 <!-- 其它信息 -->
  33.                 <a href="https://blog.csdn.net/weixin_51367845?type=blog">CSDN 地址</a>
  34.                 <a href="#">GitHub 地址</a>
  35.                 <!-- 文章分类 -->
  36.                 <div class="counter">
  37.                     <span>文章</span>
  38.                     <span>分类</span>
  39.                 </div>
  40.                 <div class="counter">
  41.                     <span>2</span>
  42.                     <span>1</span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <!-- 右侧区域，显示博客列表 -->
  47.         <div class="container-right">
  48.             <!-- 使用这个 div 来放博客内容 -->
  49.             <div class="blog-content">
  50.                 <!-- 博客的标题 -->
  51.                 <h3>我的第一篇博客</h3>
  52.                 <!-- 博客的日期 -->
  53.                 <div class="date">2022-2-16</div>
  54.                 <!-- 博客的内容 -->
  55.                 <div class="detail">
  56.                     <p>
  57.                         中国人的性情是喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。
  58.                     </p>
  59.                     <p>
  60.                         而忽而这些都空虚了，但有时故意地填以没奈何的自欺的希望。希望，希望，用这希望的盾，抗拒那空虚中的暗夜的袭来，虽然盾后面也依然是空虚中的暗夜。
  61.                     </p>
  62.                     <p>
  63.                         如果痛苦换来的是结识真理、坚持真理，就应自觉的欣然承受，那时，也只有那时，痛苦穿掘着灵魂的深处，使人受了精神底苦刑而得到创伤，又即从这得伤和养伤和愈合中，得到苦的涤除，而上了苏生的路。
  64.                     </p>
  65.                     <p>
  66.                         当我沉默着的时候，我觉得充实；我将开口，同时感到空虚。过去的生命已经死亡。我对于这死亡有大欢喜，因为我借此知道它曾经存活。死亡的生命已经朽腐。我对于这朽腐有大欢喜，因为我借此知道它还非空虚。
  67.                     </p>
  68.                 </div>
  69.         </div>
  70. </body>
  71. </html>

专属页面样式 CSS 代码：blog_detail.css

  1. /* 这个 CSS 文件是用来放博客详情页的专属样式 */
  3. .blog-content {
  4.     padding: 30px;
  5. }
  7. /* 博客标题 */
  8. .blog-content h3 {
  9.     text-align: center;
  10.     padding-top: 40px;
  11.     padding-bottom: 20px;
  12.     font-size: 25px;
  13. }
  15. /* 博客日期 */
  16. .blog-content .date {
  17.     text-align: center;
  18.     padding-bottom: 10px;
  19.     color: grey;
  20. }
  22. /* 博客内容 */
  23. .blog-content p {
  24.     text-indent: 2em;
  25.     padding: 10px 0;
  26. }

3.4 博客登录页

页面展示：

页面元素 HTML 代码：blog_login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>登录页</title>
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog-login.css">
  10. </head>
  11. <body>
  12.     <!-- 导航栏 -->
  13.     <div class="nav">
  14.         <img src="image/log.png" alt="">
  15.         <span class="title">我的博客系统</span>
  16.          <!-- 使用 span 把左右两侧的元素给撑开 -->
  17.          <span class="spacer"></span>
  18.         <a href="blog_list.html">主页</a>
  19.         <a href="blog_edit.html">写博客</a>
  20.         <a href="blog_login.html">注销</a>
  21.     </div>
  22.     <!-- 登录页面的版心 -->
  23.     <div class="login-container">
  24.         <div class="login-dialog">
  25.             <h3>登录</h3>
  26.             <div class="row1">
  27.                 <span>用户名</span>
  28.                 <input type="text" id="username">
  29.             </div>
  30.             <div class="row1">
  31.                 <span>密码</span>
  32.                 <input type="password" id="password">
  33.             </div>
  34.             <div class="row2">
  35.                 <input type="button" value="提交" id="submit">
  36.             </div>
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>

专属页面样式 CSS 代码：blog_login.css

  1. /* 这个 CSS 文件是放登陆页面的专属样式 */
  3. /* 1. 设置版心，让这个版心将页面填充满 */
  4. /* 2. 在版心中间位置，设置一个登陆区域 */
  5. .login-container {
  6.     width: 100%;
  7.     height: calc(100% - 50px);
  9.     display: flex;
  10.     justify-content: center;
  11.     align-items: center;
  12. }
  14. .login-container .login-dialog {
  15.     width: 400px;
  16.     height: 280px;
  17.     background-color: rgba(255, 255, 255, 0.3);
  18.     border-radius: 20px;
  19. }
  21. .login-dialog h3 {
  22.     text-align: center;
  23.     padding: 30px;
  24.     font-size: 25px;
  25. }
  27. .login-dialog .row1 {
  28.     height: 40px;
  29.     display: flex;
  30.     align-items: center;
  31.     justify-content: center;
  32. }
  34. .login-dialog .row2 {
  35.     height: 40px;
  36.     display: flex;
  37.     align-items: center;
  38.     justify-content: center;
  39.     padding-top: 30px;
  40. }
  42. .login-dialog .row1 span {
  43.     width: 80px;
  44.     font-weight: 700;
  45. }
  47. .login-dialog .row1 input {
  48.     width: 200px;
  49.     height: 30px;
  50.     font-size: 15px;
  51.     padding-left: 10px;
  52.     background-color: rgba(255, 255, 255, 0.3);
  53.     /* 去掉边框 */
  54.     border: none;
  55.     /* 去掉轮廓线（选中输入框时，外面的黑边） */
  56.     outline: none;
  57. }
  59. .login-dialog .row2 input {
  60.     width: 280px;
  61.     height: 35px;
  62.     border-radius: 8px;
  63.     font-size: 20px;
  64.     background-color: rgba(41, 83, 149, 0.7);
  65.     border: none;
  66. }
  68. .login-dialog .row2 input:active {
  69.     background-color: black;
  70.     color: white;
  71. }

3.5 博客编辑页

页面展示：

页面元素 HTML 代码：blog_edit.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>博客编辑页</title>
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/blog_edit.css">
  10.     <!-- 引入依赖 -->
  11.     <link rel="stylesheet" href="editor.md-master/css/editormd.min.css">
  12.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  13.     <script src="editor.md-master/lib/marked.min.js"></script>
  14.     <script src="editor.md-master/lib/prettify.min.js"></script>
  15.     <script src="editor.md-master/editormd.js"></script>
  16. </head>
  17. <body>
  18.     <!-- 导航栏 -->
  19.     <div class="nav">
  20.         <img src="image/log.png" alt="">
  21.         <span class="title">我的博客系统</span>
  22.          <!-- 使用 span 把左右两侧的元素给撑开 -->
  23.          <span class="spacer"></span>
  24.         <a href="blog_list.html">主页</a>
  25.         <a href="blog_edit.html">写博客</a>
  26.         <a href="blog_login.html">注销</a>
  27.     </div>
  28.     <!-- 版心 -->
  29.     <div class="blog-edit-container">
  30.         <!-- 标题编辑区 -->
  31.         <div class="title">
  32.             <input type="text" placeholder="在这里写下文章标题" id="title">
  33.             <input type="button" value="发布文章" id="submit">
  34.         </div>
  35.         <!-- 内容编辑区 -->
  36.         <div id="editor">
  38.         </div>
  39.     </div>
  41.     <script>
  42.         // 初始化 editor.md
  43.         let editor = editormd("editor", {
  44.             // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
  45.             width: "100%",
  46.             // 设定编辑高度
  47.             height: "500px",
  48.             // 编辑页中的初始化内容
  49.             markdown: "# 在这里写下一篇博客",
  50.             //指定 editor.md 依赖的插件路径
  51.             path: "editor.md-master/lib/"
  52.         });
  53.     </script>
  54. </body>
  55. </html>

专属页面样式 CSS 代码：blog_edit.css

  1. /* 这个 CSS 文件放博客编辑的专属样式 */
  3. /* 博客编辑页的版心 */
  4. .blog-edit-container {
  5.     width: 1000px;
  6.     height: calc(100% - 50px);
  7.     margin: 0 auto;
  8. }
  10. /* 标题编辑区 */
  11. .blog-edit-container .title {
  12.     margin-top: 20px;
  13.     width: 100%;
  14.     height: 60px;
  15.     display: flex;
  16.     align-items: center;
  17.     justify-content: space-between;
  18. }
  20. .blog-edit-container .title #title {
  21.     width: 795px;
  22.     height: 50px;
  23.     border-radius: 10px;
  24.     padding-left: 20px;
  25.     border: none;
  26.     outline: none;
  27.     background-color: rgba(41, 83, 149, 0.3);
  28.     font-size: 15px;
  29. }
  31. .blog-edit-container .title #submit {
  32.     width: 200px;
  33.     height: 50px;
  34.     border-radius: 10px;
  35.     border: none;
  36.     outline: none;
  37.     background-color: rgba(255, 192 , 153, 0.4);
  38.     font-size: 20px;
  39. }
  41. .blog-edit-container .title #submit:active {
  42.     background-color: rgba(41, 83, 149, 0.3);
  43. }
  45. #editor {
  46.     border-radius: 10px;
  47.     border: none;
  48.     opacity: 0.7;
  49. }

3.6 公共页面样式

公共页面样式 CSS 代码：common.css

  1. /* 这个文件里面放4个页面公共的一些样式，比如背景、导航栏等 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. html, body {
  10.     /* 和父元素的一样高，body 的父亲是 html，html 的父亲是浏览器窗口 */
  11.     height: 100%;
  12.     /* 页面背景 */
  13.     background-image: url(../image/background.jpg);
  14.     background-position: center center;
  15.     background-repeat: no-repeat;
  16.     background-size: cover;
  17. } 
  19. /* 导航栏 */
  20. .nav {
  21.     width: 100%;
  22.     height: 50px;
  23.     background-color: rgba(50, 50, 50, 0.2);
  24.     color: #fff;
  25.     display: flex;
  26.     justify-content: start;
  27.     align-items: center;
  28. }
  30. /* 导航栏中的 log */
  31. .nav img {
  32.     width: 40px;
  33.     height: 40px;
  34.     margin-left: 30px;
  35.     margin-right: 10px;
  36. }
  38. /* 导航栏中的标题 */
  39. .nav .title {
  40.     width: 120px;
  41. }
  43. /* 导航栏中的占位符 */
  44. .nav .spacer {
  45.     height: 40px;
  46.     width: calc(100% - 370px);
  47. }
  49. /* 导航栏中的链接 */
  50. .nav a {
  51.     width: 60px;
  52.     margin: 20px;
  53.     text-decoration: none;
  54.     color: white;
  55. }
  57. /* 版心的样式 */
  58. .container {
  59.     height: calc(100% - 50px);
  60.     width: 1000px;
  61.     margin: 0 auto;
  62.     /* 为了让版心里面的子元素能够以左右布局的方式显示，使用 flex 布局 */
  63.     display: flex;
  64.     align-items: center;
  65.     justify-content: space-between;
  66. }
  68. /* 左侧区域样式 */
  69. .container .container-left {
  70.     height: 100%;
  71.     width: 200px;
  72. }
  74. /* 右侧区域样式 */
  75. .container .container-right {
  76.     height: 100%;
  77.     width: 795px;
  78.     background-color: rgba(255, 255, 255, 0.3);
  79.     border-radius: 20px;
  80. }
  82. /* 用户信息卡片，也会在多个页面中用到 */
  83. .card {
  84.     background-color: rgba(255, 255, 255, 0.3);
  85.     border-radius: 20px;
  86.     padding: 30px;
  87. }
  89. /* 用户头像 */
  90. .card img {
  91.     width: 140px;
  92.     height: 140px;
  93.     border-radius: 50%;
  94. }
  96. /* 用户名 */
  97. .card h3 {
  98.     text-align: center;
  99.     padding: 10px 0;
  100. }
  102. /* 其它信息 */
  103. .card a {
  104.     /* a 标签是行内元素，设置尺寸、边距都可能失效，要转成块级元素 */
  105.     display: block;
  106.     text-decoration: none;
  107.     text-align: center;
  108.     color: grey;
  109.     padding: 3px;
  110. }
  112. .card .counter {
  113.     display: flex;
  114.     justify-content: space-around;
  115.     font-size: 15px;
  116.     padding-top: 5px;
  117. }

3.7 markdown 编辑器引入

在博客编辑页中含有一个 markdown 编辑器，这个是直接引入了一个叫 editor.md 的开源的页面 markdown 编辑器组件，大家也可以使用其它的编辑器组件

引入 editor.md 步骤：

  1. 下载 editor.md
    大家直接进入该项目的官网进行下载即可

官网地址为：https://pandao.github.io/editor.md/

  1. 将下载好的 editor.md 接压缩到该博客项目中

  1. 在博客编辑页中引入 editor.md 依赖
  1. <!-- 引入依赖 -->
  2. <link rel="stylesheet" href="editor.md-master/css/editormd.min.css">
  3. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  4. <script src="editor.md-master/lib/marked.min.js"></script>
  5. <script src="editor.md-master/lib/prettify.min.js"></script>
  6. <script src="editor.md-master/editormd.js"></script>
  1. 在博客编辑页中，写个 JS 对 editor.md 进行初始化
  1. // 初始化 editor.md
  2. let editor = editormd("editor", {
  3.     // 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖
  4.     width: "100%",
  5.     // 设定编辑高度
  6.     height: "500px",
  7.     // 编辑页中的初始化内容
  8.     markdown: "# 在这里写下一篇博客",
  9.     //指定 editor.md 依赖的插件路径
  10.     path: "editor.md-master/lib/"
  11. });

通过以上步骤，就可以将 editor.md 该 markdown 编辑器引入我们的博客编辑页了

4. 总结

该博客系统页面只是运用前段时间学习的前端知识做出来的一个简单的页面，往后会通过不断的学习来对该博客系统进行补充，期待它的成品！

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://t4dmw.blog.csdn.net/article/details/123031433

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptHtmlcss前端前端基础

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com