【博客系统】页面设计(附完整源码)

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

欢迎志同道合的朋友一起加油喔【博客系统】页面设计(附完整源码)_第1张图片


目录

一、页面介绍

二、预期效果

1、博客列表页效果

2、博客详情页效果​

3、博客登录页效果​

4、博客编辑页效果​

三、预备知识点回顾   

四、代码

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

1.1、公共样式

1.2、博客列表——样式

2、博客详情页

2.1、样式变形:

2.2、博客详情页——样式

3、博客登录页

3.1、博客登录页——样式

4、博客编辑页

4.1、引入 editor.md:

4.2、博客编辑页——样式



一、页面介绍

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

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

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

博客详情页:显示了当前博客,详细正文

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

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

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

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

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

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

【博客系统】页面设计(附完整源码)_第2张图片


二、预期效果

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)

实现导航栏

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

实现版心

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

实现个人信息

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

实现博客列表

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

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





    
    
    
    博客列表页
    
    
    


    
    

    
    
    
    
越前龙马

吴少的博客

gitee地址
文章 分类
2 1
我的第一篇博客
2023-05-12 12:00
从今天开始,我要认真写博客,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.
查看全文>>
我的第二篇博客
2023-05-12 14:00
从今天开始,我要认真写博客,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.
查看全文>>

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 中相同,因此我们直接复制即可。





    
    
    
    博客详情页
    
    


    
    

    
    
    
    
越前龙马

吴少的博客

gitee地址
文章 分类
2 1

这是我的第一篇博客

2023-05-12-12:00

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

从今天开始,我要认真写博客,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.

2.1、样式变形:

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

当前咱们的滚动条是出现在浏览器窗口上的,这就导致拖动滚动条,是整个页面都在滚动,能否把滚动条,给放到某个元素上,让它在里面滚?? => 页面不动,元素里的内容滚动
需要给公共样式的 .right 加上一个 CSS 属性:overflow: auto 即可
auto 指的是,如果内容没满,就不加滚动条,如果满了,就自动添加滚动条【博客系统】页面设计(附完整源码)_第3张图片

效果如下:

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 表示.
  • 每个行里分别包含, 用户名输入框, 密码输入框, 提交按钮.




    
    
    
    博客登录页
    
    


    
    

    
    

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 进行初始化.




    
    
    
    博客编辑页
    
    
    
    
    
    
    
    


    
    
    
    

 4.1、引入 editor.md:

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

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


    
    
    
    
    

(注意修改名称,名称与代码需要匹配才能引入成功) 

【博客系统】页面设计(附完整源码)_第4张图片

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 这个文件中即可
【博客系统】页面设计(附完整源码)_第5张图片

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

   初始化 editormd 参考官方的例子

【博客系统】页面设计(附完整源码)_第6张图片

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链接 

你可能感兴趣的:(html,前端)