• 博客系统（页面设计）

    目录

    一、学习计划

    二、前期工作

    三、列表页设计（重点掌握）

    1.设计背景图

    1.1 common.css

    2. 编写导航栏

    2.1 image

    2.2 blogging.html

    2.3 common.css

    3. 实现页面的正文（版心）

    3.1 blogging.html

    3.2 common.css

    4. 实现个人信息

    4.1 blogging.html

    4.2 common.css 代码

    5.实现博客列表

    5.1 blogging.html

    5.2 common.css 代码

    5.3 blog_list.css 中的代码

    四、博客详情页

    1.blog_detail.html

    2. blog_detail.css

    五、编写博客登录页

    1.login.html

    2.login.css

    六、博客编辑页

    1. blog_edit.html

    2.blog_edit.css 

    3.引入 editor.md

    3.1 html 中引入 editor.md

    3.2 css 中引入样式

    七、整体效果

    八、整体代码

    1.博客列表页

    1.1 blogging.html

    1.2 common.css

    1.3 blog_list.css

    2.博客详情页

    2.1 biog_detail.html

    2.2 blog_list.css

    3.博客登录页

    3.1 login.html

    3.2 login.css

    4.博客编辑页

    4.1 blog_edit.html

    4.2 blog_edit.css

    之前我们已经学习了前端的三剑客（HTML、CSS、JS），今天我们来设计一个博客系统的页面设计，具体设计过程比较长，但是其中如果学会了博客列表页的设计，之后的详情页、登录页、编辑页就是一个复制粘贴的过程，稍微添加点细节就能完成博客系统的设计，重点是博客列表页的设计

    一、学习计划

    9e02b58e34434d6382a3f93f434b82e2.png

    二、前期工作

    首先创建 Blogging_system 文件，在这个文件里存放：

    1️⃣创建一个 image 文件，存放一张图片（自己喜欢的，用来当博客背景），例如我的image 文件存放一个猫的图片（cat.jpg）

    017a4981d82a4e8e84bb547211b18364.png

    2️⃣创建一个 css 文件，再创建一个 common.css：用来存放公共的样式

    1. * 来存放公共的样式 */
    2.  
    3. /* 写一个页面样式的起手式 */
    4. * {
    5.     box-sizing: border-box;
    6.     /* 去除浏览器默认样式 */
    7.     padding: 0;
    8.     margin: 0;
    9. }

    3️⃣创建 blogging.html：用来存放设计博客页面的代码

    1. 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.  
    9.     <link rel="stylesheet" href="css/common.css">
    10. head>
    11. <body>
    12.     
    13. body>
    14. html>

    21c36f7f5fa541a69be07d3b43a6cfde.png

    三、列表页设计（重点掌握）

    1.设计背景图

    页面里有 html 和 body（注意 head 里边的内容不会写在页面上），所以 html 和 body 是构成页面的主体；则给页面设置背景就是给 body设置背景

    1.1 common.css

    上述说明要给 body 设置背景图，就要在公共样式中设计背景图：

    1️⃣在进行插入图片时，要找准图片的位置，刚才我们图片的位置在common.css 上一级的文件夹中，则使用 ../来找到上一级文件，在通过 image 找到 cat.jpg

    1. body {
    2.     /* 相对路径的写法 */
    3.     background-image: url(../image/cat.jpg);
    4. }

    2️⃣这个时候就把图片作为了背景图，但是这样简单的设计时不合理的，我们需要设计它的边边角角的问题：需要将图片填满整个元素：

    1. body {
    2.     background-repeat: no-repeat;
    3.     background-position: center center;
    4.     /* 让图片尽可能填满整个元素 */
    5.     background-size: cover;
    6. }

    ef4371b68a734ec5a9fe053240f8454f.png

    3️⃣这个时候发现图片并没有设置高度，才能正确显示：如果给 body 设置固定高度，就不能适应窗口大小；更希望 body 和浏览器窗口一样大，并且根据窗口大小自适应：将 html 高度设置成 100%，并且 body 高度也设置成 100%

    1. html {
    2.     height: 100%;
    3. }
    4.  
    5. body {
    6.     height: 100%;
    7. }

    5c7ee663e6f94a25b7c82d630542989e.png

    ❗❗height：100%的意思是当前元素的高度和父元素一样高

    按照当前 html 代码的写法：body 的父元素是 html 元素，html 父元素是浏览器窗口

    这里设计的思路：让 html 元素和浏览器窗口一样高，再让 body 和 html 一样高，此时 body 就和浏览器窗口一样高了

    2. 编写导航栏

    本质上就是一个 div，使用弹性布局，把里边的内容水平方向排序

    2.1 image

    首先我们设计一个 logo，我们把 logo 图片放到刚刚创建的 image 文件中

    958d013b0c704304aa77fc6c445231cc.png

    2.2 blogging.html

    操作blogging.html，一个简单的博客系统需要有：我的博客系统、主页、写博客、注销等导航栏

    1. 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.  
    9.     <link rel="stylesheet" href="css/common.css">
    10. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         
    15.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    16.         <div class="title">我的博客系统div>
    17.         
    18.         
    19.         <div class="spacer">div>
    20.         <a href="blogging.html">主页a>
    21.         <a href="blog_edit.html">写博客a>
    22.         
    23.         <a href="">注销a>
    24.     div>
    25. body>
    26. html>

    211933e232a0414a9e3c102c95db7b60.png

     此时我们可以看到布局了，但是样式还没设置，所以看的不是很清晰

    2.3 common.css

    在 common.css 中设置样式

    1️⃣根据 nav（导航栏）设置样式：设置导航栏高度、背景色为黑色，文本为白色

    1. /* 导航栏 */
    2. .nav {
    3.     width: 100%;
    4.     /* 导航栏一般高度都是 50px */
    5.     height: 50px;
    6.     background-color: rgb(50, 50, 50);
    7.     color: white;
    8.  
    9. }

    b0e6cf6a847e467c890c256413ddb24c.png

    此时我们看到了想要看到的，但是logo图片太大了

    2️⃣设置logo图片大小：设置宽度高度

    1. /* 导航栏中的 logo */
    2. .nav img {
    3.     width: 40px;
    4.     height: 40px;
    5.  
    6. }

    10f3c8b0e97e471dafe4a98478121d18.png

    这里看到文本时竖直排列，不合适

    3️⃣文本设置为水平排列，这时候需要在父元素 .nav 里添加弹性布局, 让里面的元素水平方向排列，并且垂直居中

    1. /* 导航栏 */
    2. .nav {
    3.     //...之前的代码    
    4.  
    5.     /* 使用弹性布局, 让里面的元素水平方向排列 */
    6.     display: flex;
    7.     align-items: center;
    8.  
    9. }

    9510d7f0604549868e44163922e51cd6.png

     此时看到左右外边距太挤了，并且logo不好看

    4️⃣首先让 logo 设置左右外边距，使之有一些缝隙，并且使得 logo 从圆形矩阵变为圆形，这个操作需要设置的是 logo 的问题，需要在 .nav img 中设置：

    1. /* 导航栏中的 logo */
    2. .nav img {
    3.     //...之前的代码
    4.  
    5.     /* 左右设置外边距, 有一些缝隙 */
    6.     margin-left: 30px;
    7.     margin-right: 10px;
    8.     /* 设置圆角矩形, 变成圆形 */
    9.     border-radius: 20px;
    10.  
    11. }

    eb7e95440f3e4b4f9ae0ef1fc95bd436.png

    5️⃣设置a标签字体颜色为白色，并且去掉下划线，使之出现内边距，期望得到这些字体在右边

    1. .nav a {
    2.     color: white;
    3.     /* 去掉 a 标签的下划线 */
    4.     text-decoration: none;
    5.     /* 此处使用内边距把多个链接分出距离来 */
    6.     /* 但是此处要注意使用外边距也行, 但是内边距更好, 能够扩大点击的范围 */
    7.     padding: 0 10px;
    8. }
    9.  
    10. .nav .spacer {
    11.     width: 70%;
    12. }

    此处的 .spacer 是使用了一个简单粗暴的写法：用来把后面的链接挤过去，注意看html中所写的

    0cd9f19777f545bc85ce67c9c4089d76.png

     这个时候我们看起来的导航栏是一个不错的样式了

    6️⃣设置透明度：最后可以根据个人习惯，可以把导航栏设置半透明效果，这个时候需要在我们写过的 .nav 中修改背景图（background-color）颜色进行透明度设置

    background-color: rgba(50, 50, 50, 0.4);

    05ffa1692a574336997303498d933e1f.png

    ✅此时的编写导航栏就已经完成了，是不是有一种豁然开朗的感觉 

    3. 实现页面的正文（版心）

    正文设计也成为“版心”，需要实现居中对齐

    3.1 blogging.html

    操作blogging.html，在设置版心的时候，不仅需要居中对齐，也需要的是左侧放用户信息，右侧放博客列表

    1. <body>
    2.     
    3.     <div class="container">
    4.         
    5.         <div class="container-left"> 
    6.  
    7.         div>
    8.         
    9.         <div class="container-right">
    10.  
    11.         div>
    12.     div>
    13. <body>

    3.2 common.css

    在 common.css 设置页面的主体部分样式：

    1️⃣首先需要设置尺寸（宽度：并且水平居中；高度设置成和浏览器窗口一样高）

    宽度比较好设置，那么高度怎么设置成和浏览器窗口一样高呢❓❓❓假设先设置成100%，看效果

    1. /* 页面的主体部分. 也称为 "版心" */
    2. .container {
    3.     /* 设置成固定宽度, 水平居中 */
    4.     width: 1000px;
    5.     /* margin-left: auto;
    6.     margin-right: auto; */
    7.     margin: 0 auto;
    8.  
    9.     /* 设置高度, 和浏览器窗口一样高 */
    10.     height: 100%;
    11.  
    12.     background-color: gray;
    13. }

    c44881d260ff4d1cb8e1649dd5b629b6.png

     这个时候我们发现最下边多出一块，是因为我们这里的 .container 并不是顶着导航栏上边往下的，而是导航栏下边开始；那么这个时候 container 的高度并不是 100%，而是在 100% 基础上减去导航栏的高度：height: calc(100% - 50px);

    1. /* 页面的主体部分. 也称为 "版心" */
    2. .container {
    3.     /* 设置成固定宽度, 水平居中 */
    4.     width: 1000px;
    5.     /* margin-left: auto;
    6.     margin-right: auto; */
    7.     margin: 0 auto;
    8.  
    9.     /* 设置高度, 和浏览器窗口一样高 */
    10.     height: calc(100% - 50px);
    11.  
    12.     background-color: gray;
    13. }

    a385f8636b024c0296e5c4664fdde43f.png

    ❗❗注意：在 height: calc(100% - 50px); 这种写法会有坑，这种写法是 CSS3 版本中的特性，calc 类似与函数一样（当然CSS实际上是没有函数的概念），calc参数就是可以对尺寸进行运算。这里写的 100%就会自动被替换成父元素的高度（此处就是 body 的高度）

    ❗❗注意：减号两侧必须要加空格；如果不加就不能正确识别（在CSS中根本不会存在算术运算的概念）

    2️⃣设置弹性布局，并且设置左右侧信息的样式：首先我们将左侧信息栏样式设置为红色，右侧信息栏样式设置为绿色

    1. .container {
    2.     //...之前的代码
    3.  
    4.     display: flex;
    5. }
    6.  
    7. .container-left {
    8.     height: 100%;
    9.     width: 200px;
    10.  
    11.     background-color: rgb(128, 0, 0);
    12. }
    13.  
    14. .container-right {
    15.     height: 100%;
    16.     width: 800px;
    17.  
    18.     background-color: rgb(0, 128, 0);
    19. }

    0f2ec66ff67f4a6bac75442a0bf65bb3.png

     此时我们就看到了左右布局

    3️⃣使左右布局中间出现缝隙，使 .container-right 中的宽度设置为 width: 795px ，为了留出5px；最后使里边的元素能够等间距铺开

    1. .container {
    2.     //...之前的代码
    3.  
    4.     display: flex;
    5.     /* 让里边的元素能够等间距铺开 */
    6.     justify-content: space-between;
    7. }

     使左右布局中间出现缝隙，使 .container-right 中的宽度设置为 width: 795px ，为了留出5px；

    1. .container-right {
    2.     height: 100%;
    3.     /* 留出来 5px 的缝隙 */
    4.     width: 795px;
    5.  
    6.     background-color: rgb(0, 128, 0);
    7. }

    c08ec717954f4e0f9c51c725583ea39c.png

    4. 实现个人信息

    个人信息中有：用户头像、用户名、超链接/统计信息

    前端页面的代码编写，一般都是先把 html 写好，再把页面结构确定好，然后在编写样式

    4.1 blogging.html

    1️⃣为了显示的比较清晰，我们先把背景样式去掉

    b4f14cfc6209412eb3363740eaa4ab7d.png

     首先编写左侧信息栏：

    1.         
    2.         <div class="container-left">
    3.             
    4.             <div class="card">
    5.                 
    6.                 <img src="image/avatar.png" alt="">
    7.                 
    8.                 <h3>奋斗小温h3>
    9.                 
    10.                 <a href="https:www.gitee.com">gitee 地址a>
    11.                 
    12.                 <div class="counter">
    13.                     <span>文章span>
    14.                     <span>分类span>
    15.                 div>
    16.                 <div class="counter">
    17.                     <span>2span>
    18.                     <span>1span>
    19.                 div>
    20.             div>
    21.         div>

    da87e0b04aa54428a23fbca58007044c.png

     这个时候样式还是比较混乱，则需要加上css样式

    4.2 common.css 代码

    1️⃣左侧信息栏：

    1. /* 设置用户信息区域 */
    2. .card {
    3.     background-color: rgba(255, 255, 255, 0.8);
    4.     border-radius: 10px;
    5.     padding: 30px;
    6. }
    7.  
    8. /* 设置用户头像 */
    9. .card img {
    10.     /* 整个 .card 的宽度是 200px，.card 设置了四个方向的内边距为30px*/
    11.     /* 剩下能放图片空间就是140px */
    12.     width: 140px;
    13.     height: 140px;
    14.     /* 设置圆形头像 */
    15.     border-radius: 70px;
    16. }
    17.  
    18. .card h3 {
    19.     /* 水平居中 */
    20.     text-align: center;
    21.     /* 这里使用内边距把用户名和头像，撑开一个距离，使用外边距也是ok的 */
    22.     padding: 10px;
    23. }
    24.  
    25. /* 设置 gitee 地址 */
    26. .card a {
    27.     text-align: center;
    28.     /* 文字设置成灰色 */
    29.     color: gray;
    30.     /* 去掉下划线 */
    31.     text-decoration: none;
    32.     /* 需要把a标签转成块元素，上述的文字水平居中才有意义 */
    33.     display: block;
    34.     /* 让a标签和下方有间距 */
    35.     margin-bottom: 10px;
    36.     /* 让a标签和下方有间隔 */
    37.     margin-bottom: 10px;
    38. }
    39.  
    40. .card .counter {
    41.     display: flex;
    42.     padding: 5px;
    43.     justify-content: space-around;
    44. }

    19e5e704b4c542bdb8ff12b972b2028e.png

    5.实现博客列表

    5.1 blogging.html

    1️⃣编写右侧信息栏（博客标题、时间、摘要、点击按钮用来查看博客具体内容）：

    1.         
    2.         <div class="container-right">
    3.             
    4.             <div class="blog">
    5.                 <div class="title">我的第一篇博客div>
    6.                 
    7.                 <div class="date">2023-05-12 11:20:00div>
    8.                 
    9.                 <div class="desc">
    10.                     
    11.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    12.                 div>
    13.                 
    14.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    15.             div>
    16.             <div class="blog">
    17.                 <div class="title">我的第二篇博客div>
    18.                 
    19.                 <div class="date">2023-05-12 11:20:00div>
    20.                 
    21.                 <div class="desc">
    22.                     
    23.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
    24.                 div>
    25.                 
    26.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    27.             div>
    28.             <div class="blog">
    29.                 <div class="title">我的第三篇博客div>
    30.                 
    31.                 <div class="date">2023-05-12 11:20:00div>
    32.                 
    33.                 <div class="desc">
    34.                     
    35.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
    36.                 div>
    37.                 
    38.                 
    39.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    40.             div>
    41.         div>

    5.2 common.css 代码

    右侧信息栏需要在 .container-right 里编写：

    1. .container-right {
    2.     height: 100%;
    3.     /* 留出来 5px 的缝隙 */
    4.     width: 795px;
    5.  
    6.     /* 加上一个白色半透明背景 */
    7.     background-color: rgba(255, 255, 255, 0.8);
    8.     /* 设计成圆角 */
    9.     border-radius: 10px;
    10.      /* 不要顶着边框写，加内边距 */
    11.      padding: 20px;
    12.  
    13. }

    e8ea920d766a4ac2b7e83f6f41d14081.png

    这个时候无门就需要设置 文字排版，博客列表是只有列表页独有的，而common.css 是公共样式，所以在CSS文件中创建一个blog_list.css，专门写 博客列表页 的专属样式 

    5.3 blog_list.css 中的代码

    首先在html中引入这个文件：

    1cb99bdfc7264186a2f5d990dad87888.png

     在 blog_list.css 中的代码：

    1. /* 专门写 博客列表页 的专属样式 */
    2.  
    3. /* 设置整个 blog div 的样式 */
    4. .blog {
    5.     /* 设置内边距 */
    6.     padding: 20px;
    7. }
    8.  
    9. /* 设置博客的标题 */
    10. .blog .title {
    11.     font-size: 22px;
    12.     text-align: center;
    13.     font-weight: 900;
    14. }
    15.  
    16. /* 设置发布时间 */
    17. .blog .date {
    18.     text-align: center;
    19.     color: rgba(0, 128, 0);
    20.     padding: 15px;
    21. }
    22.  
    23. /* 设置摘要部分 */
    24. .blog .desc {
    25.     /* em 也是一个单位，和 px 是并列的，1em == 一个文字的大小 */
    26.     text-indent: 2em;
    27. }
    28.  
    29. .blog a {
    30.     /* 改成块级元素,此时才能够设置尺寸 */
    31.     display: block;
    32.     width: 150px;
    33.     height: 40px;
    34.     border: 2px solid black;/* 边框 */
    35.  
    36.     /* 把里边的文字改一下颜色，和下划线 */
    37.     color: black;
    38.     text-align: center;
    39.     text-decoration: none;
    40.  
    41.     /* 查看文字设置居中：当文字的行高和元素高度一样的时候，文字恰好是垂直剧中的 */
    42.     line-height: 40px;
    43.  
    44.     /* 水平居中 */
    45.     margin: 10px auto;
    46. }

    4a6ba1fedd6c4255bcacd774285325da.png

     这个时候我们设计一个伪类选择器，不是选中元素，而是选中元素的某种状态，具体来说 :hover 就是选中了元素被鼠标悬停的状态；并且加上背景切换的过渡效果

    1. .blog a {
    2.     //...之前的代码
    3.  
    4.     /* 加上背景切换的过渡效果,all 表示针对所有的变化都进行过度，0.8s 是过度的时间是0.8s */
    5.  
    6.     transition: all 0.8s;
    7. }
    8.  
    9. /* :hover 是一个伪类选择器，不是选中元素，而是选中元素的某种状态 */
    10. /* 具体来说 :hover 就是选中了元素被鼠标悬停的状态 */
    11. .blog a:hover {
    12.     background-color: gray;
    13.     color: white;
    14. }

    d19b409e70ea41408eac1532e6510020.png

    代码写到这里，实现博客列表页的代码就已经基本写完

    四、博客详情页

    需要重新定义一个页面，俗话说完事开头难，博客列表页写出来之后，后边就是复制粘贴，要注意一些细节问题

    1.blog_detail.html

    创建一个博客详情页：blog_detail.html

    1. 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.  
    9.     <link rel="stylesheet" href="css/common.css">
    10.     <link rel="stylesheet" href="css/blog_detail.css">
    11.  
    12.  
    13. head>
    14. <body>
    15.     
    16.     <div class="nav">
    17.         
    18.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    19.         <div class="title">我的博客系统div>
    20.         
    21.         
    22.         <div class="spacer">div>
    23.         <a href="blogging.html">主页a>
    24.         <a href="blog_edit.html">写博客a>
    25.         
    26.         <a href="">注销a>
    27.     div>
    28.  
    29.     
    30.     <div class="container">
    31.         
    32.         <div class="container-left">
    33.             
    34.             <div class="card">
    35.                 
    36.                 <img src="image/bubu.jpg" alt="">
    37.                 
    38.                 <h3>奋斗小温h3>
    39.                 
    40.                 <a href="https:www.gitee.com">gitee 地址a>
    41.                 
    42.                 <div class="counter">
    43.                     <span>文章span>
    44.                     <span>分类span>
    45.                 div>
    46.                 <div class="counter">
    47.                     <span>2span>
    48.                     <span>1span>
    49.                 div>
    50.             div>
    51.  
    52.         div>
    53.         
    54.         <div class="container-right">
    55.             <h3>这是我的第一篇博客h3>
    56.             <div class="date">2023-05-12 11:20:000div>
    57.             <div class="content">
    58.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    59.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    60.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    61.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    62.               <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    63.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.p>
    64.             div>
    65.         div>
    66.     div>
    67. body>
    68. html>

    e860c73f61874b69b04378be5b75552c.png

    2. blog_detail.css

    创建一个 blog_detail.css，用来存放博客详情页的专属样式

    1. /* 来存放博客详情页的专属样式 */
    2. .container-right h3 {
    3.     font-size: 22px;
    4.     text-align: center;
    5.     font-weight: 900;
    6.     padding: 20px 0;
    7. }
    8.  
    9. .container-right .date {
    10.     text-align: center;
    11.     color: rgb(0, 128, 0);
    12.     padding: 10px 0;
    13. }
    14.  
    15. .container-right .content p {
    16.     text-indent: 2em;
    17.     margin-bottom: 5px;
    18. }

    6718bcc3f5f2455d81df583ec5273f4c.png

    这个时候 博客详情页 就已经写完了

    ❗❗❗但是存在在一个问题（当段落比较长的时候看效果）：

    901df744904e426595467bd16fd47967.png

    此时发现，当内容太长 超出一个屏幕的时候，浏览器窗口就自动带有滚动条了，此时就会把这个背景给滚没了，改进方法：把滚动条加到 container-right 上；在common.css中操作

    1. /* 来存放公共的样式 */
    2. .container-right {
    3.      /* 当内容超出范围时，自动添加滚动条 */
    4.      overflow: auto;
    5.  
    6. }

     4e03f6377c7849a5928b9e0648276eba.png

    五、编写博客登录页

    更换不同的页面，创建一个 login.html

    1.login.html

    需要注意的是，在登录页面是没有注销的页面，需要去掉

    1. 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.     
    10. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         
    15.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    16.         <div class="title">我的博客系统div>
    17.         
    18.         
    19.         <div class="spacer">div>
    20.         <a href="blogging.html">主页a>
    21.         <a href="blog_edit.html">写博客a>
    22.         
    23.     div>
    24.     
    25.     <div class="login-container">
    26.         
    27.         <div class="login-dialog">
    28.             <h3>登录h3>
    29.             
    30.             <form action="">
    31.                 <div class="row">
    32.                     <span>用户名span>
    33.                     <input type="text" id="username">
    34.                 div>
    35.                 <div class="row">
    36.                     <span>密码span>
    37.                     <input type="password" id="password">
    38.                 div>
    39.                 <div class="row">
    40.                     <input type="submit" id="submit" value="登录">
    41.                 div>
    42.             form>
    43.         div>
    44.     div>
    45.     
    46. body>
    47. html>

    abb6b7d51cc34ebd80bc305c6ff0d2c8.png

    2.login.css

    在 CSS 文件中创建 login.css，用来编写博客登录页面的样式

    1. /* 这个是登录页的 css  */
    2.  
    3. /* 版心 */
    4. .login-container {
    5.     width: 100%;
    6.     height: calc(100% - 50px);/* 注意减号隔开 */
    7.  
    8.     /* 为了让 login-dialog 垂直水平居中, 使用弹性布局 */
    9.     display: flex;
    10.     justify-content: center;
    11.     align-items: center;
    12. }
    13.  
    14. /* 登录页尺寸和垂直居中 */
    15. .login-dialog {
    16.     width: 500px;
    17.     height: 350px;
    18.  
    19.     background-color: rgba(255, 255, 255, 0.8);
    20.  
    21.     /* 圆角边框 */
    22.     border-radius: 10px;
    23. }

    8f44081bed9a4766b081fab1feaf61fb.png

    这样一个大体的登录页面已经设定好了，我们来具体实现以下登录标题，及每一行的文字细节

    1. /* 登录标题 */
    2. .login-dialog h3 {
    3.     font-size: 24px;
    4.     font-weight: 900;
    5.     text-align: center;
    6.     margin-top: 60px;
    7.     margin-bottom: 40px;
    8. }
    9.  
    10. /* 针对每一行的样式 */
    11. .row {
    12.     height: 50px;
    13.     width: 100%;
    14.     display: flex;
    15.     justify-content: space-around;
    16.     align-items: center;
    17. }
    18.  
    19. /* 每一行的文字 */
    20. .row span {
    21.     font-size: 20px;
    22.     width: 60px;
    23. }
    24.  
    25. /* 用户名设置 */
    26. .row #username {
    27.     width: 350px;
    28.     height: 40px;
    29.     font-size: 20px;
    30.     text-indent: 10px;
    31. }
    32.  
    33. .row #password {
    34.     width: 350px;
    35.     height: 40px;
    36.     font-size: 20px;
    37.     text-indent: 10px;
    38. }
    39.  
    40. /* 登录按钮 */
    41. .row #submit {
    42.     width: 150px;
    43.     height: 40px;
    44.     color: white;
    45.     background-color: orange;
    46.     text-align: center;
    47.     /* 设置文字垂直居中 */
    48.     line-height: 40px;
    49.     /* 去掉按钮默认的边框 */
    50.     border: none;
    51.     border-radius: 10px;
    52.     margin-top: 20px;
    53. }
    54.  
    55. .row #submit:hover {
    56.     background: gray;
    57. }

    f7918692cd494b59a9328e6379da5a48.png

    六、博客编辑页

    1. blog_edit.html

    创建一个新的窗口（blog_edit.html），其中导航栏与之前一样，需要的是设计博客编辑页的版心

    1. 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. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    15.         <span class="title">我的博客系统span>
    16.         
    17.         <div class="spacer">div>
    18.         <a href="#">主页a>
    19.         <a href="#">写博客a>
    20.         <a href="#">注销a>
    21.     div>
    22.     
    23.     <div class="blog-edit-container">
    24.         
    25.         <div class="title">
    26.             <input type="text" id="title" placeholder="输入文章标题">
    27.             <button id="submit">发布文章button>
    28.         div>
    29.         
    30.         <div id="editor">
    31.  
    32.         div>
    33.     div>
    34. body>
    35. html>

    aeed505b8c004c868c008f104977d4b7.png

    2.blog_edit.css 

    在 CSS 中创建一个博客编辑页的专属样式（blog_edit.css），和前面的思想一样。

    1. /* 这个文件用来写博客编辑页的样式 */
    2.  
    3. .blog-edit-container {
    4.     width: 1000px;
    5.     height: calc(100% - 50px);
    6.     margin: 0 auto;
    7. }
    8.  
    9. /* 注意, 使用后代选择器, 防止和导航栏中的 .title 冲突 */
    10. .blog-edit-container .title {
    11.     height: 50px;
    12.     display: flex;
    13.     align-items: center;
    14.     justify-content: space-between;
    15. }
    16.  
    17. /* 标题的输入框 */
    18. #title {
    19.     height: 40px;
    20.     width: 895px;
    21.     border: none;
    22.     padding-left: 5px;
    23.     font-size: 20px;
    24.     border-radius: 5px;
    25.     /* 去掉轮廓线. 鼠标选中后黑圈 */
    26.     outline: none;
    27.     /* 设置背景半透明 */
    28.     background-color: rgba(255, 255, 255, 0.7);
    29. }
    30.  
    31.  
    32. /* 提交按钮 */
    33. #submit {
    34.     height: 40px;
    35.     width: 100px;
    36.     color: white;
    37.     background-color: orange;
    38.     border-radius: 5px;
    39.     border: none;
    40. }
    41.  
    42. #submit:hover {
    43.     background-color: gray;
    44. }

    e1626cd0d31e4b96ad3b6f5885d7d360.png

    3.引入 editor.md

    🌈editor.md 是一个开源的页面 markdown 编辑器组件. 官网参考：Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)

    创建一个 editor.md 文件

    1️⃣下载 editor.md 文件

    从官网上下载到压缩包. 放到刚刚创建的 editor.md 文件

    7056b82d3cb84b2c9ea76f5514274d4f.png

    2️⃣引入  jQuery 文件

    editor.md 这个组件要想正常使用，还依赖一个东西：jQuery 库（这是 JS 中世界最知名的一个库）

    官网：jQuery CDN 

    b5321211ce484fbaa1bd4e105359a2a2.png

    创建一个 js 文件，创建 jquery.min.js，将上边打开的链接全部复制粘贴进入jquery.min.js，至此 jQuery 包导入成功

    当然也可以直接使用网页版的不需要导入本地中

    2. <script src="https://code.jquery.com/jquery-3.7.0.min.js">script>

    3.1 html 中引入 editor.md

    1.     
    2.     <script src="https://code.jquery.com/jquery-3.7.0.min.js">script> 
    3.     
    4.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    5.     <script src="editor.md/lib/marked.min.js">script>
    6.     <script src="editor.md/lib/prettify.min.js">script>
    7.     <script src="editor.md/editormd.js">script>

    3.2 css 中引入样式

    1. #editor {
    2.     border-radius: 10px;
    3.     /* background-color: rgba(255, 255, 255, 0.8); */
    4.     opacity: 80%;
    5. }

    七、整体效果

    85c499f361fc4e67a1d0dd1e2fcc4a63.png

    博客列表页

    59e2da59e0ef4d23a894f691f6fb0398.png

    博客详情页

    9fef26466f85431f8faf46287cb05189.png

                                                                                                         博客登陆页                                                                                         

    f239776a6b8143bd9df57af9a9fc452c.png

    实现博客编辑页

    b396106ece194377833eb7b4835af2d2.png

    八、整体代码

    1.博客列表页

    1.1 blogging.html

    1. 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.  
    9.     <link rel="stylesheet" href="css/common.css">
    10.     <link rel="stylesheet" href="css/blog_list.css">
    11.  
    12.  
    13. head>
    14. <body>
    15.     
    16.     <div class="nav">
    17.         
    18.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    19.         <div class="title">我的博客系统div>
    20.         
    21.         
    22.         <div class="spacer">div>
    23.         <a href="blogging.html">主页a>
    24.         <a href="blog_edit.html">写博客a>
    25.         
    26.         <a href="">注销a>
    27.     div>
    28.  
    29.     
    30.     <div class="container">
    31.         
    32.         <div class="container-left">
    33.             
    34.             <div class="card">
    35.                 
    36.                 <img src="image/bubu.jpg" alt="">
    37.                 
    38.                 <h3>奋斗小温h3>
    39.                 
    40.                 <a href="https:www.gitee.com">gitee 地址a>
    41.                 
    42.                 <div class="counter">
    43.                     <span>文章span>
    44.                     <span>分类span>
    45.                 div>
    46.                 <div class="counter">
    47.                     <span>2span>
    48.                     <span>1span>
    49.                 div>
    50.             div>
    51.  
    52.         div>
    53.         
    54.         <div class="container-right">
    55.             
    56.             <div class="blog">
    57.                 <div class="title">我的第一篇博客div>
    58.                 
    59.                 <div class="date">2023-05-12 11:20:00div>
    60.                 
    61.                 <div class="desc">
    62.                     
    63.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
    64.                 div>
    65.                 
    66.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    67.             div>
    68.             <div class="blog">
    69.                 <div class="title">我的第二篇博客div>
    70.                 
    71.                 <div class="date">2023-05-12 11:20:00div>
    72.                 
    73.                 <div class="desc">
    74.                     
    75.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
    76.                 div>
    77.                 
    78.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    79.             div>
    80.             <div class="blog">
    81.                 <div class="title">我的第三篇博客div>
    82.                 
    83.                 <div class="date">2023-05-12 11:20:00div>
    84.                 
    85.                 <div class="desc">
    86.                     
    87.                     从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
    88.                 div>
    89.                 
    90.                 
    91.                 <a href="blog_detail.html?blogId=1">查看全文 >> a>
    92.             div>
    93.         div>
    94.     div>
    95. body>
    96. html>

    1.2 common.css

    1. /* 来存放公共的样式 */
    2.  
    3. /* 写一个页面样式的起手式 */
    4. * {
    5.     box-sizing: border-box;
    6.     /* 去除浏览器默认样式 */
    7.     padding: 0;
    8.     margin: 0;
    9. }
    10.  
    11. html {
    12.     height: 100%;
    13. }
    14.  
    15. body {
    16.     /* 注意, 这里的相对路径的写法 */
    17.     background-image: url(../image/cat.jpg);
    18.     background-repeat: no-repeat;
    19.     background-position: center center;
    20.     /* 让图片尽可能填满整个元素 */
    21.     background-size: cover;
    22.  
    23.     height: 100%;
    24. }
    25.  
    26. /* 导航栏 */
    27. .nav {
    28.     width: 100%;
    29.     /* 导航栏一般高度都是 50px */
    30.     height: 50px;
    31.     background-color: rgba(50, 50, 50, 0.4);
    32.     color: white;
    33.  
    34.     /* 使用弹性布局, 让里面的元素水平方向排列 */
    35.     display: flex;
    36.     align-items: center;
    37.  
    38. }
    39.  
    40. /* 导航栏中的 logo */
    41. .nav img {
    42.     width: 40px;
    43.     height: 40px;
    44.  
    45.     /* 左右设置外边距, 有一些缝隙 */
    46.     margin-left: 30px;
    47.     margin-right: 10px;
    48.     /* 设置圆角矩形, 变成圆形 */
    49.     border-radius: 20px;
    50.  
    51. }
    52.  
    53. .nav a {
    54.     color: white;
    55.     /* 去掉 a 标签的下划线 */
    56.     text-decoration: none;
    57.     /* 此处使用内边距把多个链接分出距离来 */
    58.     /* 但是此处要注意使用外边距也行, 但是内边距更好, 能够扩大点击的范围 */
    59.     padding: 0 10px;
    60. }
    61.  
    62. .nav .spacer {
    63.     width: 70%;
    64. }
    65.  
    66. /* 页面的主体部分. 也称为 "版心" */
    67. .container {
    68.     /* 设置成固定宽度, 水平居中 */
    69.     width: 1000px;
    70.     /* margin-left: auto;
    71.     margin-right: auto; */
    72.     margin: 0 auto;
    73.  
    74.     /* 设置高度, 和浏览器窗口一样高 */
    75.     height: calc(100% - 50px);
    76.  
    77.     display: flex;
    78.     /* 让里边的元素能够等间距铺开 */
    79.     justify-content: space-between;
    80. }
    81.  
    82. .container-left {
    83.     height: 100%;
    84.     width: 200px;
    85.  
    86. }
    87.  
    88. .container-right {
    89.     height: 100%;
    90.     /* 留出来 5px 的缝隙 */
    91.     width: 795px;
    92.  
    93.     /* 加上一个白色半透明背景 */
    94.     background-color: rgba(255, 255, 255, 0.8);
    95.     /* 设计成圆角 */
    96.     border-radius: 10px;
    97.      /* 不要顶着边框写，加内边距 */
    98.      padding: 20px;
    99.  
    100.      /* 当内容超出范围时，自动添加滚动条 */
    101.      overflow: auto;
    102.  
    103. }
    104.  
    105. /* 设置用户信息区域 */
    106. .card {
    107.     background-color: rgba(255, 255, 255, 0.8);
    108.     border-radius: 10px;
    109.     padding: 30px;
    110. }
    111.  
    112. /* 设置用户头像 */
    113. .card img {
    114.     /* 整个 .card 的宽度是 200px，.card 设置了四个方向的内边距为30px*/
    115.     /* 剩下能放图片空间就是140px */
    116.     width: 140px;
    117.     height: 140px;
    118.     /* 设置圆形头像 */
    119.     border-radius: 70px;
    120.    
    121. }
    122.  
    123. .card h3 {
    124.     /* 水平居中 */
    125.     text-align: center;
    126.     /* 这里使用内边距把用户名和头像，撑开一个距离，使用外边距也是ok的 */
    127.     padding: 10px;
    128. }
    129.  
    130. /* 设置 gitee 地址 */
    131. .card a {
    132.     text-align: center;
    133.     /* 文字设置成灰色 */
    134.     color: gray;
    135.     /* 去掉下划线 */
    136.     text-decoration: none;
    137.     /* 需要把a标签转成块元素，上述的文字水平居中才有意义 */
    138.     display: block;
    139.     /* 让a标签和下方有间距 */
    140.     margin-bottom: 10px;
    141.     /* 让a标签和下方有间隔 */
    142.     margin-bottom: 10px;
    143. }
    144.  
    145. .card .counter {
    146.     display: flex;
    147.     padding: 5px;
    148.     justify-content: space-around;
    149. }

    1.3 blog_list.css

    1. /* 专门写 博客列表页 的专属样式 */
    2.  
    3. /* 设置整个 blog div 的样式 */
    4. .blog {
    5.     /* 设置内边距 */
    6.     padding: 20px;
    7. }
    8.  
    9. /* 设置博客的标题 */
    10. .blog .title {
    11.     font-size: 22px;
    12.     text-align: center;
    13.     font-weight: 900;
    14. }
    15.  
    16. /* 设置发布时间 */
    17. .blog .date {
    18.     text-align: center;
    19.     color: rgba(0, 128, 0);
    20.     padding: 15px;
    21. }
    22.  
    23. /* 设置摘要部分 */
    24. .blog .desc {
    25.     /* em 也是一个单位，和 px 是并列的，1em == 一个文字的大小 */
    26.     text-indent: 2em;
    27. }
    28.  
    29. .blog a {
    30.     /* 改成块级元素,此时才能够设置尺寸 */
    31.     display: block;
    32.     width: 150px;
    33.     height: 40px;
    34.     border: 2px solid black;/* 边框 */
    35.  
    36.     /* 把里边的文字改一下颜色，和下划线 */
    37.     color: black;
    38.     text-align: center;
    39.     text-decoration: none;
    40.  
    41.     /* 查看文字设置居中：当文字的行高和元素高度一样的时候，文字恰好是垂直剧中的 */
    42.     line-height: 40px;
    43.  
    44.     /* 水平居中 */
    45.     margin: 10px auto;
    46.  
    47.     /* 加上背景切换的过渡效果,all 表示针对所有的变化都进行过度，0.8s 是过度的时间是0.8s */
    48.  
    49.     transition: all 0.8s;
    50. }
    51.  
    52. /* :hover 是一个伪类选择器，不是选中元素，而是选中元素的某种状态 */
    53. /* 具体来说 :hover 就是选中了元素被鼠标悬停的状态 */
    54. .blog a:hover {
    55.     background-color: gray;
    56.     color: white;
    57. }

    2.博客详情页

    2.1 biog_detail.html

    1. 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.  
    9.     <link rel="stylesheet" href="css/common.css">
    10.     <link rel="stylesheet" href="css/blog_detail.css">
    11.  
    12.  
    13. head>
    14. <body>
    15.     
    16.     <div class="nav">
    17.         
    18.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    19.         <div class="title">我的博客系统div>
    20.         
    21.         
    22.         <div class="spacer">div>
    23.         <a href="blogging.html">主页a>
    24.         <a href="blog_edit.html">写博客a>
    25.         
    26.         <a href="">注销a>
    27.     div>
    28.  
    29.     
    30.     <div class="container">
    31.         
    32.         <div class="container-left">
    33.             
    34.             <div class="card">
    35.                 
    36.                 <img src="image/bubu.jpg" alt="">
    37.                 
    38.                 <h3>奋斗小温h3>
    39.                 
    40.                 <a href="https:www.gitee.com">gitee 地址a>
    41.                 
    42.                 <div class="counter">
    43.                     <span>文章span>
    44.                     <span>分类span>
    45.                 div>
    46.                 <div class="counter">
    47.                     <span>2span>
    48.                     <span>1span>
    49.                 div>
    50.             div>
    51.  
    52.         div>
    53.         
    54.         <div class="container-right">
    55.             <h3>这是我的第一篇博客h3>
    56.             <div class="date">2023-05-12 11:20:000div>
    57.             <div class="content">
    58.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur elit.p>
    59.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur elit.p>
    60.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur elit.p>
    61.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur elit.p>
    62.                 <p>从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur elit.p>              
    63.             div>
    64.         div>
    65.     div>
    66. body>
    67. html>

    2.2 blog_list.css

    1. /* 来存放博客详情页的专属样式 */
    2. .container-right h3 {
    3.     font-size: 22px;
    4.     text-align: center;
    5.     font-weight: 900;
    6.     padding: 20px 0;
    7. }
    8.  
    9. .container-right .date {
    10.     text-align: center;
    11.     color: rgb(0, 128, 0);
    12.     padding: 10px 0;
    13. }
    14.  
    15. .container-right .content p {
    16.     text-indent: 2em;
    17.     margin-bottom: 5px;
    18. }

    3.博客登录页

    3.1 login.html

    1. 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/login.css">
    10. head>
    11. <body>
    12.     
    13.     <div class="nav">
    14.         
    15.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    16.         <div class="title">我的博客系统div>
    17.         
    18.         
    19.         <div class="spacer">div>
    20.         <a href="blogging.html">主页a>
    21.         <a href="blog_edit.html">写博客a>
    22.         
    23.     div>
    24.     
    25.     <div class="login-container">
    26.         
    27.         <div class="login-dialog">
    28.             <h3>登录h3>
    29.             
    30.             <form action="">
    31.                 <div class="row">
    32.                     <span>用户名span>
    33.                     <input type="text" id="username">
    34.                 div>
    35.                 <div class="row">
    36.                     <span>密码span>
    37.                     <input type="password" id="password">
    38.                 div>
    39.                 <div class="row">
    40.                     <input type="submit" id="submit" value="登录">
    41.                 div>
    42.             form>
    43.         div>
    44.     div>
    45.     
    46. body>
    47. html>

    3.2 login.css

    1. /* 这个是登录页的 css  */
    2.  
    3. /* 版心 */
    4. .login-container {
    5.     width: 100%;
    6.     height: calc(100% - 50px);/* 注意减号隔开 */
    7.  
    8.     /* 为了让 login-dialog 垂直水平居中, 使用弹性布局 */
    9.     display: flex;
    10.     justify-content: center;
    11.     align-items: center;
    12. }
    13.  
    14. /* 登录页尺寸和垂直居中 */
    15. .login-dialog {
    16.     width: 500px;
    17.     height: 350px;
    18.  
    19.     background-color: rgba(255, 255, 255, 0.8);
    20.  
    21.     /* 圆角边框 */
    22.     border-radius: 10px;
    23. }
    24.  
    25. /* 登录标题 */
    26. .login-dialog h3 {
    27.     font-size: 24px;
    28.     font-weight: 900;
    29.     text-align: center;
    30.     margin-top: 60px;
    31.     margin-bottom: 40px;
    32. }
    33.  
    34. /* 针对每一行的样式 */
    35. .row {
    36.     height: 50px;
    37.     width: 100%;
    38.     display: flex;
    39.     justify-content: space-around;
    40.     align-items: center;
    41. }
    42.  
    43. /* 每一行的文字 */
    44. .row span {
    45.     font-size: 20px;
    46.     width: 60px;
    47. }
    48.  
    49. /* 用户名设置 */
    50. .row #username {
    51.     width: 350px;
    52.     height: 40px;
    53.     font-size: 20px;
    54.     text-indent: 10px;
    55. }
    56.  
    57. .row #password {
    58.     width: 350px;
    59.     height: 40px;
    60.     font-size: 20px;
    61.     text-indent: 10px;
    62. }
    63.  
    64. /* 登录按钮 */
    65. .row #submit {
    66.     width: 150px;
    67.     height: 40px;
    68.     color: white;
    69.     background-color: orange;
    70.     text-align: center;
    71.     /* 设置文字垂直居中 */
    72.     line-height: 40px;
    73.     /* 去掉按钮默认的边框 */
    74.     border: none;
    75.     border-radius: 10px;
    76.     margin-top: 20px;
    77. }
    78.  
    79. .row #submit:hover {
    80.     background: gray;
    81. }

    4.博客编辑页

    4.1 blog_edit.html

    1. 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.     <script src="https://code.jquery.com/jquery-3.7.0.min.js">script>
    12.     
    13.     <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    14.     <script src="editor.md/lib/marked.min.js">script>
    15.     <script src="editor.md/lib/prettify.min.js">script>
    16.     <script src="editor.md/editormd.js">script>
    17. head>
    18. <body>
    19.     
    20.     <div class="nav">
    21.         <img src="image/Xi'an University of Posts & Telecommunications.jpg" alt="">
    22.         <span class="title">我的博客系统span>
    23.         
    24.         <div class="spacer">div>
    25.         <a href="#">主页a>
    26.         <a href="#">写博客a>
    27.         <a href="#">注销a>
    28.     div>
    29.     
    30.     <div class="blog-edit-container">
    31.         
    32.         <div class="title">
    33.             <input type="text" id="title" placeholder="输入文章标题">
    34.             <button id="submit">发布文章button>
    35.         div>
    36.         
    37.         <div id="editor">
    38.  
    39.         div>
    40.     div>
    41.  
    42.     <script>
    43.         var editor = editormd("editor", {
    44.             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    45.             width: "100%",
    46.             // 设定编辑器高度
    47.             height: "calc(100% - 50px)",
    48.             // 编辑器中的初始内容
    49.             markdown: "# 在这里写下一篇博客",
    50.             // 指定 editor.md 依赖的插件路径
    51.             path: "editor.md/lib/"
    52.         });
    53.     script>
    54. body>
    55. html>

    4.2 blog_edit.css

    1. /* 这个文件用来写博客编辑页的样式 */
    2.  
    3. .blog-edit-container {
    4.     width: 1000px;
    5.     height: calc(100% - 50px);
    6.     margin: 0 auto;
    7. }
    8.  
    9. /* 注意, 使用后代选择器, 防止和导航栏中的 .title 冲突 */
    10. .blog-edit-container .title {
    11.     height: 50px;
    12.     display: flex;
    13.     align-items: center;
    14.     justify-content: space-between;
    15. }
    16.  
    17. /* 标题的输入框 */
    18. #title {
    19.     height: 40px;
    20.     width: 895px;
    21.     border: none;
    22.     padding-left: 5px;
    23.     font-size: 20px;
    24.     border-radius: 5px;
    25.     /* 去掉轮廓线. 鼠标选中后黑圈 */
    26.     outline: none;
    27.     /* 设置背景半透明 */
    28.     background-color: rgba(255, 255, 255, 0.7);
    29. }
    30.  
    31.  
    32. /* 提交按钮 */
    33. #submit {
    34.     height: 40px;
    35.     width: 100px;
    36.     color: white;
    37.     background-color: orange;
    38.     border-radius: 5px;
    39.     border: none;
    40. }
    41.  
    42. #submit:hover {
    43.     background-color: gray;
    44. }
    45.  
    46. #editor {
    47.     border-radius: 10px;
    48.     /* background-color: rgba(255, 255, 255, 0.8); */
    49.     opacity: 80%;
    50. }

     

     

     

  • 相关阅读:
    理论与实践：如何写好一个方法
    Rust模式匹配
    python学习第五天之循环结构
    数据可视化之对外经济发展，近五年我国对外货物进出口总额持续上涨
    起重机笔记
    Compiling and Loading
    MySQL基础总结
    基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程的集成方法与步骤（一）
    nginx 获取客户端真实IP
    862. 和至少为 K 的最短子数组
  • 原文地址：https://blog.csdn.net/m0_72161237/article/details/130626568