前端页面项目——博客系统

目录

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? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate
                    maiores.
                
                查看全文 >> 
            

            

                
                

                    我的第二篇博客
                
                
                

                    2022-05-12 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? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate
                    maiores.
                
                查看全文 >> 
            
        

 效果展示

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? Repellendus tenetur nostrum asperiores molestias doloremque cupiditate
                    maiores.
                
                

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?
                
                

                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.
                
                

                    从今天开始, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis veniam dolorem modi, sunt quo rem facere ut dolores inventore ratione nemo provident quae eius adipisci quidem facilis quod. Maxime, nam?
                
                

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?
                
                

                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.
                

            
        

效果如下

 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

 效果展示

可以正常显示并编辑