☕导航小助手☕
写在前面
前置说明
预览效果
一、博客列表页
1.1 导航栏的实现
1.2 页面主体的实现
1.3 "左侧个人信息"的实现
1.4 "右侧博客列表"的实现
二、博客详情页
2.1 背景图片的实现
2.2 导航栏的实现
2.3 页面主体的实现
三、博客登录页
3.1 导航栏的实现
3.2 登录界面样式的实现
四、博客编辑页
4.2 标题编辑区的实现
写在前面
在之前的博客中，我们已经学习了 HTML、CSS、JS、WebAPI 等相关的内容，虽然没有深入的学习，学习的只是一些基本的内容，但是 对于现阶段的自己也已经是足够了的 ~
在这篇博客中，将要把之前所学习的前端知识都用起来，做一个综合案例 —— 博客系统 的页面设计 ~
当然，这也是一篇对于前端知识的完结之作 ~
因为暂时是用前端知识的嘛，所以现阶段只是做出一个 博客系统 的 页面设计（当然，真正的博客系统 有前端页面，也有后端 Java代码，更是需要有 前后端交互）~
那么，现在开始 博客系统（页面设计）的学习 ~
前置说明
这只是一个简单的博客系统的页面设计，其功能肯定不如 CSDN 多，但是也是一个简化版本的博客系统 的 页面的设计了 ~
博客系统的页面设计主要分为四个部分：
预览效果
博客列表页 预览效果：
博客详情页 预览效果：
博客登录页 预览效果：
博客编辑页 预览效果：
一、博客列表页
1.1 导航栏的实现
博客列表页
但是，经过浏览器运行过后，我们会发现，结果和预先想好的效果相差甚远：
这个图片我缩小了，不然放原图太大了拍不下 ~
咳咳，虽然图片有点大，但是 有关系吗？ —— 没有关系 ~
不要着急，现在我们需要实现页面布局 ~
由于在事先想好的页面布局中，导航栏在许多的页面都存在，所以我们可以把和导航栏相关的样式写到一个单独的 CSS文件 中，让各个 HTML文件 直接引用 ~
创建 common.css文件：
/* 导航栏 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
/* html 高度设置成 100% 意思是 和 父元素一样高,html 的父元素是 浏览器窗口,body 的父元素是 html */
/* 此处的意思是,让 body、浏览器窗口、html 一样高,才好设置背景图片 */
background-image: url(../image/background.png);
}同时，在 blog_list.html 中进行引入：
这个图片我缩小了，不然放原图太大了拍不下（不然 背景图片和浏览器窗口不匹配啥的） ~
可以看见，背景图片已就绪 ~
接下来，就可以设置一些背景图片的相关属性：
/* 设置背景图片的相关属性 */
background-repeat: no-repeat; /* 不重复*/
background-position: center center; /* 居中 */
background-size: cover; /* 尽可能铺满 */
此时，背景图片和浏览器窗口匹配了 ~
欧克，背景图片出现了以后，现在就可以继续 调整导航栏了 ~
当然，看起来 logo图像 也太大了，非常影响视觉感受，所以我们也要进行调整 ~
.nav {
width: 100%;
/* witdh 高度设置成 100% 意思是 和 父元素一样宽,nav 的父元素是 body,而 body 的狂赌默认和浏览器窗口一样 */
height: 50px;
background-color: rgba(50,50,50,0.4);
/* 设置背景颜色,同时产生半透明效果 */
color: rgb(255,255,255);
/* 使用弹性布局,起居中效果 */
display: flex;
align-items: center;
}
.nav img {
width: 40px;
height: 40px;
/* 把这个 logo1 设置成圆的 */
border-radius: 50%; /* 50% 的意思是 width 的 50%,即 20px*/
/* 使得 logo1 和 文字 之间有一些距离,有很多办法,此处 就直接在 logo1 这里设置内外边距即可 */
margin-left: 30px;
margin-right: 10px;
}此时，经过这一番调整以后，页面就大大改观了：
此时，我们可以发现，文字部分的颜色、位置、样式 还需要做出一些改变：
.nav .spacer {
/* 首先把文字部分搞到右边去 */
width: 70%;
}
之后，可以处理一下 文字的颜色、样式 等等：
.nav a {
color: white; /* 颜色改成白色 */
text-decoration: none; /* 去掉下划线 */
padding: 0 10px; /* 每个 a标签 加上 10px 的内边距,撑开 使它们之间不要靠得太近 */
}
1.2 页面主体的实现
导航栏部分已经实现，现在就可以在 blog_list.html 中实现页面主体的部分了 ~
接下来，可移步至 common.css 编写页面主体的样式：
/* 编写页面主体的样式 */
.container {
/* 进行页面尺寸的设置 */
width: 1000px;
height: calc(100% - 50px);
/* 不可以设置成100%,需要设置成 整体窗口的高度 - 导航栏的高度(50px) ,不信可以自己去试一试看 */
/* calc 是一个 CSS 中的函数,其效果是：进行尺寸的计算 */
/* 100% 和父元素高度一样高, .container 的父元素是 body,而 body 前面已经设置过,和 HTML 以及 浏览器窗口 一样高的 */
margin: 0 auto; /* 水平居中 */
/* 实现左右布局,就得 flex */
display: flex;
}
.container-left {
height: 100%; /* 和 .container 一样高*/
width: 200px;
}
.container-right {
height: 100%;
width: 800px; /* 800px = 1000px - 200px */
}
此时，如果没有使用 弹性布局 flex，可以暂时的设置背景色 看看情况：
可以看见这就不是左右布局的：
使用了弹性布局 flex 之后的情况：
当然，我们可以从页面布局图上可以看见，"左侧个人信息" 和 "右侧内容详情" 之间留有空隙，所以还需要在上面的代码改一下：
/* 编写页面主体的样式 */
.container {
/* 进行页面尺寸的设置 */
width: 1000px;
height: calc(100% - 50px);
/* 不可以设置成100%,需要设置成 整体窗口的高度 - 导航栏的高度(50px) ,不信可以自己去试一试看 */
/* calc 是一个 CSS 中的函数,其效果是：进行尺寸的计算 */
/* 100% 和父元素高度一样高, .container 的父元素是 body,而 body 前面已经设置过,和 HTML 以及 浏览器窗口 一样高的 */
margin: 0 auto; /* 水平居中 */
/* 实现左右布局,就得 flex */
display: flex;
/* 除了需要把 width 改成 795px,还需要加上这个：justify-content: space-between; */
/* 第 16~18、31~33行 是使得左侧和右侧有间隙的办法 */
justify-content: space-between;
}
.container-left {
height: 100%; /* 和 .container 一样高*/
width: 200px;
background-color: red;
}
.container-right {
height: 100%;
/* width: 800px; 800px = 1000px - 200px */
/* width 不改成 800px 了(否则没有间隙),改成 795px,留有 5px */
width: 795px;
background-color: green;
}
1.3 "左侧个人信息"的实现
左右侧的结构布局已经创建好了，我们就可以把临时的左右背景颜色给去掉了 ~
可以先把 "左侧个人信息" 的页面结构写好：
之后就可以对着 "左侧个人信息" 这个页面结构 进行样式上的一些修改：
/* 对左侧个人信息整体结构进行设置 */
.card {
background-color: rgba(255,255,255,0.8); /* 设置白色的背景颜色,加上一点半透明效果 */
border-radius: 10px; /* 设置成圆角矩形 */
padding: 30px; /* 设置一下内边距 */
}
/* 对用户头像(logo2)进行设置 */
.card img {
width: 140px; /* container-left 一共 200px,减去两个内边距 30px * 2*/
height: 140px; /* 设置一下高度 */
border-radius: 70px; /* 设置成圆角矩形 */
}
/* 对用户名(哎呀是小张啊)进行设置 */
.card h3 {
text-align: center; /* 水平居中 */
padding: 10px; /* 设置一下内边距 */
}
/* 对github链接进行设置 */
.card a {
/* a标签是一个行内元素,转化成块级元素之后 再进行水平居中的设置 */
display: block;
text-align: center;
text-decoration: none; /* 去掉下划线 */
padding: 10px; /* 设置一下内边距 */
color: rgb(130, 121, 121);
}
/* 对文章分类进行设置 */
.card .counter {
display: flex; /* 设置水平布局 */
padding: 5px; /* 设置一下内边距 */
justify-content: space-around; /* 设置居中一点*/
}
1.4 "右侧博客列表"的实现
首先还是需要将 "右侧博客列表"的页面结构设计好：
这是第一篇博客
2022_10_01 12:00:00
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
查看全文 >>
这是第二篇博客
2022_10_03 12:00:00
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi delectus nihil quidem necessitatibus corrupti tempora libero hic reprehenderit saepe rerum distinctio, incidunt quae quisquam amet dolores expedita doloribus fugiat consequuntur?
查看全文 >>
这是第三篇博客
2022_10_05 12:00:00
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem minus nemo alias ex eum quis sequi eos nam asperiores maxime, mollitia quod est voluptatum ipsum magnam nihil, aliquam quaerat porro.
查看全文 >>
接着就可以对着 "右侧博客列表"部分进行样式上的一些修改，造成一些良好的视觉效果：
/* 此处可以在上面的 .container-right 选择器中进行修改 */
.container-right {
height: 100%;
/* width: 800px; 800px = 1000px - 200px */
/* width 不改成 800px 了(否则没有间隙),改成 795px,留有 5px */
width: 795px;
/* 对右侧博客列表整体结构进行设置 */
background-color: rgba(255, 255, 255, 0.6); /* 设置白色的背景颜色,加上一点半透明效果 */
border-radius: 10px; /* 加上圆角矩形 */
}
同时，由于剩下的 "右侧博客列表" 只在本页面上使用到，不在其他的页面上使用 ~
所以，就需要去单独创建一个 blog_list.css文件，接下来的代码就在这里面编写 ~
当然，此时也需要在 blog_list.html 中引入：
现在，就可以对着 "右侧博客列表" 进行样式上的修改了：
/* 对"右侧博客信息"进行样式上的修改 */
.blog {
width: 100%;
/* 由于不希望内容紧贴着边框,所以在这里可以加上内边距 */
padding: 20px;
}
/* 对于标题(这是第N篇博客)进行设置 */
.blog .title {
font-size: 20px; /* 字体大小 */
font-weight: 700; /* 字体粗细 */
text-align: center; /* 文本居中*/
padding: 10px; /*上下也来一点内边距,看起来很宽松*/
}
/* 对发布时间进行设置 */
.blog .data {
color: green; /* 字体颜色是绿色 */
text-align: right; /* 文本靠右 */
padding: 10px; /*同时加一点内边距,看起来好看点*/
}
/* 对博客内容进行设置 */
.blog .desc {
/* 对首行缩进两个文字大小 */
text-indent: 2em;
}
/* 对查看全文进行设置 */
.blog a {
/* a标签 默认是行内元素,不方便设置各种尺寸啥的,所以先转为块级元素再进行设置 */
display: block;
/* 设置样式 */
width: 140px; /* 宽度 140px*/
height: 40px; /* 高度 40px*/
margin: 10px auto; /* 水平居中 */
line-height: 40px; /* 让文字和高度一样 */
border: 2px black solid; /* 按钮 黑色 实心 */
text-align: center; /* 文字水平居中 */
color: black; /* 颜色改成黑色 */
text-decoration: none; /* 去掉下划线 */
/* 给按钮的颜色加一个小过渡,0.5秒是渐变的时间 */
transition: all 0.5s;
}
/* 鼠标放上去之后 有一个改变颜色的效果 */
.blog a:hover {
background-color: #333; /* 背景色改成黑色 */
color: white; /* 文字颜色改为白色 */
}
二、博客详情页
2.1 背景图片的实现
新建 blog-detail.html文件，由于博客详情页的布局和博客列表页差不多，在之前也已经写过了，所以直接引用即可 ~
博客详情页
此时，博客详情页的背景图片就已经出现了 ~
2.2 导航栏的实现
当然，由于前面已经把很多工作都做好了，所以就直接去复制粘贴即可（虽然一般情况下不建议复制粘贴）：
2.3 页面主体的实现
当然，这个在之前也已经写过了，我们也可以去复制粘贴一部分：
此时，我们唯一要做的事情，就是要给右侧的博客 内容 设置 样式 ~
先来一点博客内容：
我的第一篇博客
2022_10_01 12:00:00
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem porro, magnam maxime reiciendis delectus nemo aut recusandae fuga nihil, quae officiis sed ratione velit quis perspiciatis non beatae quod tempore!
接着创建一个 blog_detail.css文件，来编写正文中的样式 ~
同时，也需要使用 link标签，将这个文件 在 blog-detail.html文件 中引入进来：
.blog-content {
padding: 30px; /* 设置一点内边距 */
}
/* 设置一下标题 */
.blog-content h3 {
text-align: center; /*文字水平居中*/
padding: 20px 0; /*设置一点内边距,上下20px,左右0*/
}
/* 设置日期 */
.blog-content .data {
text-align: right; /*靠右*/
color: rgb(0, 128, 0); /*设置颜色绿色*/
padding: 10px 0; /*设置一点内边距,上下10px,左右0*/
}
/* 设置正文内容 */
.blog-content p {
text-indent: 2em; /*首行缩进两个字的大小*/
}
此时，有细心的小伙伴发现，由于内容比较长，导致右边出现了一个滚动栏，往下一拖，就有错误出现了：
当前方案解决办法：
可以想办法不要让窗口滚动，而是滚动内容即可 ~
可以使用 overflow: auto;
我们把它放到了 common.css文件 的 .container-right 中（因为这是公共的部分，才想起来在 在博客列表页 好像也出现了这种 "溢出" 的情况，正好也可以解决，后面如果需要的话也可以解决）~
三、博客登录页
3.1 导航栏的实现
新建 login.html文件，由于博客登录页的布局和博客列表页差不多，在之前也已经写过了，所以直接引用即可 ~
同样，复制一下之前所写的内容，同时 需要注意的是，把 "注销"部分 给删除 ~
当然，还是要单独创建一个 login.html文件，在里面编辑内容 ~
博客登录页
3.2 登录界面样式的实现
首先需要 在 login.html文件 中实现登录界面的内容：
接着新创建一个 login.css文件，里面编写 登录界面的样式：
当然，不要忘记在 login.html文件 中引入了：
/* 设置一个整体的样式 */
.login-container {
/* 设置高度：父元素body的高度 - 导航栏50px */
height: calc(100% - 50px);
display: flex;
justify-content: center; /* 整个元素在它的父元素 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 设置白框框的样式 */
.login-dialog {
width: 400px;
height: 350px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px; /* 设置圆角矩形 */
}
/* 设置登录样式 */
.login-dialog h3 {
padding: 50px; /* 设置内边距50px */
text-align: center; /* 文字水平居中 */
}
/* 设置用户名、密码啥的样式 */
.login-dialog .row {
height: 50px;
/* 设置弹性布局,水平方向排列*/
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
/* 设置尺寸大小 */
.login-dialog .row span {
width: 100px;
font-weight: 700; /* 文字加粗 */
}
#username,#password {
width: 200px; /* 0~300px均可 */
height: 40px;
font-size: 24px;
border: none; /* 去掉边框 */
outline: none; /* 去掉轮廓线,鼠标碰到边框时出现的线 */
padding-left: 5px; /* 防止输入的时候文字和边框紧紧挨在一起,加上一个左侧的内边距 */
border-radius: 10px; /* 加上圆角矩形 */
}
/* 设置提交按钮的样式 */
#submit {
width: 300px;
height: 40px;
color: white;
background-color: rgb(0, 128, 0);
border: none; /* 去掉边框 */
border-radius: 10px; /* 加上圆角矩形 */
}
/* 设置点击按钮的时候出现的情况 */
#submit:active {
/* 按下的时候会改变颜色 */
background-color: grey;
}
四、博客编辑页
4.1 导航栏的实现
和之前一样，新建 blog_edit文件，引入 CSS/common.css公共样式，复制粘贴导航栏：
博客编辑页
4.2 标题编辑区的实现
由于博客编辑页可以分为两个部分：
现在先在 blog-edit文件 中写上标题编辑器的页面布局部分：
接着，可以新创建一个 blog-edit.css文件，在这里编辑 blog-edit文件 的样式 ~
当然，需要在 blog-edit文件 中引入 blog-edit-container.css文件，样式才可以生效：
.blog-edit-container {
width: 1000px;
height: calc(100%-50px);
margin: 0 auto; /* 水平居中*/
}
/* 对标题设置样式 */
.title {
height: 50px;
/* 水平方向进行布局 */
display: flex;
/* 中间留个空隙 */
justify-content: space-between;
align-items: center; /*垂直居中*/
}
#title {
height: 40px;
width: 895px;
font-size: 24px; /* 让title输入框里面的字变大一点 */
padding-left: 5px; /* 要有一点内边距 */
border: none;
outline: none;
border-radius: 10px;
}
#submit {
width: 100px;
height: 40px;
color: white;
background-color: orange;
border: none;
border-radius: 10px;
}
#submit:active {
background-color: grey;
}
4.3 博客编辑器的实现
这里想使用的博客编辑器，是 markdown编辑器 ~
如果是自己实现的话，就有点不好搞 ~
但是，有很多开源的组件，可以自己直接拿过来用（不是 CV大法，而是调用其他大佬写的组件）~
针对 markdown编辑器，开源的组件有很多，这里使用的是 editor.md ~
官方：Editor.md - 开源在线 Markdown 编辑器
editor.md 这个组件要想正常使用，还依赖一个东西：jQuery 库（这是 JS 中世界最知名的一个库）~
官方：jQuery CDN
反正是一大堆巴拉巴拉的文本，直接去官网上点击，然后去复制一下保存一下就可以了 ~
我就保存在这里了 ~
如何使用 editor.md组件：
下载好 editor.md，并引入到代码中（这个过程也要下载 jQuery 库，并且也要把它引入）
在页面中引入 JS、CSS 等文件（具体官方文档上有，需要保证引入的目录结构和代码是相互匹配的）
在 JS 代码中，初始化 editor.md ~
第二步我是这样放的：
一方面，需要保证这个路径名是正确的，否则肯定加载不出来 ~
另一方面，需要保证 jQuery 的加载要放到 editor.md的所有 js 之前，至于 .css文件 放到哪里倒是无所谓的 ~
第三步我是这样做的：
接着我们就可以创建新的 blog-edit.css文件 来描述一下样式，当然 也需要在 blog-edit.html 上面引入：
.blog-edit-container {
width: 1000px;
height: calc(100%-50px);
margin: 0 auto; /* 水平居中*/
}
/* 对标题设置样式 */
.title {
height: 50px;
/* 水平方向进行布局 */
display: flex;
/* 中间留个空隙 */
justify-content: space-between;
align-items: center; /*垂直居中*/
}
#title {
height: 40px;
width: 895px;
font-size: 24px; /* 让title输入框里面的字变大一点 */
padding-left: 5px; /* 要有一点内边距 */
border: none;
outline: none;
border-radius: 10px;
background-color: rgba(255,255,255,0.6);
}
#submit {
width: 100px;
height: 40px;
color: white;
background-color: orange;
border: none;
border-radius: 10px;
}
#submit:active {
background-color: grey;
}
#editor {
border-radius: 10px;
/* 设置半透明效果,使用 opacity方法 设置的半透明会被子元素继承 */
opacity: 80%;
}
好了，这个博客系统的页面设计 到这里就已经正式结束了 ~
对的，它仅仅只是一个页面设计 ~
同时，它也对前面所介绍的前端知识进行了总结和巩固 ~
如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~
https://pandao.github.io/editor.md/
