上一篇文章是一个总结。 我刚刚发现在微信上分享一本小书的链接会崩溃。 不知道为什么，它显示了一些诱导信息。 诱因是什么？ 学习？ [总督]

总之，还是要有始有终吧~我确定我不会用这个平台做js总结。 我先搬到知乎去。 稍后见，呵呵~

本摘要涵盖背景、表格和表单、定位和响应式设计。

一、背景

经常使用与背景相关的样式。 在CSS3之前要添加阴影效果，可以使用背景相关的属性和定位来显示它们。 圆角只能一开始就剪成圆角，显示为图片或背景图片。 基于这种新添加的阴影和圆角也总结在背景相关的属性中。

-颜色

-图像

-

-

-

-夹子

-

-尺寸

（缩写属性）

(1)-color用于设置背景颜色，rgb和十六进制值都可以写。

(2) -image 设置背景图片和背景渐变颜色，可选值：

1) -image: url(xx.jpg) 使用相对路径引入图片

- 如果背景图片大于元素尺寸，则默认显示图片的左上角

- 如果背景图像小于元素大小，则默认情况下图像将平铺以填充元素。

-您可以同时设置背景颜色和背景图片。 背景颜色用作图像的背景颜色。 通常是同时设置的。 未加载图像时显示颜色。

2)-(,,...)

默认从上到下线性渐变。 在颜色前添加可以指定渐变的方向。 指定角度可以改变渐变角度。 例子：

-image:-（向右，红色，）渐变将从左到右，从红色到黄色。

-image:-(45deg, red, )从红到黄的渐变，方向旋转45度

渐变可以同时指定多种颜色。 默认情况下，多种颜色均匀分布。 您还可以指定渐变开始的位置。 例子：

-图像：-（红色 50 像素、100 像素）

意思是50px以上的位置是纯红色，从50px以下的位置开始，逐渐渐变为黄色，到100px的位置，然后是纯色黄色

3)--线性渐变可以根据指定值之间的差异进行平铺和重复。

4)-图像:-(,,...)

径向渐变。 默认情况下，径向渐变形状是根据元素的形状计算的。 径向渐变从元素的中心开始。您可以手动指定径向渐变的大小； 您还可以指定径向的起始位置

例子：

-图像：-（100px 100px，红色，）

表示径向渐变大小为100*100px，剩余空间显示为黄色

-图像:-(100px 100px at 0 0, 红色, )

可以指定at后面的位置，表示径向渐变的起始位置。 也可以将尺寸留空，只需在at后面写上位置即可。

5)--可以指定重复的径向渐变

(3) - 设置背景图像的重复模式，可选值：

- 默认情况下，背景图像将在两个方向上重复

-no- 不要重复背景图片，显示它有多大

--x 水平重复

--y 垂直重复

(4)-调整背景图片位置，可选值：

-top right left 这两个值可以用来指定位置，

喜欢-：

- 如果只给出一个值，则第二个值默认为

-你也可以直接指定两个偏移量：

第一个是水平偏移，第二个是垂直偏移，正值是向右或向下，负值是向左或向上

如：-:100px 0px

(5) - 用于设置图像是否随着页面滚动而滚动。 可选值：

- 默认值，将随页面滚动

-fixed 背景图片会固定在某个位置，不随页面滚动。 背景图像不会相对于浏览器窗口移动。 一般设置在body上。 如果设置为其他元素，当页面滚动到该元素末尾时，图像会跟随。 以此结束

(6) -clip 设置背景范围，可选值：

--box 默认值，背景将出现在边框下方

--box背景只会出现在内容区域

(7) - 背景图像定位偏移计算的定位原点，可选值：

--box默认值从开始

--box 根据内容区域计算

--box 从边界框计算

(8)-size设置背景图片大小

- 直接写值，两个值指定宽度和高度

-写入一个值，第二个默认为auto，按比例变化

-写入百分比，第二个值为auto，水平/垂直满

- 覆盖，比例不变，元素被覆盖

- 比例保持不变，图像完整显示在元素中

(9)（缩写属性）

所有相关属性都可以用它来设置，没有顺序数量要求，但是：

-size必须写在-后面，用斜杠/分隔

-剪辑必须在-之后

(10)轮廓阴影和圆角属性

1) 用于设置轮廓。 用法和上面一样，但是不会影响可见框架的大小，也不会影响整个布局。 一般用于设置移入状态悬停。

2）box-：x偏移 y偏移 阴影模糊半径 颜色 rgba

设置的阴影不会影响页面布局

3)-设置圆角

-top-left-左上角圆角

-top-right 右上角圆角

--left- 左下角圆角

--right-右下圆角

-指定一个值是圆角，指定一对值是椭圆，第一个是水平的，第二个是垂直的：

-：20px / 40px 椭圆

-指定四个值表示顺时针指定圆角； 三个值分别是左上、右上&左下&右下； 两个值分别是左上&右下、右上&左下

--:50%变圆

2. 表格 (1) 表格

1）表格，使用table标签创建表格，默认没有边框

-table中用tr表示表中的一行，td表示单元格

-语法：

-表可以嵌套在td中

2）、用于合并水平单元格，分配给需要合并的td，删除多余的单元格

- 语法：n表示这个单元格应该占据多少个位置（加上它合并了多少个位置）

3）用于设置垂直单元格，将其分配给需要合并的td，并删除多余的单元格。

4) 表格样式

①-该属性可以设置table和td之间的距离。 table 和 td 之间有一个默认距离。

②- 属性可用于设置表格边框合并，可选值：

- 设置该属性会自动失效

可以给table设置-属性，然后给td单独设置边框。

5) 长格式

在某些情况下，桌子很长。 这是因为 HTML 提供了三个标签来将表格分为三个部分：标题、主题和底部。

thead表头始终显示在表的头部； tbody表格主体始终显示在表格中间； tfoot table 显示在远离表格底部的位置：

(2) 形式

网页中的表单用于向服务器提交信息。 最常用的就是百度搜索框。

首先，使用form标签创建一个表单，表单必须有属性。 该属性指向提交信息的服务器地址。 语法是：

这时候就创建了一个空白表单，需要添加不同的表单项，写在form标签中：

1）Input使用input自关闭标签并修改type值来创建表单项：

① text 属性用于创建文本框。 要提交表单的内容，必须指定名称属性。 name代表提交内容的名称。 用户填写的信息会附加到URL地址上，以查询字符串的形式发送到服务器：url地址?查询字符串

② 该属性用于创建提交按钮，value属性可以修改按钮的文本。

③ 该属性可用于创建密码，且必须指定 name 属性值。

④radio 创建单选按钮。 单选按钮按名称属性分组。 具有相同名称属性的为一组。

- 这种需要用户选择但不需要用户直接填写内容的表单项也必须指定一个value属性，这样选择的表单项的value属性值才会最终提交到服务器

⑤ 创建多选框。 相同的名称值表示同一组。 使用value值指定值并提交给服务器。

⑥重置 设置重置按钮，将表单所有内容恢复为默认值。

⑦ 设置属性可用于创建简单的按钮，与js结合使用

⑧颜色设置完成后，可以在浏览器中选择颜色

⑨ 可以设置自动补全，=“on”开启自动补全

⑩ 设置为只读，数据将被提交

⑪ 设置为禁用，数据不会提交

⑫ 设置表单项自动获得焦点

2）标签创建下拉列表，使用标签一一创建列表项：

-name 属性需要分配给标签

需要给标签赋值-value属性，表示提交给服务器的数据

- 设置该属性可以将下拉列表变为多选下拉列表

- 标签可以对下拉列表中的列表项进行分组。 使用标签属性来设置组的名称。

- 设置该属性默认选择下拉列表中的一项

语法：

选项一

选项二

方案三

3）文本字段创建多行文本框

您还需要指定 name 属性

使用css中的属性设置文本字段不能调整大小，值选择none，:none

4）标签，可选类型值：

-

-重置

-

三种类型值与input的功能相同，但标签不是自结束标签，更加灵活（按钮可以以图片的形式存在），更推荐。

3、定位

,定位属性，可选值

(1) 默认值，不启用元素定位

(2)开启元素相对于其原始位置的相对定位

-设置了相对定位的元素不会脱离文档流

-相对定位会将元素提升一级

-开启元素定位时，必须设置偏移量

- 可以通过left、right、top四个属性设置元素偏移量

left：元素相对于其定位位置的左偏移量

right：元素相对于其定位位置的右偏移量

top：元素相对于其定位位置的上偏移量

：元素相对于其定位位置的下偏移量

- 相对定位不会改变元素的本质，无论是块元素还是块元素，还是行内元素还是行内元素。

(3)粘性定位，固定在某个位置开启滚动条的元素。

{:;

顶部：n 像素；}

(4)开启元素的绝对定位，

- 开启绝对定位会导致元素脱离文档流

-开启绝对定位后如果不设置偏移量，元素的位置不会改变。

top：元素相对于其定位位置的上偏移量

left：元素相对于其定位位置的左偏移量

right：元素相对于其定位位置的右偏移量

：元素相对于其定位位置的下偏移量

-绝对定位也会将元素提升到更高的层次

-绝对定位会改变元素的性质。 行内元素变成块元素。 块元素的宽度和高度默认随内容扩展。

- 位置偏移量是相对于开启定位的最近祖先元素：一般情况下，开启子元素的绝对定位会开启父元素的相对定位。如果所有祖先元素都没有开启定位，它们将相对于浏览器窗口定位。

当父元素开启且子元素开启时，你可以：

:;

左：0；

右：0；

顶部：0；

:0;

：汽车;

子元素在父元素上水平和垂直居中

(5)fixed开启元素的固定定位（也是绝对定位的一种）

- 开启固定位置会导致元素脱离文档流

- 固定定位也是绝对定位的一种。 它的大部分功能与绝对定位相同。 不同之处在于固定定位始终相对于浏览器窗口定位。

- 固定定位将固定在浏览器窗口中的某个位置，并且不会随滚动条滚动。

(6) z-index元素级别

对于开启的元素，可以使用z-index修改元素级别，直接写入一个整数。 数值越高，等级越高。 但是，无论父元素有多高，它都不会覆盖子元素。

4.响应式布局

网页通过不同的设备或窗口大小可以呈现不同的效果。 使用响应式布局，一个网页可以适合所有设备。

响应式布局的关键是媒体查询。 通过媒体查询，可以针对不同的设备或者设备的不同能力分别设置样式。

媒体查询，语法：

@media查询规则{}

(1)媒体类型：

所有所有媒体类型

打印打印装置

带屏幕的设备

屏幕阅读器

例子：

@media print{-color:#bfa}

表示打印的背景颜色为#bfa

使用逗号链接多个媒体类型，以便它们是或

@media 仅打印{-color:#bfa}

添加只是为了避免旧版本浏览器出现兼容性问题。 新版本无论添加与否都会有同样的效果，旧版本会忽略它以避免出现问题。

（二）媒体特点：

宽度 视口宽度

视口高度

min-width 最小宽度

max-width 最大宽度

针对特定视口宽度的样式

例子：

@media（最小宽度：500px）

身体{-颜色:#bfa}

表示该样式在视口大于500px时生效

风格切换的分界点称为断点。 此时网页样式将会发生变化。 常用的断点有：

小于768超小屏max-width=768px

大于768的小屏min-width=768px

大于992中型屏幕min-width=992px（pad屏幕）

大于1200大屏min-width=

例子：

仅@media 和（最小宽度：500px），（最大宽度：300px

身体{-颜色:#bfa}

该样式在视口大于500px或小于300px时生效

仅@media 和（最小宽度：500px）和（最大宽度：700px

身体{-颜色:#bfa}

当视口大于500px小于700px时，样式生效

洒花，写完！

写在背面：

现在已经学习快一个月了，感觉给自己设定一个学习目标是非常愉快的。 学习初期每天都觉得很充实，但是到了后期就感觉有点焦虑。 我也怀疑学习这些对我作为设计师是否有用。 更多 专注于自己的专业不是很好吗？

但为了有一个开始和一个结束，不让之前的努力白费，我就应该完成它。 抓住学生时代的最后一段时间来学习新的东西不是很好吗？

话又说回来，无论对以后的工作有多大用处，我认为都是值得的。

一方面，学习这些东西本身就是一种乐趣。 所谓“所敲即所得”，一节课的结果能够清晰地反映回来，这让我很有成就感。 这本身也引起了我的兴趣。 刚刚学完这些基础内容，我就可以自信的说，我可以打出普通的静态网页了。

另一方面，虽然我的工作经验还不够丰富，但是我能感觉到，有了这些基础知识，对于和前端工程师的沟通，包括在做自己的工作时，都会起到积极的作用。 良好的沟通可以让团队协作更加高效，气氛更加愉悦，更深层次上可以树立更良好的职业形象，增加话语权。 以前经常听说工作中了解一些对方的情况会很方便。 也许他们从一开始就将彼此置于对立的一边。 但如果每个人都在做同一个项目，那么更有效地沟通不是更好吗？ 就当是我美好的愿望吧，hhhh~