☕导航小助手☕
🍚写在前面
🥡前置说明
🍱预览效果
写在前面
在之前的博客中，我们已经学习了 HTML、CSS、JS、WebAPI 等相关的内容，虽然没有深入的学习，学习的只是一些基本的内容，但是 对于现阶段的自己也已经是足够了的 ~
在这篇博客中，将要把之前所学习的前端知识都用起来，做一个综合案例 —— 博客系统 的页面设计 ~
当然，这也是一篇对于前端知识的完结之作 ~
因为暂时是用前端知识的嘛，所以现阶段只是做出一个 博客系统 的 页面设计（当然，真正的博客系统 有前端页面，也有后端 Java代码，更是需要有 前后端交互）~
那么，现在开始 博客系统（页面设计）的学习 ~
前置说明
这只是一个简单的博客系统的页面设计，其功能肯定不如 CSDN 多，但是也是一个简化版本的博客系统 的 页面的设计了 ~
博客系统的页面设计主要分为四个部分：
- 博客列表页
- 博客详情页
- 博客登录页
- 博客编辑页
预览效果
博客列表页 预览效果：
博客详情页 预览效果：
博客登录页 预览效果：
博客编辑页 预览效果：
一、博客列表页
1.1 导航栏的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客列表页</title>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
<img src="image/logo1.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 这个 spacer 用来占位,左右布局的 给撑开来 -->
<span class="spacer"></span>
<!-- 这里有几个按钮：我的主页、写博客、注销 -->
<a href="blog_list.html">我的主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
</body>
</html>但是，经过浏览器运行过后，我们会发现，结果和预先想好的效果相差甚远：
这个图片我缩小了，不然放原图太大了拍不下 ~
咳咳，虽然图片有点大，但是 有关系吗？ —— 没有关系 ~
不要着急，现在我们需要实现页面布局 ~
由于在事先想好的页面布局中，导航栏在许多的页面都存在，所以我们可以把和导航栏相关的样式写到一个单独的 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 中进行引入：
<!-- 引入 CSS/common.css文件-->
<link rel="stylesheet" href="CSS/common.css">
这个图片我缩小了，不然放原图太大了拍不下（不然 背景图片和浏览器窗口不匹配啥的） ~
可以看见，背景图片已就绪 ~
接下来，就可以设置一些背景图片的相关属性：
/* 设置背景图片的相关属性 */
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 中实现页面主体的部分了 ~
<!-- 页面主体 -->
<div class="container">
<!-- 左侧显示个人信息 -->
<div class="container-left"></div>
<!-- 右侧显示内容详情 -->
<div class="cotainer-right"></div>
</div>接下来，可移步至 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 中的函数,其效果是：进行尺寸的计算
最低0.47元/天 解锁文章
扫一扫
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
