个人博客网页设计 第1篇
文件：
① 一般写浏览器 要先清楚浏览器的默认样式 ② 导航栏高度普遍都是50px ③ 写样式css的时候务必要参考着html的内容 ④ 设置圆形:半径设置为尺寸的一半！！ ⑤ 在布局页面时，元素之间的间隙既可以使用内边距,也可以使用外边距，很多时候两者皆可，并没有具体限制、统一标准。 ⑥ 使用内边距的特点：可以让元素的有效区域更大一些！！
2.【回顾】：弹性布局 display:flex; // 开启弹性布局
加上这个属性的元素的子元素就会按照弹性布局来排列：
① 子元素就不再按照“块级元素”“行内元素”这样的规则来工作，统一都会排列成一个横行（补充：div独占一行，span不独占一行） ② 子元素可以使用 justify-content 来控制在水平方向如何排列 （可选属性看我上一篇css） ③ 子元素可以使用align-items来控制在垂直方向如何排列 （布局是加在父元素上的，子元素自身没有布局）
（布局特指的是位置的排列（放在哪里），是一种特殊的样式）
（如果记不住CSS样式，就使用 mdn+搜索的关键词 去查一下）
3.如果想要给整个页面设置背景，就需要给body标签设置背景！那么就需要让body标签先撑满浏览器窗口！
但凡是左右排列成一行的都可以使用弹性布局
4.注：内边距是设置内容和边框之间的距离； 外边距是设置元素和元素之间的距离！！
5.会发现设置文字居中没有用，是因为a是行内元素，默认尺寸就是和内容是一样的，所以文字居中没有效果。 需要先转成块级元素
注：行内元素无法设置尺寸，无法设置外边距，内边距左右能设置，上下不能设置！
6.由于html标签中包含了很多的>和<，因此如果正文中包含了>和<，就需要使用转义字符，否则浏览器可能会解析出错
注意：
① 不直接使用>，而是使用转义字符形式 > => ⼤于号: >
② 不直接使用<，而是使用转义字符形式 < => ⼩于号: <
7.写样式CSS时尽量多使用后代选择器/子选择器，慎重直接使用类名，因为类名很有可能会重复
8.注意水平居中差别：
① 文字： text-align: center;
② 元素：margin: 0 auto; （每个html都可以称为一个元素）
9.相关属性
10.当博客过多的时候会溢出设计好的页面，那此时怎么办呢？
让滚动条出现在右侧内容区！
个人博客网页设计 第2篇
实现导航栏
实现版心
实现个人信息
实现博客列表
首先创建 , 编写博客列表页.
对于导航栏来说, 每个页面都需要, 因此把样式提取出来,写到一个 中，供后续的多个页面来引用
下面调整样式，因为这部分的内容其他页面中不再显示，故我们不再放到 中，而是单独放到一个新的 css 文件中。
创建
首先创建一个 引入导航栏、版心和个人信息，这部分代码和 中相同，因此我们直接复制即可。
从今天开始,我要认真写博客,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.
如何固定背景?? 很容易!!
当前咱们的滚动条是出现在浏览器窗口上的，这就导致拖动滚动条，是整个页面都在滚动，能否把滚动条，给放到某个元素上，让它在里面滚?? => 页面不动，元素里的内容滚动需要给公共样式的 .right 加上一个 CSS 属性：overflow: auto 即可auto 指的是，如果内容没满，就不加滚动条，如果满了，就自动添加滚动条
效果如下:
首先创建 创建
引入导航栏,同时不要忘记引入公共样式 噢
首先创建一个
创建 文件
创建
个人博客网页设计 第3篇
一、岁月从来不曾静好，只是有人在替你背负枷锁，含泪前行。也许是父母，也许是朋友，也许是陌生人……无论是谁，请记得常怀感恩之心。
二、这个世界并不完美，甚至有点残酷。你无法决定下一段旅途遇见的是好事还是坏事，可你能决定面对它们的态度。你看这个世界的角度，决定了这个世界给你的温度。
三、总会有一件事让你瞬间长大，也总会有一个人让你泪如雨下。愿你早日领教这个世界的深深恶意，让自己活得开心得意。
四、想要与众不同，却总随遇而安，想要做很多未做的事，却在现实棘手的吃喝拉撒前低下了头，我们间歇性热血满腔，长时间迷茫犯懒，别等了，再努力试试看！