目录

1.实现博客列表页

1.1实现导航栏

1.2 实现中间版心

1.3 实现个人信息

1.4 实现博客列表

2. 实现博客正文页

3.实现博客登陆页

4. 实现博客编辑

4.1实现编辑区

4.2 引入编辑器

展示

1）登录页面

2）博客列表页

3）博客详情页

4）博客编辑页

，项目所需目录表

1.实现博客列表页

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

1.1实现导航栏

编辑 blog_list.html, 创建导航栏的 html 代码。 导航栏里面包含 logo, 标题 , 以及一些按钮 ( 跳转链接 )。 为了实现左右排列 , 在 logo 和 按钮 之间加一个 spacer 作为占位器。 1）先将页面需要得创建好 其中主页和写博客两个标签都加上对于的网址，方面跳转，后面的也一样

                    我的博客系统                        主页        写博客        注销    

这是页面展示效果

2）对页面进行排版设计

创建一个common.css 用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html

编辑common.css ，先对照导航栏的内容进行设计

/* 放置一些各个页面都会用到的公共样式 */* {    margin: 0;    padding: 0;    box-sizing: border-box;}.nav {    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: 50%;    margin-left: 30px;    margin-right: 10px;}.nav .spacer {    /* 相对于父元素的宽度, 如果父元素(.nav) 宽度是 1000px, 此时 .spacer 就是 700px */    width: 70%;}.nav a {    color: white;    text-decoration: none;    padding: 0 10px;}

排版效果如下：

3）给页面加背景

直接在common.css 下添加背景图和设计

/* 给整个页面加上背景图 */html,body {    height: 100%;}body {    background-image: url(../image/jing.jpg);    background-repeat: no-repeat;    background-position: center center;    background-size: cover;}* {    margin: 0;    padding: 0;    box-sizing: border-box;}

效果展示

1.2 实现中间版心

版心设计有两个区域。.

左侧是个人信息。右侧是博客列表

1）编辑 blog_list.html

container 作为版心, 实现居中对齐的效果

2）编辑common.css

.container {    /* 当前版心并不是和窗口一样宽的 */    width: 1000px;    height: calc(100% - 50px);    /* 水平居中 */    margin: 0 auto;    display: flex;    justify-content: space-between;}.container .left {    height: 100%;    width: 200px;    background-color: rgb(0, 128, 49);}.container .right {    height: 100%;    width: 795px;    background-color: rgba(255, 255, 255, 0.8);    border-radius: 10px;    /* 内容滚动条 */    overflow: auto;}

效果展示

1.3 实现个人信息

1）编辑 blog_list.html 把个人信息放到一个 .card div 中 . 个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a)。

                                                                 
Fly Upward
                gitee 地址                    

刚插入信息的效果

2）编辑 common.css，对个人信息卡片进行排版

/* 实现 card 部分的样式 */.card {    background-color: rgba(255, 255, 255, 0.8);    border-radius: 10px;    /* 通过这里的内边距, 就可以让头像居中 */    /* 这里设置的 30px 意思是四个方向, 都是 30px */    padding: 30px;}.card img {    width: 140px;    height: 140px;    border-radius: 50%;}.card h3 {    text-align: center;    padding: 10px;}.card a {    /* a 默认是行内元素. 行内元素的很多边距不生效. 为了简单起见, 直接设为块级元素. */    display: block;    text-align: center;    text-decoration: none;    color: #999;    padding: 10px;}

排版之后的效果

1.4 实现博客列表

1）编辑 blog_list.html 每个博客使用 div.blog 来表示 . 每个博客中包含标题 , 发布时间 , 描述 , 查看全文按钮 . 此处先在 查看全文按钮处 加入博客全文的连接，后面实现即可跳转

                                                                            我的第一篇博客                                                                    2022-05-10 20:00:00                                                                    把学到的知识记录下来. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae" />
  
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;    padding: 10px 0;}.blog .date {    /* 日期居中 */    text-align: center;    color: rgb(15, 100, 56);    /* 上下内边距10px，左右0 */    padding: 10px 0;}.blog .desc {    /* 首行缩进两字符 */    text-indent: 2em;}.blog a {    /* 设置成块级元素, 方便设置尺寸和边距 */    display: block;    width: 140px;    height: 40px;    margin: 10px auto;    border: 2px black solid;    color: black;    line-height: 40px;    text-align: center;    text-decoration: none;    /* 如果想让变化变的柔和一些, 可以加上过渡效果 */    transition: all 0.5s;}.blog a:hover {    background: #333;    color: #fff;}
效果展示
 
2. 实现博客正文页
1）创建 blog_detail.htm
其中博客正文页的导航栏、个人信息卡片和右侧版心是和博客列表页一样的，只需要直接复制过来即可。
                                                我的博客系统                        主页        写博客        注销                                                                                    
Fly Upward
                gitee 地址                                    文章                    分类                                                    2                    1                                                                                        
 2）实现博客正文 编辑 blog_detail.htm。 博客内容中包含博客标题  (h3),  博客时间 (div.date),  博客正文 (p)  将正文编辑在div.right 标签内
                                                                
我的第一篇博客
                                2022-05-10 20:00:00                                
                    把学到的知识记录下来. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae" />
   
3）对正文进行排版
   
创建blog_detail.css
   
并将blog_detail.css 引入blog_detail.htm，在上面创建blog_detail.htm 时，已经提前引入文件的，现在只需编辑保存即可使用。
   
/* 正文容器 */.blog-content {    padding: 30px;}/* 标题 */.blog-content h3 {    text-align: center;    padding: 20px 0;}/* 日期 */.blog-content .date {    text-align: center;    color: rgb(0, 128, 0);    padding: 20px 0;}/* 正文锻炼 */.blog-content p {    text-indent: 2em;    padding: 10px 0;}
效果展示
由于在设置common.css时已经加入了/* 内容滚动条 */overflow: auto;所以可以看到下面右边有个灰色的滚动条
3.实现博客登陆页
1）创建blog_login.html
 引入导航栏、引入样式  common.css 
                      我的博客系统                        主页        写博客                    
2）实现版心
                                    
创建blog_login.css 来对登录页面进行排版，并引入blog_login.html 中
先将登录区域设计好
.login-container {    width: 100%;    height: calc(100% - 50px);    /* 需要让里面的子元素, 垂直水平居中, 需要用到 flex 布局 */    display: flex;    align-items: center;    justify-content: center;}.login-dialog {    width: 400px;    height: 350px;    background-color: rgba(255, 255, 255, 0.8);    border-radius: 10px;}
效果展示
3）实现登录信息卡片
 编辑blog_login.html 登陆框整体放倒  div.login-dialog  中 .  内部包含三个行 ,  使用  div.row  表示 .  每个行里分别包含 ,  用户名输入框 ,  密码输入框 ,  提交按钮。
                      
登录
                            用户名                                                        密码                                                        提交                        
效果展示
 
4）排版登录卡片
编辑blog_login.css
.login-dialog h3 {    text-align: center;    padding: 50px 0;}.login-dialog .row {    height: 50px;    width: 100%;    display: flex;    align-items: center;    justify-content: center;}.login-dialog .row span {    /* 把 span 转成块级元素, 方便设置后续尺寸 */    display: block;    width: 100px;    font-weight: 700;}#username,#password {    width: 200px;    height: 40px;    border-radius: 10px;    /* 文字的设置 */    font-size: 22px;    line-height: 40px;    padding-left: 10px;    /* 去掉边框 */    border: none;    /* 去掉轮廓线 */    outline: none;}.row button {    width: 300px;    height: 50px;    border-radius: 10px;    color: white;    background-color: rgb(0, 128, 0);    border: none;    outline: none;    margin-top: 50px;}.row button:active {    background-color: #666;}
效果展示
4. 实现博客编辑
1）创建 blog_edit.html
引入导航栏、引入引入样式 common.css
                     我的博客系统                        主页        写博客        注销    
 
4.1实现编辑区
 1）编辑  blog_edit.html  整个编辑区放到  div.blog-edit-container  中。 里面包含一个标题编辑区 ,  和内容编辑区。 标题编辑区 ,  包含一个  input,  用来填写标题 ,  以及一个  button  按钮用于提交。 内容编辑区先创建一个  div#editor,  后面将使用  editor.md  进行初始化。
                                    发布文章                                    
 2）创建 blog_edit.css  #editor  需要使用  opacity: 80% ;  设置透明度 .  如果直接使用  background - color  后面会被  editor.md  给覆盖掉。
.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: 22px;    line-height: 40px;    padding-left: 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); */    opacity: 80%;}
 效果展示 
4.2 引入编辑器
1) 下载 editor.md 
从官网上下载到压缩包并解压（浏览器搜索editor.md 就可以了），然后将文件放到项目的目录中
2) 引入 editor.md依赖
在blog_edit.html 中引入
                    
3）创建 js
js/jquery.min.js
先在项目目录下创建js文件夹，然后再里面创建 jquery.min.js 文件
浏览器搜索jQuery.cdn 然后按下面的操作，最后复制到 jquery.min.js 文件里面
4）初始化 editor.md 
 编辑  blog_edit.html
        // 初始化编辑器        let editor = editormd("editor", {            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.             width: "100%",            // 设定编辑器高度            height: "calc(100% - 50px)",            // 编辑器中的初始内容            markdown: "# 在这里写下一篇博客",            // 指定 editor.md 依赖的插件路径            path: "editor.md/lib/"        });    
效果展示
可以正常显示并编辑