【博客系统】页面设计（附完整源码）

🎉🎉🎉点进来你就是我的人了
博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔🤺🤺🤺

一、页面介绍

二、预期效果

1、博客列表页(blog_list.html)

一、页面介绍

博客列表页：显示了当前系统中都有哪些发布出来的博客

导航栏：logo，标题，主页，写博客，注销
左侧：当前用户信息，用户的头像＋名字＋其他的简单信息
右侧：博客列表

列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮

博客详情页：显示了当前博客，详细正文

导航栏：和博客列表页相同
左侧：显示的是当前文章的作者信息
右侧：显示当前文章的详细内容了

登录页面：包含了一个登录框，输入用户名，密码，登录按钮

博客登录页 ：登录博客的界面

输入用户名
输入密码
确认登录

博客编辑页：点击 “写博客" 进入的页面

导航栏：和前面一样
输入框，输入博客的标题
markdown 编辑器，按照 markdown 的语法来编辑博客内容，用第三方的组件

二、预期效果

1、博客列表页效果：

2、博客详情页效果：

3、博客登录页效果：

4、博客编辑页效果：

三、预备知识点回顾

1.css文件：

① 一般写浏览器要先清楚浏览器的默认样式
② 导航栏高度普遍都是50px
③ 写样式css的时候务必要参考着html的内容
④ 设置圆形:半径设置为尺寸的一半！！
⑤ 在布局页面时，元素之间的间隙既可以使用内边距,也可以使用外边距，很多时候两者皆可，并没有具体限制、统一标准。
⑥ 使用内边距的特点：可以让元素的有效区域更大一些！！

2.【回顾】：弹性布局 display:flex; // 开启弹性布局

加上这个属性的元素的子元素就会按照弹性布局来排列：

① 子元素就不再按照“块级元素”“行内元素”这样的规则来工作，统一都会排列成一个横行（补充：div独占一行，span不独占一行）
② 子元素可以使用 justify-content 来控制在水平方向如何排列（可选属性看我上一篇css）
③ 子元素可以使用align-items来控制在垂直方向如何排列
（布局是加在父元素上的，子元素自身没有布局）

（布局特指的是位置的排列（放在哪里），是一种特殊的样式）

（如果记不住CSS样式，就使用 mdn+搜索的关键词去查一下）

3.如果想要给整个页面设置背景，就需要给body标签设置背景！那么就需要让body标签先撑满浏览器窗口！

块级元素默认宽度就是100%和父亲一样宽，而html、body、div都是块级元素
高度默认是把内容进行包裹的

但凡是左右排列成一行的都可以使用弹性布局

/* 100% 表示父元素高度 */
/* calc是库函数，用于计算的 */
/* 减号两侧务必有空格！！ ：
 因为CSS中广泛使用脊柱命名法，所以为了进行区分就务必加上空格*/
    height: calc(100% - 50px);

4.注：内边距是设置内容和边框之间的距离；外边距是设置元素和元素之间的距离！！

5.会发现设置文字居中没有用，是因为a是行内元素，默认尺寸就是和内容是一样的，所以文字居中没有效果。 需要先转成块级元素

display: block;

注：行内元素无法设置尺寸，无法设置外边距，内边距左右能设置，上下不能设置！

display:flex;  弹性布局：是对子元素起作用，  
display:block; 块级元素：只对自己有用。

6.由于html标签中包含了很多的>和<，因此如果正文中包含了>和<，就需要使用转义字符，否则浏览器可能会解析出错

注意：

① 不直接使用>，而是使用转义字符形式 > => ⼤于号: >

② 不直接使用<，而是使用转义字符形式 < => ⼩于号: <

7.写样式CSS时尽量多使用后代选择器/子选择器，慎重直接使用类名，因为类名很有可能会重复

8.注意水平居中差别：

① 文字： text-align: center;

② 元素：margin: 0 auto; （每个html都可以称为一个元素）

9.相关属性

/* 文字垂直居中 :行高和元素高度一样！！*/
    line-height: 40px;

/* 加上背景渐变效果:过渡属性 */
    transition: all 2s;

10.当博客过多的时候会溢出设计好的页面，那此时怎么办呢？

让滚动条出现在右侧内容区！

四、代码

1、博客列表页(blog_list.html)

实现导航栏

导航栏中包含logo（此处使用的是我的头像）、标题、以及一些跳转链接。
为了实现左右排列，在logo和链接之间加一个spacer作为占位器。

实现版心

container 作为版心，实现居中对齐的效果
左侧放用户信息
右侧放博客列表

实现个人信息

把个人信息放到一个.card div 中
个人信息中包含头像、用户名、用户的gitee，用户的文章数量和分类数量

实现博客列表

每个博客使用 div.blog 来表示
每个博客中包含标题、发布时间、描述、查看全文按钮

首先创建 blog_list.html, 编写博客列表页.

<!-- 博客列表页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <!-- ../来到上一级目录 -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/blog_list.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="../imgs/demo4.jpg" alt="盈宝">
        <span>我的博客系统</span>
        <!-- 只是空白元素,用来将后面的超链接文本挤到右边去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>

    <!-- 页面的主体部分 -->
    <!-- .container 作为页面的版心 -->
    <!-- 这个部分是在页面中 水平居中对齐的 左右两侧会留出一定的边距 这个东西很多网站都有 称为"版心" -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- 整个用户信息区 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="../imgs/demo1.png" alt="越前龙马">
                <!-- 用户名 -->
                <h3>吴少的博客</h3>
                <!-- gitee地址 -->
                <a href="https://gitee.com/spongebob_2_0">gitee地址</a>
                <!-- 统计信息 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>               
                <div class="counter">
                    <!-- 两篇文章,一个分类 -->
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- blog对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 博客发布时间 -->
                <div class="date">2023-05-12 12:00</div>
                <!-- 博客摘要 -->
                <div class="desc">
                <!-- lorem测试 -->
                从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.
                </div>
                <!-- ">>" 转义 -->
                <a href="blog_detail.html?blogId=1">查看全文&gt;&gt; </a>
            </div>
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">我的第二篇博客</div>
                <!-- 博客发布时间 -->
                <div class="date">2023-05-12 14:00</div>
                <!-- 博客摘要 -->
                <div class="desc">
                <!-- lorem测试 -->
                从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.
                </div>
                <!-- 不能直接写大于号,因为大于号会被当做标签的一部分 ,写出转义字符&gt; -->
                <a href="blog_detail.html?blogId=2">查看全文&gt;&gt; </a>
            </div>
        </div>
    </div>
    
</body>
</html>

1.1、公共样式

对于导航栏来说, 每个页面都需要, 因此把样式提取出来,写到一个 common.css 中，供后续的多个页面来引用

先清除浏览器默认样式
准备一个喜欢的图片作为背景图.
需要把 html 和 body 高度都设为 100%, 使背景的高度和浏览器窗口高度一样.
导航栏 nav 内部使用 flex 布局, 用来排列 logo 和一些按钮.

/* 博客导航栏通用样式 */
/* 去除浏览器页面的默认样式 */
* {
    /* 设置盒子模型,使边框不再撑大盒子 */
    box-sizing: border-box;
    /* 内外边距设置为0 */
    padding: 0;
    margin: 0;
}
/* 给整个页面加背景图 */
html,body {
    /* 当前 html 的父元素，就是浏览器窗口，此处的 100% 意思是 html 元素的高度和浏览器窗口一样高
    当前 body 的父元素，就是 html，此处的 100% 意思就是 html 多高，body，就多高 */
    height: 100%;
}
body {
    /* 插入背景图片 */
    background-image: url(../imgs/demo2.png);
    /* 背景照片不平铺 */
    background-repeat:no-repeat ;
    /* 背景照片垂直水平居中 */
    background-position:center center ;
    /* 背景照片尽可能填满整个屏幕 */
    background-size:cover ;
}
/* 导航栏设置 */
.nav {
    /* 导航栏高度一般都是50px */
    /* 宽度不设置也是默认100% */
    width: 100%;
    height: 50px;
    /* 背景色 */
    background-color: rgba(51,51,51,0.4);
    /* 导航栏里面的文本颜色 */
    color: white;
    /* 使用 flex 进行弹性布局,让导航栏里面的内容进行水平排列 */
    display: flex;
    /* 实现导航栏内容垂直居中 */
    align-items: center;
    
}
/* 导航栏照片设置 */
.nav img {
    width: 40px;
    height: 40px;
    /* 照片的圆角矩形,设置为正方形边长的一半即为圆形 */
    border-radius: 20px;
     /* 照片的左右外边距 */
    margin-left: 30px;
    margin-right: 10px;
}
/* 让博客系统后面的文字空出70的空间,保证后面的文字被挤到最右边 */
.spacer {
    width: 70%;
}
/* 将a标签里面的属性设置一下 */
.nav a {
    /* 超链接的文本颜色 */
    color: white;
    /* 去掉文字下面的下划线 */
    text-decoration: none;
    /* 设置文字的左右内边距,设置外边距也行 */
    /* 但是内边距能扩大点击范围,效果更好 */
    padding: 0 10px; 
}
/* 这里是版心相关的样式 */
.container {
    /* 版心不是和窗口一样宽的 */
    width: 1000px;
    /* 这个写法中 左右两侧必须有空格 不能没有(如果没有 可能无法被浏览器识别)
    这个 calc 是 CSS3 里面提供的一个内置的函数，平时看到的大部分的 CSS 都是 CSS2 这个标准中规定的，但是 CSS3 
    对 2 进行了一定的扩充，CSS3 现在也存在了很多年，主流的浏览器也都支持 */
    height: calc(100% - 50px);
    /* 内边距 水平居中 */
    margin: 0 auto;
    /* 对于 div 这样的块级元素 默认独占一行 如果需要让多个 div 在一行内排列 就需要使用弹性布局 */
    display: flex;
    /* 让元素中间有一些等分的间隔 就是右边留的 5px */
    justify-content: space-between;
    /* background-color: gray; */

}

/* 左侧样式 */
.container-left {
    height: 100%;
    width: 200px;
    /* background-color: orange; */
}
/* 右侧样式 */
.container-right {
    height: 100%;
    /* 左右之间留出   一点 */  
    width: 795px;
    /* 白色半透明背景 */
    background-color: rgba(255,255,255,0.8);
    /* 圆角矩形 */
    border-radius: 10px;
    /* padding: 20px; */
}
/* 设置用户信息区域 card的样式 */
.card {
    /* 白色半透明 */
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    /* 让头像居中 设置四个方向的内边距都是 30px */
    padding: 30px;
}

/* card中照片的样式 */
.card img {
    /* 整个.card的宽度是200px, .card设置了四个方向的内边距30px */
    /* 剩下能放图片的空间就是140px */
    width: 140px;
    height: 140px;
    /* 设置边长的一半为圆形照片 */
    border-radius: 50%;
}
/* 用户名样式 */
.card h3 {
    /* 设置居中对齐 */
    text-align: center;
    /* 这里使用内边距把用户名和头像撑开一个距离 */
    padding: 10px;
    color: green;
}
/* 设置gitee地址的样式 */
.card a {
    /* a 默认是行内元素 很多边距不生效 简单起见 直接设为块级元素 */
    display: block;
    /* 居中 */
    text-align: center;
    /* 设置下划线 */
    text-decoration: none;
    color: orange;
    padding: 5px;
}
.card .counter {
    /* 开启弹性布局 */
    display: flex;
    justify-content: space-around;
    padding: 5px;
    /* color: blue; */ 
}

下面调整样式，因为这部分的内容其他页面中不再显示，故我们不再放到 common.css 中，而是单独放到一个新的 css 文件中。

1.2、博客列表——样式

创建 blog_list.css

使用伪类选择器 .blog .detail:hover，实现光标悬停时修改样式的功能
给.blog .detail 中加上过渡效果 transition：all 0.3s；使悬停的样式改变更逼真

/* 博客列表页专用样式 */
.blog {
    /* 高度不设置 让其取决于里面的内容高度综合 */
    width: 100%;
    padding: 20px;
}
/* 博客标题 */
.blog .title {
    /* 设置文字居中 */
    text-align: center;
    /* 文字大小 */
    font-size: 22px;
    /* 设置文字加粗 */
    font-weight: bold;
    /* 设置上下内边距为10 */
    padding: 10px 0;
}
/* 发布时间 */
.blog .date {
    /* 文字居中 */
    text-align: center;
    /* 文字颜色 */
    color: rgb(0,128,0);
    /* 设置上下内边距为10 */
    padding: 10px 0;
}
/* 博客的摘要的缩进 */
.blog .desc {
    /* 2缩进 */
    text-indent: 2em;
}
/* a标签的样式设置 */
.blog a {
    /* 设置成块级元素，方便设置尺寸和边距 */
    display: block;
    width: 140px;
    height: 40px;
    /* 设置上下内边距10px 整个a标签内容水平居中 */
    margin: 10px auto;
    /* 加一个边框 */
    border: 2px black solid;
    /* 设置文字颜色*/
    color: black;
    /* 当文字的行高和元素高度一样的时候,文字恰好是垂直居中 */
    line-height: 40px;
    /* 设置文字水平居中 */
    text-align: center;
    /* 去除下划线 */
    text-decoration: none;
    /* border-radius: 10px; */
    
    /* 让悬停的变化过程柔和一些，加上过渡效果 */
    transition: all 0.3s;
}
/* 伪类选择器 - 鼠标悬停的效果*/
.blog a:hover {
    /* 当鼠标停在整个元素的位置,颜色会变成黑色,同时文字颜色变成白色 */
    background-color: #333;
    color: white;
}

2、博客详情页

首先创建一个 blog_content.html
引入导航栏、版心和个人信息，这部分代码和blog_list.html 中相同，因此我们直接复制即可。

<!-- 博客详情页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <!-- ../来到上一级目录 -->
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="../imgs/demo4.jpg" alt="盈宝">
        <span>我的博客系统</span>
        <!-- 只是空白元素,用来将后面的超链接文本挤到右边去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>

    <!-- 页面的主体部分 -->
    <!-- .container 作为页面的版心 -->
    <!-- 这个部分是在页面中 水平居中对齐的 左右两侧会留出一定的边距 这个东西很多网站都有 称为"版心" -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <!-- 整个用户信息区 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="../imgs/demo1.png" alt="越前龙马">
                <!-- 用户名 -->
                <h3>吴少的博客</h3>
                <!-- gitee地址 -->
                <a href="https://gitee.com/spongebob_2_0">gitee地址</a>
                <!-- 统计信息 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>               
                <div class="counter">
                    <!-- 两篇文章,一个分类 -->
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 包裹整个博客的内容详情 -->
            <div class="content">
                <!-- 博客标题 -->
                <h3>这是我的第一篇博客</h3>
                <!-- 博客日期 -->
                <div class="date">2023-05-12-12:00</div>
                <!-- 正文 -->
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>
                <p>从今天开始,我要认真写博客,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas laborum corrupti tempora aliquam nulla eveniet omnis quaerat quod odio! Suscipit vero, repudiandae consequuntur illo dignissimos a non? Quos, sequi.</p>

            </div>
        </div>
    </div>
</body>
</html>

2.1、样式变形：

如何固定背景?? 很容易!!

当前咱们的滚动条是出现在浏览器窗口上的，这就导致拖动滚动条，是整个页面都在滚动，能否把滚动条，给放到某个元素上，让它在里面滚?? => 页面不动，元素里的内容滚动
需要给公共样式的 .right 加上一个 CSS 属性：overflow: auto 即可
auto 指的是，如果内容没满，就不加滚动条，如果满了，就自动添加滚动条

效果如下:

2.2、博客详情页——样式

首先创建创建 blog_detail.html

/* 博客详情页专用样式 */
.blog-content {
    padding: 30;
}
/* 设置标题样式 */
.blog-content h3 {
    /* 标题水平居中 */
    text-align: center;
    /* 标题字体大小 */
    font-size: 22px;
    /* 标题加粗 */
    font-weight: bold;
    /* 按上右下左顺时针设置内边距 */
    padding: 20px 10px 0 10px;
}
/* 设置时间样式 */
.blog-content .date {
    /* 水平居中 */
    text-align: center;
    /* 设置颜色 */
    color: rgb(0,128,0);
    /* 时间四个方向的内边距都为20px */
    padding: 20px;
}
/* 设置段落样式 */
.blog-content p {
    /* 每段首行缩进2字符 */
    text-indent: 2em;
    /* 设置上下内边距为10px,左右为0 */
    padding: 10px 0;
}

3、博客登录页

引入导航栏,同时不要忘记引入公共样式 common.css 噢

首先创建一个login.html

登陆框整体放到 div.login-dialog 中.
内部包含三个行, 使用 div.row 表示.
每个行里分别包含, 用户名输入框, 密码输入框, 提交按钮.

<!-- 博客登录页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登录页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="../imgs/demo4.jpg" alt="盈宝">
        <span>我的博客系统</span>
        <!-- 只是空白元素,用来将后面的超链接文本挤到右边去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
    </div>

    <!-- 登录页面的版心 -->
    <div class="login-container">
        <!-- 使用from包裹下列内容,便于后续给服务器提交数据 -->
        <form action="">
            <!-- 登录对话框 -->
        <div class="login-dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <button>登录</button>
            </div>
        </div>
        </form>
    </div>
</body>
</html>

3.1、博客登录页——样式

创建 login.css 文件

使用 flex 使登陆对话框能够在页面中水平垂直居中。
使用 #submit:active 伪类选择器, 实现点击按钮时样式切换的效果.

/* 博客登录页面专用样式 */
/* 设置版心 */
.login-container {
    /* 设置宽度 */
    width: 100%;
    /* 设置成浏览器窗口一样高再减去导航栏部分 */
    height: calc(100% - 50px);

    /* 为了让子元素login-dialog能实现垂直居中 */
    /* 用flex开启弹性布局 */
    display: flex;
    /* 实现子元素垂直居中 */
    align-items: center;
    /* 实现子元素水平居中*/
    justify-content: center;
    /* padding-top: 30px; */
}
/* 设置对话框 */
.login-dialog {
    width: 400px;
    height: 350px;
    /* 背景颜色 */
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}
/* 设置标题样式 */
.login-dialog h3 {
    font-size: 22px;  
    font-weight: bold;
    text-align: center;
    padding: 50px 0 40px 0;
}
/* 设置row包裹的元素部分 */
.login-dialog .row {
    height: 50px;   
    width: 100%;
    /* 开启弹性布局 */
    display: flex;
    /* 子元素垂直居中 */
    align-items: center;
    /* 子元素水平居中 */
    justify-content: center;
    padding: 0px 10x 40px 10px;
}
/* 设置span标签的内容 */
.login-dialog .row span {
    /* span转块级元素,方便设置尺寸 */
    display: block;
    width: 100px;
    font-weight: 700;
    /* 左内边距让用户名和密码有右边靠一点 */
    padding-left:30px ;
}
/* 设置输入框 */
#username,#password {
    width: 220px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    /* 输出文字时左侧不紧贴边框 */
    padding-left: 10px;
    padding-right: 10px;
    /* 去边框 */
    border: none;
    /* 去输入时的轮廓线 */
    outline: none;
    /* 让设置边框变成圆角 */
    border-radius: 10px;
    /* 右外边距让输入框往左边靠一点 */
    margin-right:30px ;
}
/* 设置登录按键 */
.row button {
    width: 300px;
    height: 50px;
    border-radius: 10px;
    color: white;
    background-color: rgb(0,128,0);
    /* 去掉默认边框 */
    border: none;
    margin-top: 20px;
    /* 设置文字垂直居中 */
    line-height: 50px;
}
 /* 伪类选择器 - 鼠标按下的效果 */
.row button:active {
    background-color: #666;
}

4、博客编辑页

创建 blog_edit.html

整个编辑区放到 div.blog-edit-container 中.
里面包含一个标题编辑区, 和内容编辑区.
标题编辑区, 包含一个 input, 用来填写标题, 以及一个 button 按钮用于提交.
内容编辑区先创建一个 div#editor, 后面将使用 editor.md 进行初始化.

<!-- 博客编辑页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/blog_edit.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="../editor.md/css/editormd.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../editor.md/lib/marked.min.js"></script>
    <script src="../editor.md/lib/prettify.min.js"></script>
    <script src="../editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="../imgs/demo4.jpg" alt="盈宝">
        <span>我的博客系统</span>
        <!-- 只是空白元素,用来将后面的超链接文本挤到右边去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    <!-- 博客编辑页的版心 -->
    <div class="blog-edit-container">
        <!--  -->
        <form action="">
            <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" placeholder="在此处输入标题">
            <button>发布文章</button>
        </div>
        <!-- 博客编辑器 -->
        <!-- 把md编辑器放到这个div中 -->
        <!-- 博客编辑器, 这里用 id 是为了和 markdown 编辑器对接 -->
        <div id="editor">
            
        </div>
        </form>
    </div>

    <script>
        // 初始化编辑器
        let editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)", /* 减 titile 的高度 */
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "../editor.md/lib/"
        });
    </script>
</body>
</html>

4.1、引入 editor.md：

官网： Editor.md - 开源在线 Markdown 编辑器

editor.md 是一个开源的页面 markdown 编辑器组件.

<!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="../editor.md/css/editormd.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../editor.md/lib/marked.min.js"></script>
    <script src="../editor.md/lib/prettify.min.js"></script>
    <script src="../editor.md/editormd.js"></script>

（注意修改名称，名称与代码需要匹配才能引入成功）

jquery 不是 editor.md 的一部分. 而是 editor.md 的依赖的库~~jquery 可以说是 JS 世界中,最知名的第三方库(没有之一)放在十年前, jquery在JS中的地位,就相当于Spring在 Java中的地位~~正因为 jquery非常非常火,所以很多第三方库,也要依赖 jquery.就需要通过其他手段来安裝引入 jquery ~~

创建 js 目录，创建一个文件 jquery.min.js ，此处需要额外安装一下 jquery 这个库，去网上搜 “jquery cdn” jQuery CDN

选择此版本：

JS 是需要通过网络来加载的，期望内容尽量短，从而节省带宽
minified 版本就是属于被压缩过的 (去掉空格换行之类的，把变量名替换成 a b c d 这种)

打开网址，打开 jquery 的源码文件，直接复制粘贴到 vscode 中，保存到 jquery.min.js 这个文件中即可

(虽然专业的前端开发不会用这种方式来下载安装 jquery，确实有更好的办法，但是当前对于咱们来说，这就是最简单的办法)，也可以直接把 https://code.jquery.com/jquery-3.6.0.min.js 给写到 script 的 src 中
但是这里有个小问题，就是 https://code.jquery.com/jquery-3.6.0.min.js 不稳定，有时候访问不了，为了避免麻烦，直接还是复制到本地了

初始化 editormd 参考官方的例子

4.2、博客编辑页——样式

/* 博客编辑页专用样式 */
/* 设置版心样式 */
.blog-edit-container {
    /* 设置宽度 */
    width: 1000px;
    /* 设置高度 */
    height: calc(100% - 50px);
    /* 元素水平居中 */
    margin: 0 auto;
}
/* 使用后代选择器,防止和导航栏中的标题冲突 */
/* 设置标题样式 */
.blog-edit-container .title {
    width: 100%;
    height: 50px;
    /* 开启弹性布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 设置标题的输入框 */
.blog-edit-container .title input {
    /* 设置宽度 */
    width: 895px;
    /* 设置高度 */
    height: 40px;
    /* 设置圆角矩形 */
    border-radius: 10px;
    /* 去除边框 */
    border: none;
    /* 去除输入时的轮廓线 */
    outline: none;
    
    /* 设置文字大小 */
    font-size: 20px;
    /* 设置文字垂直居中 */
    line-height: 40px;
    /* 设置文字内边距,防止和边框离得太近 */
    padding: 10px;
    /* 设置背景色 */
    background-color: rgba(255, 255, 255, 0.8);
}
/* 设置提交按钮的样式 */
.blog-edit-container .title button {
    width: 100px;
    height: 40px;
    /* 设置圆角矩形 */
    border-radius: 10px;
    
    color: white;
    background-color: orange;
    /* 去除边框 */
    border: none;
    /* 去除输入时的轮廓线 */
    outline: none;
}
 /* 伪类选择器 - 鼠标按下的效果 */
.blog-edit-container .title button:active {
    background-color: #666;
}

#editor {
    border-radius: 10px;

    /* background-color: rgba(255, 255, 255, 0.8); */
    /* 半透明的纸 盖在桌子上 如果纸上已经被涂写了很多内容 这个时候半透明相当于也就失效 */
    /* background-color 只是针对当前元素进行设置 不会影响到子元素
       opacity 会影响到子元素 给最外面的父元素设置了半透明 里面的元素也会一起半透明 */
    opacity: 80%;
}
/* 设置form标签包裹的部分和父元素一样高 */
.blog-edit-container form {
    height: 100%;
}

最后附上完整源代码:gitee链接