• 简单的博客系统(CSS+HTML)

    目录

    一、简单介绍

    1、博客系统简介

    二、博客列表页

    三、用户登录页

     四、博客详情页

     五、博客编辑页

    六、相关代码

    一、简单介绍

    1、博客系统简介

    用户登录页场景

    博客列表页场景

    博客详情页场景

    博客编辑页场景

    每个场景都是由镀多个功能区组成的

    二、博客列表页

    1. html>
    2. <html lang="zh-hans">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>博客列表title>
    6.     <link rel="stylesheet" href="./css/List.css">
    7. head>
    8. <body>
    9. <div class="导航栏">
    10.     <div class="导航栏左边">
    11.         <div class="logo-shell">
    12.             <img class="logo" src="./img/logo.jpg">
    13.         div>
    14.         我的博客系统
    15.     div>
    16.     <div class="导航栏右边">
    17.         <a href="/List.html">主页a>
    18.         <a href="/edit.html">写博客a>
    19.         <a href="/login.html">注销a>
    20.     div>
    21. div>
    22. <div class="下面区域">
    23.     <div class="用户信息展示">
    24.         <div class="头像展示区">
    25.             <img src="./img/avatar.jpg">
    26.         div>
    27.         <div class="用户名称">小熊吃糖div>
    28.         <div class="git地址">
    29.             <a href="https://gitee.com/ren-xiaoxiong">gitee 地址a>
    30.         div>
    31.         <div class="统计信息">
    32.             <div class="文章数量区域">
    33.                 <div>文章div>
    34.                 <div class="文章数量">2div>
    35.             div>
    36.             <div class="分类数量区域">
    37.                 <div>分类div>
    38.                 <div class="分类数量">2div>
    39.             div>
    40.         div>
    41.     div>
    42.     <div class="博客列表展示">
    43.         <div class="博客项">
    44.             <h3 class="博客标题">我的第一篇博客h3>
    45.             <p class="发表日期">2022-08-09 09:31:28p>
    46.             <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    47.                 Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
    48.                 similique quaerat vel. Facere,et.p>
    49.             <div class="按钮区域"><a href="/edit.html">查看全文 >>a>div>
    50.         div>
    51.         <div class="博客项">
    52.             <h3 class="博客标题">我的第二篇博客h3>
    53.             <p class="发表日期">2022-08-11 16:31:35p>
    54.             <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    55.                 Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
    56.                 similique quaerat vel. Facere,et.p>
    57.             <div class="按钮区域"><a href="/edit.html">查看全文 >>a>div>
    58.         div>
    59.     div>
    60. div>
    61. body>
    62. html>
    1. @import "NavigationBar.css";
    2.  
    3. .下面区域 {
    4.     min-height: calc(100vh - 50px);
    5.     /* background-color: #215877; */
    6.  
    7.     display: flex;
    8.     align-items: flex-start;
    9.     justify-content: space-between;
    10.     padding: 8px 220px;
    11. }
    12.  
    13. .用户信息展示 {
    14.     width: 220px;
    15.     background-color: rgba(255, 255, 255, .6);
    16.     border-radius: 8px;
    17.     padding: 12px 0;
    18.     box-shadow: 0 0 5px #000;
    19. }
    20.  
    21. .用户信息展示 {
    22.     display: flex;
    23.     flex-direction: column;
    24.     gap: 12px;
    25.     align-items: center;
    26.     justify-content: space-between;
    27. }
    28.  
    29. .头像展示区 {
    30.     width: 100px;
    31.     height: 100px;
    32.     border-radius: 50%;
    33.     overflow: hidden;
    34. }
    35.  
    36. .头像展示区 img {
    37.     width: 100px;
    38. }
    39.  
    40. .用户名称 {
    41.     font-size: 24px;
    42.     font-weight: 700;
    43. }
    44.  
    45. .git地址 a {
    46.     color: #ea7a7a;
    47.     font-size: 14px;
    48.     font-style: italic;
    49. }
    50.  
    51. .统计信息 {
    52.     display: flex;
    53.     align-items: stretch;
    54.     justify-content: space-between;
    55.     gap: 18px;    /*间隔*/
    56. }
    57.  
    58. .文章数量区域,
    59. .分类数量区域 {
    60.     display: flex;
    61.     flex-direction: column;
    62.     align-items: center;
    63.     justify-content: space-between;
    64.     gap: 8px;
    65. }
    66.  
    67. .博客列表展示 {
    68.     min-height: calc(100vh - 50px - 8px - 8px);
    69.     width: calc(100% - 220px - 8px);
    70.     background-color: rgba(255, 255, 255, .6);
    71.     border-radius: 8px;
    72.     box-shadow: 0 0 5px #000;
    73.  
    74.     padding: 8px;
    75. }
    76. .博客项{
    77.     width: 100%;
    78.     margin: 12px;
    79.     display: flex;
    80.     flex-direction: column;
    81.     align-items: stretch;
    82.     justify-content: space-between;
    83.     gap: 8px;
    84. }
    85.  
    86. .博客标题{
    87.     text-align: center;
    88.     font-size: 24px;
    89.     font-weight: 900;
    90. }
    91.  
    92. .发表日期{
    93.     text-align: center;
    94.     color: #3ff159;
    95. }
    96.  
    97. .简介信息{
    98.   text-indent: 2em;
    99.     font-size: 16px;
    100. }
    101.  
    102. .按钮区域{
    103.     display: flex;
    104.     justify-content: center;
    105. }
    106.  
    107. .博客项 a{
    108.     width: 180px;
    109.     height: 40px;
    110.     line-height: 40px;
    111.     text-align: center;
    112.     font-size: 16px;
    113.     color: black;
    114.     text-decoration: none;
    115.     border: 2px solid #000;
    116. }

     导航栏的CSS

    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     box-sizing: border-box;
    5.     font-family: '宋体', fangsong;
    6.     font-size: 18px;
    7. }
    8.  
    9. body {
    10.     width: 100%;
    11.     min-height: 100vh;
    12.     /* background-color: #f519e3; */
    13.  
    14.     background-image: url(../img/background.jpg);
    15.     background-size: cover;
    16.     background-position: 0 -80px;   /* 大家如果自己找的背景图，可能要修改这里 */
    17.     background-repeat: no-repeat;
    18.     background-attachment: fixed;
    19. }
    20.  
    21. .导航栏 {
    22.     width: 100%;
    23.     height: 50px;
    24.     /* background-color: #95c766; */
    25.     background-color: rgba(154, 223, 223, .5);
    26.  
    27.     display: flex;
    28.     align-items: stretch;
    29.     justify-content: space-between;
    30.  
    31.     padding: 0 12px;
    32. }
    33.  
    34. .导航栏左边, .导航栏右边 {
    35.     display: flex;
    36.     align-items: center;
    37.     justify-content: space-between;
    38. }
    39.  
    40. .导航栏左边 > *,
    41. .导航栏右边 > * {
    42.     margin: 0 16px;
    43. }
    44.  
    45. .logo-shell {
    46.     width: 36px;
    47.     height: 36px;
    48.     border-radius: 50%;
    49.     overflow: hidden;
    50. }
    51.  
    52. .logo {
    53.     width: 36px;
    54.     height: 36px;
    55. }
    56.  
    57. .导航栏 {
    58.     color: #fff;
    59. }
    60.  
    61. .导航栏 a {
    62.     color: #fff;
    63.     text-decoration: none;
    64. }
    65.

    三、用户登录页

    1. html>
    2. <html lang="zh-hans">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>博客列表title>
    6.     <link rel="stylesheet" href="./css/login.css">
    7. head>
    8. <body>
    9. <div class="导航栏">
    10.     <div class="导航栏左边">
    11.         <div class="logo-shell">
    12.             <img class="logo" src="./img/logo.jpg">
    13.         div>
    14.         我的博客系统
    15.     div>
    16.     <div class="导航栏右边">
    17.         <a href="/List.html">主页a>
    18.         <a href="/edit.html">写博客a>
    19.         <a href="/login.html">注销a>
    20.     div>
    21. div>
    22. <div class="下面区域">
    23.     
    24.     
    25.     <form method="post" action="/login.do">
    26.         <h1>登录h1>
    27.         <label>
    28.             用户名
    29.             <input type="text" name="username">
    30.         label>
    31.         <label>
    32.             密码
    33.             <input type="password" name="password">
    34.         label>
    35.         <button>提交button>
    36.     form>
    37. div>
    38. body>
    39. html>
    1. @import "NavigationBar.css";
    2.  
    3. .下面区域{
    4.     min-height: calc(100vh - 50px);
    5.     display: flex;
    6.     justify-content: center;
    7.     align-items: center;
    8. }
    9.  
    10. .下面区域  form{
    11.     background-color: rgba(255,255,255,.6);
    12.     padding: 16px;
    13.     border-radius: 8px;
    14.     box-shadow: 0 0 5px #000;
    15.  
    16.     width: 600px ;
    17.     display: flex;
    18.     flex-direction: column;
    19.     align-items: stretch;
    20.     justify-content: space-between;
    21. }
    22.  
    23. .下面区域  form > *{
    24.     margin: 12px;
    25. }
    26.  
    27. .下面区域 h1{
    28.     text-align: center;
    29. }
    30.  
    31. .下面区域 label{
    32.     display: flex;
    33.     justify-content: space-between;
    34.     align-items: center;
    35. }
    36.  
    37. .下面区域 input{
    38.     width: 400px;
    39.     border: none;
    40.     outline: none;
    41.     border-radius: 4px;
    42. }
    43.  
    44. .下面区域 input,
    45. .下面区域 button{
    46.     height: 30px;
    47.     line-height: 30px;
    48. }
    49.  
    50. .下面区域 button{
    51.     background-color: #91e59e;
    52.     border: none;
    53.     color: #ffffff;
    54. }

     四、博客详情页

    和博客列表页类似，只需要更换内容即可

    1. html>
    2. <html lang="zh-hans">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>博客列表页title>
    6.     <link rel="stylesheet" href="./css/details.css">
    7. head>
    8. <body>
    9. <div class="导航栏">
    10.     <div class="导航栏左边">
    11.         <div class="logo-shell">
    12.             <img class="logo" src="./img/logo.jpg">
    13.         div>
    14.         我的博客系统
    15.     div>
    16.     <div class="导航栏右边">
    17.         <a href="/List.html">主页a>
    18.         <a href="/edit.html">写博客a>
    19.         <a href="/login.html">注销a>
    20.     div>
    21. div>
    22. <div class="下面区域">
    23.     <div class="用户信息展示">
    24.         <div class="头像展示区">
    25.             <img src="./img/avatar.jpg">
    26.         div>
    27.         <div class="用户名称">小熊吃糖div>
    28.         <div class="git地址">
    29.             <a href="https://gitee.com/ren-xiaoxiong">gitee 地址a>
    30.         div>
    31.         <div class="统计信息">
    32.             <div class="文章数量区域">
    33.                 <div>文章div>
    34.                 <div class="文章数量">2div>
    35.             div>
    36.             <div class="分类数量区域">
    37.                 <div>分类div>
    38.                 <div class="分类数量">2div>
    39.             div>
    40.         div>
    41.     div>
    42.     <div class="博客列表展示">
    43.         <div class="博客项">
    44.             <h3 class="博客标题">我的第一篇博客h3>
    45.             <p class="发表日期">2022-08-09 09:31:28p>
    46.             <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    47.                 Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
    48.                 similique quaerat vel. Facere,et.p>
    49.             <div class="按钮区域"><a href="/details.html">查看全文 >>a>div>
    50.         div>
    51.         <div class="博客项">
    52.             <h3 class="博客标题">我的第二篇博客h3>
    53.             <p class="发表日期">2022-08-11 16:31:35p>
    54.             <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    55.                 Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
    56.                 similique quaerat vel. Facere,et.p>
    57.             <div class="按钮区域"><a href="/details.html">查看全文 >>a>div>
    58.         div>
    59.     div>
    60. div>
    61. body>
    62. html>
    @import "List.css";

     五、博客编辑页

    我们导入别人已经写好的开源编辑器，引入 editor.md

    官网参见: https://pandao.github.io/editor.md/

    首先引入需要的文件

    2. <script src="./js/jquery.min.js">script>
    3. <script src="./editor.md/lib/marked.min.js">script>
    4. <script src="./editor.md/lib/prettify.min.js">script>
    5. <script src="./editor.md/editormd.js">script>

    需要初始化编辑器 

    1.   // 初始化编辑器
    2.     let editor = editormd("编辑器", {
    3.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
    4.         width: "100%",
    5.         // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
    6.         height: "calc(100% - 50px)",
    7.         // 编辑器中的初始内容
    8.         markdown: "# 在这里写下一篇博客",
    9.         // 指定 editor.md 依赖的插件路径
    10.         path: "./editor.md/lib/"
    11.     });

    1. html>
    2. <html lang="zh-hans">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>博客编辑页title>
    6.     <link rel="stylesheet" href="./css/edit.css">
    7.     <link rel="stylesheet" href="./editor.md/css/editormd.min.css">
    8. head>
    9. <body>
    10. <div class="导航栏">
    11.     <div class="导航栏左边">
    12.         <div class="logo-shell">
    13.             <img class="logo" src="./img/logo.jpg">
    14.         div>
    15.         我的博客系统
    16.     div>
    17.     <div class="导航栏右边">
    18.         <a href="/List.html">主页a>
    19.         <a href="/edit.html">写博客a>
    20.         <a href="/login.html">注销a>
    21.     div>
    22. div>
    23. <div class="下面区域">
    24.     
    25.     
    26.     <form method="post" action="/edit.do">
    27.       <div class="首行" >
    28.           <input type="text" name="title" placeholder="博客标题">
    29.           <input type="text" name="category" placeholder="博客分类">
    30.               <button class="按钮" >发布文章button>
    31.       div>
    32.         <div class="editor" id="编辑器">
    33.  
    34.         div>
    35.     form>
    36. div>
    38. <script src="./js/jquery.min.js">script>
    39. <script src="./editor.md/lib/marked.min.js">script>
    40. <script src="./editor.md/lib/prettify.min.js">script>
    41. <script src="./editor.md/editormd.js">script>
    42. <script>
    43.     // 初始化编辑器
    44.     let editor = editormd("编辑器", {
    45.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
    46.         width: "100%",
    47.         // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
    48.         height: "calc(100% - 50px)",
    49.         // 编辑器中的初始内容
    50.         markdown: "# 在这里写下一篇博客",
    51.         // 指定 editor.md 依赖的插件路径
    52.         path: "./editor.md/lib/"
    53.     });
    54. script>
    55. body>
    56. html>
    1. @import "NavigationBar.css";
    2.  
    3. .下面区域{
    4.     width: 1200px;
    5.     min-height: calc(100vh - 50px);
    6.     margin: 8px auto;
    7. }
    8.  
    9. .下面区域 form{
    10.     width: 100%;
    11.     height: 100%;
    12.  
    13.     display: flex;
    14.     flex-direction: column;
    15.     align-items: stretch;
    16.     justify-content: space-between;
    17.     gap: 12px;
    18. }
    19.  
    20. .下面区域 form .首行 input{
    21.     width: 300px;
    22.     border: none;
    23.     outline: none;
    24.     height: 30px;
    25.     line-height: 30px;
    26. }
    27.  
    28. .下面区域 form .首行{
    29.     display: flex;
    30.     justify-content: space-between;
    31.     align-items: stretch;
    32. }
    33.  
    34. .下面区域 form .editor{
    35.     min-height: calc(100vh - 100px);
    36. }
    37.  
    38. .下面区域 form .首行 input button{
    39.     width: 220px;
    40.     height: 30px;
    41. }
    42. .下面区域 form .首行 .按钮{
    43.     background-color: #43d0d0;
    44. }
    45.

    六、相关代码

    blog: 使用css+html做的简单博客页面https://gitee.com/ren-xiaoxiong/blog

  • 相关阅读:
    接口测试 —— Requests库GET请求
    类与对象(一)----什么是类和对象
    【C++】多态 — 多态的原理 （下篇）
    阿里云 linux 的nginx 配置uni-app的H5前端项目vue，后端接口阿里云。
    pointnet点云分类，matlab，程序可用，修改一个参数
    Oracle数据库中索引的基本使用
    第2章：类加载子系统 详解
    php+mysql计算机公共课在线学习网站
    C++编译静态成员函数报错： “osgGA::DriveManipulator::setEye”: 非静态成员函数的非法调用
    DNS解析中CNAME和MX记录冲突
  • 原文地址：https://blog.csdn.net/m0_68989458/article/details/126272523