个人博客网页设计 第1篇
首先创建 Blogging_system 文件，在这个文件里存放：
1️⃣创建一个 image 文件，存放一张图片（自己喜欢的，用来当博客背景），例如我的image 文件存放一个猫的图片（）
2️⃣创建一个 css 文件，再创建一个 ：用来存放公共的样式
3️⃣创建 ：用来存放设计博客页面的代码
个人博客网页设计 第2篇
页面里有 html 和 body（注意 head 里边的内容不会写在页面上），所以 html 和 body 是构成页面的主体；则给页面设置背景就是给 body设置背景
上述说明要给 body 设置背景图，就要在公共样式中设计背景图：
1️⃣在进行插入图片时，要找准图片的位置，刚才我们图片的位置在 上一级的文件夹中，则使用 ../来找到上一级文件，在通过 image 找到
2️⃣这个时候就把图片作为了背景图，但是这样简单的设计时不合理的，我们需要设计它的边边角角的问题：需要将图片填满整个元素：
3️⃣这个时候发现图片并没有设置高度，才能正确显示：如果给 body 设置固定高度，就不能适应窗口大小；更希望 body 和浏览器窗口一样大，并且根据窗口大小自适应：将 html 高度设置成 100%，并且 body 高度也设置成 100%
❗❗height：100%的意思是当前元素的高度和父元素一样高
按照当前 html 代码的写法：body 的父元素是 html 元素，html 父元素是浏览器窗口
这里设计的思路：让 html 元素和浏览器窗口一样高，再让 body 和 html 一样高，此时 body 就和浏览器窗口一样高了
本质上就是一个 div，使用弹性布局，把里边的内容水平方向排序
首先我们设计一个 logo，我们把 logo 图片放到刚刚创建的 image 文件中
操作，一个简单的博客系统需要有：我的博客系统、主页、写博客、注销等导航栏
此时我们可以看到布局了，但是样式还没设置，所以看的不是很清晰
在 中设置样式
1️⃣根据 nav（导航栏）设置样式：设置导航栏高度、背景色为黑色，文本为白色
此时我们看到了想要看到的，但是logo图片太大了
2️⃣设置logo图片大小：设置宽度高度
这里看到文本时竖直排列，不合适
3️⃣文本设置为水平排列，这时候需要在父元素 .nav 里添加弹性布局, 让里面的元素水平方向排列，并且垂直居中
此时看到左右外边距太挤了，并且logo不好看
4️⃣首先让 logo 设置左右外边距，使之有一些缝隙，并且使得 logo 从圆形矩阵变为圆形，这个操作需要设置的是 logo 的问题，需要在 .nav img 中设置：
5️⃣设置a标签字体颜色为白色，并且去掉下划线，使之出现内边距，期望得到这些字体在右边
此处的 .spacer 是使用了一个简单粗暴的写法：用来把后面的链接挤过去，注意看html中所写的
这个时候我们看起来的导航栏是一个不错的样式了
6️⃣设置透明度：最后可以根据个人习惯，可以把导航栏设置半透明效果，这个时候需要在我们写过的 .nav 中修改背景图（background-color）颜色进行透明度设置
✅此时的编写导航栏就已经完成了，是不是有一种豁然开朗的感觉
正文设计也成为“版心”，需要实现居中对齐
操作，在设置版心的时候，不仅需要居中对齐，也需要的是左侧放用户信息，右侧放博客列表
在 设置页面的主体部分样式：
1️⃣首先需要设置尺寸（宽度：并且水平居中；高度设置成和浏览器窗口一样高）
宽度比较好设置，那么高度怎么设置成和浏览器窗口一样高呢❓❓❓假设先设置成100%，看效果
这个时候我们发现最下边多出一块，是因为我们这里的 .container 并不是顶着导航栏上边往下的，而是导航栏下边开始；那么这个时候 container 的高度并不是 100%，而是在 100% 基础上减去导航栏的高度：height: calc(100% - 50px);
❗❗注意：在 height: calc(100% - 50px); 这种写法会有坑，这种写法是 CSS3 版本中的特性，calc 类似与函数一样（当然CSS实际上是没有函数的概念），calc参数就是可以对尺寸进行运算。这里写的 100%就会自动被替换成父元素的高度（此处就是 body 的高度）
❗❗注意：减号两侧必须要加空格；如果不加就不能正确识别（在CSS中根本不会存在算术运算的概念）
2️⃣设置弹性布局，并且设置左右侧信息的样式：首先我们将左侧信息栏样式设置为红色，右侧信息栏样式设置为绿色
此时我们就看到了左右布局
3️⃣使左右布局中间出现缝隙，使 .container-right 中的宽度设置为 width: 795px ，为了留出5px；最后使里边的元素能够等间距铺开
使左右布局中间出现缝隙，使 .container-right 中的宽度设置为 width: 795px ，为了留出5px；
个人信息中有：用户头像、用户名、超链接/统计信息
前端页面的代码编写，一般都是先把 html 写好，再把页面结构确定好，然后在编写样式
1️⃣为了显示的比较清晰，我们先把背景样式去掉
首先编写左侧信息栏：
这个时候样式还是比较混乱，则需要加上css样式
1️⃣左侧信息栏：
个人博客网页设计 第3篇
需要重新定义一个页面，俗话说完事开头难，博客列表页写出来之后，后边就是复制粘贴，要注意一些细节问题
创建一个博客详情页：
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
从今天起，我要认真写代码，做一个奋斗小温，Lorem ipsum dolor sit amet consectetur adipisicing elit.
创建一个 ，用来存放博客详情页的专属样式
这个时候 博客详情页 就已经写完了
❗❗❗但是存在在一个问题（当段落比较长的时候看效果）：
此时发现，当内容太长 超出一个屏幕的时候，浏览器窗口就自动带有滚动条了，此时就会把这个背景给滚没了，改进方法：把滚动条加到 container-right 上；在中操作
个人博客网页设计 第4篇
创建一个 文件
1️⃣下载 文件
2️⃣引入 jQuery 文件
这个组件要想正常使用，还依赖一个东西：jQuery 库（这是 JS 中世界最知名的一个库）
创建一个 js 文件，创建 ，将上边打开的链接全部复制粘贴进入，至此 jQuery 包导入成功
当然也可以直接使用网页版的不需要导入本地中