web 博客类网站制作1

生活当中许多人用vlog记录生活的美好瞬间，同时我们也可以利用网站留下我们的生活记录

1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。

2 padding（内边距）是包围在内容区域外的空白区域，代表的是盒子边框与实际内容之间的距离，通过【padding】相关属性设置大小

3border指的是盒子模型的边框。border除了可以使用`border-width`设置边框大小外，可以使用`border-style`设置边框的样式，如实线、虚线，使用`border-color`设置边框颜色

- 结构部分，li本身就代表一项内容，没必要嵌套span,不仅结构会很复杂，样式代码也一样复杂。

4margin（外边距）指的是盒子和其他元素之间的空白部分，代表的是盒子的边框与其他相邻盒子边框之间的距离，通过【margin】相关属性设置大小

- 注意（标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小）

5 div设置的width和height设置为200×100，实际大小也是200×100，`div的实际宽度 = width，div的实际高度 = height`

6border-style：solid-实线边框，dashed-虚线边框，dotted-点线边框

7 三种基本选择器的优先级：id选择器>class选择器>标记选择器*

8网页中添加图片的两种方式：1结构内容形式添加图片<img>2样式语句的形式添加背景图片 background-image

9 - 背景重复 background-repeat属性设置

no-repeat 不重复

repeat-x -y 沿x轴方向重复沿y轴方向重复

repeat 重复

10 背景定位 background-position

top,bottom,left,center,100px,5cm

- border-radius属性圆角边框

border-radius：15px 50px 30px 5px;

顺序依次为左上角右上角右下角左下角

（两个值第一个为左上角右下角，第二个为右上角和左下角）

11 **理解盒子模型的思想**

 当我们给盒子指定padding值之后，发生了2件事情:

1.内容和边框有了距离，添加了内边距。
2.padding影响了盒子实际大小。

- 使用padding，margin，border的属性设置

- 用div+css实现页面布局