css

CSS 层叠样式表

B 站教程

1. CSS 简介

1.1 HTML 的局限性

说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义.比如 <h1>表明这是一个大标题，<p>表明这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接.很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点:丑.

1.2 CSS-网页的美容师

CSS 是也是一种标记语言，是层叠样式表(CascadingStyleSheets)的简称，
有时我们也会称之为 CSS 样式表或级联样式表.
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式.
CSS 最大价值:由 HTML 专注去做结构呈现，样式交给 CSS，即结构(HTML)与样式(CSS)相分离.

1.3 CSS 语法规范

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明.

• 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
• 属性与属性值之间用键值对链接
• 属性与属性之间用分号(;)分割

1.4 CSS 代码风格

1. 样式格式书写
   • 紧凑型

     h3 {
       color: deeppink;
       font-size: 20px;
     }

   • 展开型

     h3 {
       color: deeppink;
       font-size: 20px;
     }

2. 样式大小写
   强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
3. 空格规范
   • 属性值前面，冒号后面，保留一个空格
   • 选择器(标签)和大括号中间保留空格

2.CSS 基础选择器

2.1 选择器分类

选择器分基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器，类选择器，id 选择器和通配符选择器

2.2 标签选择器

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式.

2.3 类选择器

如果想要差异化选择不同的标签单独选一个或者某几个标签可以使用类选择器
语法

.类名 {
  属性1: 属性值1;
}

• 类选择器使用”.”(英文点号)进行标识后面紧跟类名(自定义我们自己命名的).
• 可以理解为给这个标签起了一个名字来表示.
• 长名称或词组可以使用中横线来为选择器命名.
• 不要使用纯数字、中文等命名尽量使用英文字母来表示

2.4 类选择器-多类名

我们可以给一个标签指定多个类名从而达到更多的选择目的.这些类名都可以选出这个标签简单理解就是一个标签有多个名字

1. 多类名使用方式

<div class="redfont font-size20">刘德华</div>

2. 多类名开发中使用场景
   (1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面
   (2)这些标签都可以调用这个公共的类，然后再调用自己独有的类
   (3)从而节省 CSS 代码，统一修改非常方便

2.5 id 选择器

/* id选择器的口诀:样式#定义结构id调用，只能调用一次别人切勿使用 */
#pink {
  color: pink;
}

id 选择器和类选择器的区别
① 类选择器(class)好比人的名字一个人可以有多个名字，同时一个名字也可以被多个人使用.
② id 选择器好比人的身份证号码全中国是唯一的不得重复.
③ id 选择器和类选择器最大的不同在于使用次数上
④ 类选择器在修改样式中用的最多 id 选择器一般用于页面唯一性的元素上经常和 JavaScript 搭配使用.

2.6 通配符选择器

*选择页面中全部元素
语法:

* {
  属性1: 属性值1;
  ...;
}

• 通配符选择器不需要调用自动就给所有的元素使用样式
• 在 CSS 中通配符选择器使用*定义它表示选取页面中所有元素(标签).

3. Font 字体属性

3.1 Font-family 字体系列

CSS 使用 font-family 属性定义文本的字体系列.

p {
  font-family: "微软雅黑";
}
div {
  font-family: Arial， "Microsoft Yahei" ， "微软雅黑";
  /* 多个字体的作用是按从左到右依次查看直到用户电脑中有该字体，则使用该字体显示 */
}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体加引号
• 尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体 :body{ font-family:’Microsoft YaHei’，tahoma，arial，’Hiragino Sans GB’; }

3.2 Font-size 字体大小

p {
  font-size: 20px;
}

CSS 使用 font-size 属性定义字体大小，单位为 px(像素)

• 标题像素比较特殊，需要独特设置
• px(像素)大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为 16px
• 不同浏览器可能默认显示的字号大小不一致我们尽量给一个明确值大小不要默认大小
• 可以给 body 指定整个页面文字的大小

3.3 font-weight 字体粗细

font-weight : normal | bold | bolder | lighter | number
参数:

• normal:正常的字体.相当于 number 为 400.声明此值将取消之前任何设置
• bold:粗体.相当于 number 为 700.也相当于 b 对象的作用
• bolder:IE5+ 特粗体
• lighter:IE5+ 细体
• number:IE5+ 100|200|300|400|500|600|700|800|900

3.4 font-style 文字样式(如斜体)

CSS 使用 font-style 属性设置文本的风格.

p {
  font-style: normal;
}

属性值	作用
normal	默认值浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式.

• 注意:平时我们很少给文字加斜体反而要给斜体标签(em，i)改为不倾斜字体

3.5 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

body {
  font: font-style font-weight font-size/line-height font-family;
}

• 使用 font 属性时必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略(取默认值)但必须保留 font-size 和 font-family 属性否则 font 属性将不起作用

4.文本属性

• CSS Text(文本)属性可定义文本的外观比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色

color 属性用于定义文本的颜色.

div {
  color: red;
}

4.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式

div {
  text-align: center;
}

属性值	解释
left	左对齐(默认值)
right	右对齐
center	居中对齐

4.3 装饰文本

text-decoration 属性规定添加到文本的修饰.可以给文本添加下划线、删除线、上划线等

div {
  text-decoration: underline;
}

属性值	描述
none	默认.没有装饰线(最常用)
underline	下划线. 链接 a 自带下划线(常用)
overline	上划线.(几乎不用)
line-through	删除线.(不常用)

可以设置 css 属性取出超链接标签的默认下划线

4.4 文本缩进

text-indent 属性用来指定文本的第一行的缩进通常是将段落的首行缩进
语法:

div {
  text-indent: 10px;
}

通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值.

p {
  text-indent: 2em;
}

em 是一个相对单位就是当前元素(font-size)1 个文字的大小，如果当前元素没有设置大小则会按照父元素的 1 个文字大小

4.5 行间距

line-height 属性用于设置行间的距离(行高).可以控制文字行与行之间的距离

p {
  line-height: 26px;
}

5. CSS 的引入方式

5.1 CSS 的三种样式表

按照 CSS 样式书写的位置(或者引入的方式)CSS 样式表可以分为三大类

1. 行内样式表(行内式)
2. 内部样式表(嵌入式)
3. 外部样式表(链接式)

5.2 内部样式表

内部样式表(内嵌样式表)是写到 html 页面内部，是将所有的 CSS 代码抽取出来单独放到一个<style>标签中.
语法:

<style>
   div {
   color:red;
   font-size:12px;
   }
</style>

• <style>标签理论上可以放在 HTML 文档的任何地方但一般会放在文档的<head>标签中
• 通过此种方式可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰但是并没有实现结构与样式完全分离
• 使用内部样式表设定 CSS 通常也被称为嵌入式引入这种方式是我们练习时常用的方式

5.3 行内样式表

<div style="color : red; font-size : 12px;">行内样式表</div>

• style 其实就是标签的属性
• 在双引号中间写法要符合 CSS 规范
• 可以控制当前的标签设置样式
• 由于书写繁琐并且没有体现出结构与样式相分离的思想所以不推荐大量使用只有对当前元素添加简单样式的时候可以考虑使用

5.4 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况.核心是:样式单独写到 CSS 文件中之后把 CSS 文件引入到 HTML 页面中使用.

• 引入外部样式表分为两步

1. 新建一个后缀名为.css 的样式文件把所有 CSS 代码都放入此文件中.
2. 在 HTML 页面中使用<link>标签引入这个文件.<link rel="stylesheet" href="css文件路径">

6. Chrome 调试工具

6.1 使用调试工具

• Ctrl+滚轮 可以放大开发者工具代码大小.
• 左边是 HTML 元素结构右边是 CSS 样式
• 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色.
• Ctrl +0 复原浏览器大小.
• 如果点击元素发现右侧没有样式引入极有可能是类名或者样式引入错误如果有样式但是样式前面有黄色叹号提示则是样式属性书写错误.

7. Emmet 语法

Emmet 语法的前身是 Zen coding，它使用缩写，来提高 htm/css 的编写速度，Vscode 内部已经集成该语法

1. 快速生成 HTML 结构语法
2. 快速生成 CSS 样式语法

7.1 快速生成 HTML 结构语法

1. 生成标签 直接输入标签名按 tab 键即可 比如 div 然后 tab 键，就可以生成<div></div>
2. 如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成 3 个 div
3. 如果有父子级关系的标签，可以用>比如 ul > li 就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div + p
5. 如果生成带有类名或者 id 名字的，直接写.demo 或者 #two 然后 tab 键就可以了
6. 如果生成的 div 类名是有顺序的，可以用自增符号 $， 如 .demo$*5
7. 想要生成的标签带文字，可以使用{}包含你的文字，如 div{text}

7.2 快速生成 CSS 样式语法

1. 比如 w200 按 tab 可以生成 width : 200px;
2. 比如 lh26 按 tab 可以生成 line-height : 26px;

<style>
       .one {
           /* w200 */
           width: 200px;
           /* tac */
           text-align: center;
           /* ti2em */
           text-indent: 2em;
           /* tdn */
           text-decoration: none;
       }
   </style>

8. CSS 的复合选择器

8.1 什么是复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的.

• 复合选择器可以更准确、更高效的选择目标元素(标签)
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

8.2 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素.其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔.当标签发生嵌套时，内层标签就成为外层标签的后代.
语法:

元素1 元素2{ 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2(后代元素)
例如:

ul li { 样式声明 } /* 选择 u1 里面所有的 1i标签元素/

• 元素 1 和 元素 2 中间用空格隔开
• 元素 1 是父级，元素 2 是子级最终选择的是元素 2
• 元素 2 可以是儿子，也可以是孙子等，只要是元素 1 的后代即可
• 元素 1 和 元素 2 可以是任意基础选择器，如.nav li {color: yellow;}

8.3 子选择器(重要)

**子元素选择器(子选择器)*只能选择作为某元素的最近一级子元素.简单理解就是选亲儿子*元素
语法:

元素1>元素2 { 样式声明 }

上述语法表示 选择元素 1 里面的所有直接后代(子元素)元素 2.
例如:

div > p{ 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素*/

• 元素 1 和 元素 2 中间用 大于号 隔开
• 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
• 可以嵌套使用，如.nav>p>a {color: yellow;}

8.4 并集选择器

• 并集选择器可以选择多组标签，同时为他们定义相同的样式.通常用于集体声明.
• 并集选择器是各选择器通过英文逗号，连接而成，任何形式的选择器都可以作为并集选择器的一部分.
  语法:

元素1，元素2{ 样式声明 }

上述语法表示选择元素 1 和 元素 2.

例如:

ul，div{ 样式声明 }  /* 选择 ul和 div标签元素 */

• 元素 1 和元素 2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

8.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第 1 个，第 n 个元素.
伪类选择器书写最大的特点是用冒号:表示，比如:hover、:first-child
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器

8.5.1 链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)

• 链接伪类选择器注意事项

1. 为了确保生效，请按照LVHA的循顺序声明:link-:visited-:hover-:active
2. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

• 链接伪类选择器实际工作开发中的写法

/*a 是标签选择器 所有的链接 */
a {
  color: gray;
}
/*:hover 是链接伪类选择器 鼠标经过 */
a:hover {
  color: red; /*鼠标经过的时候，由原来的灰色变成了红色*/
}

8.5.2 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说.

input:focus {
  background-color: yellow;
}

8.6 总结

选择器	作用	标签	语法	示例代码
全局选择器	选择所有元素	*	无	* {样式}
元素选择器	选择页面中所有特定的元素	任意 HTML 标签	标签名	元素名 {样式}
类选择器	选择具有特定 class 的所有元素	任意带有 class 属性的 HTML 元素	.类名	.类名 {样式}
ID 选择器	选择具有特定 ID 的元素	任意带有 ID 属性的 HTML 元素	#ID 名	#ID名 {样式}
属性选择器	根据属性选择元素	任意带有特定属性的 HTML 元素	[属性名]	[属性名] {样式}
子选择器	选择指定元素的直接子元素	任意 HTML 元素	父级 > 子级	父级 > 子级 {样式}
后代选择器	选择指定元素的所有后代（嵌套的子元素）	任意 HTML 元素	父级 子级	父级 子级 {样式}
相邻兄弟选择器	选择紧接在指定元素之后的元素	任意 HTML 元素	元素 1 + 元素 2	元素1 + 元素2 {样式}
通用兄弟选择器	选择指定元素之后的所有兄弟元素	任意 HTML 元素	元素 1 ~ 元素 2	元素1 ~ 元素2 {样式}
群组选择器	同时选择多个选择器	任意 HTML 元素	选择器 1，选择器 2	选择器1， 选择器2 {样式}
focus 选择器	选择获得焦点的 input 元素	input 标签	无	input:focus {样式}
:hover 选择器	选择鼠标悬浮的元素	任意 HTML 标签	选择器:hover	选择器:hover {样式}
子串属性选择器	选择属性中包含特定子串的元素	任意带有属性的 HTML 标签	[属性名*=值]	[属性名*=值] {样式}
开始子串属性选择器	选择属性值以特定子串开始的元素	任意带有属性的 HTML 标签	[属性名^=值]	[属性名^=值] {样式}
结束子串属性选择器	选择属性值以特定子串结束的元素	任意带有属性的 HTML 标签	[属性名$=值]	[属性名$=值] {样式}
伪类选择器	选择元素的特定状态	任意 HTML 标签	选择器:伪类	选择器:伪类 {样式}
伪元素选择器	选择元素指定的部分	任意 HTML 标签	选择器::伪元素	选择器::伪元素 {样式}

9.CSS 的元素选择模式

9.1 什么是元素显示模式

作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>.

• HTML 元素一般分为块元素和行内元素两种类型

9.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素

• 块级元素的特点:
  ① 比较霸道，自己独占一行.
  ② 高度，宽度、外边距以及内边距都可以控制.
  ③ 宽度默认是容器(父级宽度)的 100%.
  ④ 是一个容器及盒子，里面可以放行内或者块级元素.
• 注意:

1. 文字类的元素内不能使用块级元素
2. <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3. 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

9.3 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

• 行内元素的特点:
  ① 相邻行内元素在一行上，一行可以显示多个，
  ② 高、宽直接设置是无效的。
  ③ 默认宽度就是它本身内容的宽度
  ④ 行内元素只能容纳文本或其他行内元素
  注意

1. 链接里面不能再放链接
2. 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

9.4 行内块元素

在行内元素中有几个特殊的标签，—–<img />、<input />、<td>—-，它们同时具有块元素和行内元素的特点.有些资料称它们为行内块元素

• 行内块元素的特点:
  ① 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
  ② 默认宽度就是它本身内容的宽度(行内元素特点)。
  ③ 高度，行高、外边距以及内边距都可以控制(块级元素特点)。

9.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的 100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

9.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性比如想要增加链接<a>的触发范围。

• 转换为块元素:display: block
• 转换为行内块元素:display: inline-block;
• 转换成行内元素:display: inline
• 转变成可伸缩的盒子:display: flex;
• 转变成网格盒子:display: grid;

例如，将<a>标签的display属性改成block，将会扩大点击范围

9.7 一个小技巧 单行文字垂直居中的代码

CSS 没有给我们提供文字垂直居中的代码.这里我们可以使用一个小技巧来实现解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
例如:

<style>
        div {
            width: 100px;
            height: 40px;
            background-color: pink;
            line-height: 40px;
        }
    </style>

效果如下

其实原理是

10 CSS 的背景样式

通过 CSS 背最属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

10.1 背景颜色

background-color 属性定义了背景的颜色值

background-color: 颜色值;

默认是 transparent 即透明

10.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，
优点是非常便于控制位置.(精灵图也是一种运用场景)

background-image: none|url(url);

10.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用background-repeat属性

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

参数值	描述
repeat	背景图像会在垂直方向和水平方向重复（默认值）
no-repeat	背景图像不会重复
repeat-x	背景图像仅在水平方向重复
repeat-y	背景图像仅在垂直方向重复

10.4 背景图片位置

利用 background-position属性可以改变图片在背景中的位置。

1. 参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致
• 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2. 参数是精确单位

• 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

3. 混合坐标

• 形参x，y 轴顺序不变，如20px center为水平距左边界 20px，垂直居中

10.5 背景附着(背景图像固定)

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment 后期可以制作视差滚动的效果

background-attachment: scroll|fixed;

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

10.6 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中，从而节约代码量
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为:background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

10.7 背景色半透明

CSS3 为我们提供了背最颜色半透明的效，

background: rgba(0，0，0，0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1 之间
• 我们习惯把 0.3 的 0 省略掉，写为 background:rgba(0，0，0，.3);
• 注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响
• CSS3 新增属性，是 IE9+版本浏览器才支持的
• 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用

属性	描述	示例/相关
background	背景属性	$background: #fff url(‘bg.png’) no-repeat top left;
background-color	背景颜色	$background-color: #f00;
background-image	背景图像	$background-image: url(‘bg.png’);
background-repeat	背景图像的重复方式	$background-repeat: no-repeat;
background-attachment	背景图像的定位方式	$background-attachment: fixed;
background-position	背景图像的位置	$background-position: top right;
background-size	背景图像的尺寸	$background-size: cover;
background-origin	背景图片的定位区域	$background-origin: content-box;
background-clip	背景绘制区域	$background-clip: padding-box;
background-blend-mode	背景混合模式	$background-blend-mode: multiply;

10.8 背景总结

11 CSS 三大特性

CSS 有三个非常重要的三个特性:层善性、继承性、优先级。

11.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会**覆盖(层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题

• 层叠性原则:

1. 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
2. 样式不冲突，不会层叠

11.2 继承性

CSS 中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是:子承父业

11.3 优先级

优先级注意点:

1. 权重是有 4 组数字组成,但是不会有进位。
2. 可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推.
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
4. 可以简单记忆法: 通配符和继承权重为 0,标签选择器为 1,类(伪类)选择器为 10,id 选择器 100,行内样式表为 1000,!important 无穷大
5. 继承的权重是 0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

• 权重叠加:如果是复合选择器，则会有权重叠加，需要计算权重，

CSS 盒子模型和浮动

页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页面.
网页布局过程:

1. 先准备好相关的网页元素，网页元素基本都是盒子 BOX
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容网页布局的核心本质:就是利用 CSS 摆盒子

1. 盒子模型(Box Model)

1.1 组成

所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括:边框、外边距、内边距、和实际内容

1.2 边框 border

border 可以设置元素的边框。边框有三部分组成:边框宽度(粗细),边框样式,边框颜色
语法:

div {
  width: 200px;
  height: 150px;
  /* border-width边框的粗细,一般都用px */
  border-width: 2px;
  /* border-style 边框的样式 solid 实线边框  dashed虚线 dotted点状*/
  border-style: dashed;
  /* 颜色边框 */
  border-color: pink;
}

边框简写: border : pink 2px dashed; 无顺序
边框分开写法: border-top:1px solid red; /_只设定上边框，其余同理 _/

1.3 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
语法:

border-collapse: collapse;

• collapse单词是合并的意思
• border-collapse:collapse; 表示相邻边框合并在一起

1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框!
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

1.4 内边距(padding)

padding 属性用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

/* 内边距简写(复合)方法: */
padding: 5px;
padding: 5px 10px;

值的个数	表达意思
padding: 5px;	1 个值，代表上下左右都有 5 像素内边距;
padding: 5px 10px;	2 个值，代表上下内边距是 5 像素 左右内边距是 10 像素;
padding: 5px 10px 20px;	3 个值，代表上内边距 5 像素 左右内边距 10 像素 下内边距 20 像素;
padding: 5px 10px 20px 30px;	4 个值，上是 5 像素右 10 像素下 20 像素左是 30 像素 顺时针

小技巧:如果遇到盒子里面的字数不一样多,设置宽高会不合适,可以使用padding 撑开盒子,不设置宽高

1.5 外边距 margin

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin简写方式和padding意义一样

1.6 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件:

1. 盒子必须指定了宽度(width)
2. 盒子左右的外边距都设置为 auto

.header {
  width: 900px;
  height: 200px;
  margin: auto;
  background-color: pink;
}

常见的写法,以下三种都可以:

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;
  注意:以上方法是让块级元素水平居中 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

1.7 嵌套块元素垂直外边距的塌陷

使用 margin 定义块元素的垂直外边距时，可能会出现外边距合并。
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

• 解决方案：
• 为父元素添加上边框
• 为父元素设定上内边距
• 为父元素添加属性 overflow: hidden;推荐

1.8 网页元素内外边距的清除

* {
  margin: 0;
  padding: 0;
}

注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

1.9 圆角边框 border_radius

在 CSS3 中,新增了圆角边框样式，这样我们的盒子就可以变圆角了
语法:

border-radius: length;

radius 半径(圆的半径) 原理:(椭)圆与边框的交集形成圆角效果

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
• 如果是个矩形,设置为高度的一半就可以做圆角矩线
  该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写 border-top-left-radius,border-bottom-left-radius, border-top-right-radius 和 border-bottom-right-radius

1.10 盒子阴影 box-shadow

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影

属性	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。可使用 CSS 颜色值。
inset	可选。将外阴影（outset）改为内阴影。

1.11 文字阴影

值	描述
h-shadow	必需。水平阴影的位置。允许负值
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选,模糊的距离
color	参阅 CSS 颜色值可选.阴影的颜色

2.CSS 浮动

2.1 浮动(float)

a.传统网页布局的三种方式

网页布局的本质–用 CSS 来摆放盒子.把盒子摆放到相应位置
CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)

• 普通流(标准流/文档流)
  所谓的标准流:就是标签按照规定好默认方式排列
  1. 块级元素会独占一行，从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素:span、a、i、em 等
• 浮动
  • 总结:有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
  • 浮动最典型的应用:可以让多个块级元素一行内排列显示网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素向排列找浮动，
• 定位

b.什么是浮动?

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法:

选择器 {
  float: 属性值;
}

c.浮动特性

• 浮动元素会脱离标准流(脱标)(浮动元素飘在标准流的上面,不占位置，脱标)
• 浮动的盒子不再保留原先的位置
• 文字不会被浮动的遮住,只会围绕着显示
• 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
• 注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
• 浮动元素会具有行内块元素特性。
  1. 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
  2. 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  3. 行内元素同理

浮动元素经常搭配标准父级搭配使用

• 案例: 小米布局示例
  **网页布局第二标准:**先设置盒子大小,之后设置盒子的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: rgb(255, 150, 60);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>

</body>

</html>

常见网页布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            width: auto;
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 100px;
            background-color: gray;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            background-color: gray;
            margin: 10px auto;

        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: pink;
            margin-right: 10px;
        }

        .box ul .last {
            margin-right: 0;
        }

        .footer {
            /* 只要是通栏的盒子,不需要指定宽度 */
            height: 600px;
            background-color: rgb(206, 115, 115);

        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>

        </ul>
    </div>
    <div class="footer">footer</div>

</body>

</html>

浮动布局注意点

1. 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

清除浮动

为什么需要清除浮动?

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

清除浮动代码

语法:

选择器 {
  clear: 属性值;
}

属性值	描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右两侧浮动的影响

我们实际工作中 ，几乎只用clear: both;

清除浮动的策略是: 闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

清除浮动方法

1. 额外标签法也称为隔墙法，是W3C推荐的做法。

   • 清除浮动 – 额外标签法

     额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>，或者其他标签

     (如<br/>等,但只能是块级元素,不能是行内元素)。

     • 优点:通俗易懂，书写方便
     • 缺点:添加许多无意义的标签，结构化较差

2. 父级添加 overflow 属性

   • 可以给父级添加 overflow 属性，将其属性值设置为hidden、auto 或 scroll.
     • 优点:代码简洁
     • 缺点:无法显示溢出的部分

3. 父级添加 after 伪元素

• :after方式是额外标签法的升级版。也是给父元素添加clearfix类属性后,在 css 中添加下面代码

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6、7专有*/
  *zoom: 1;
}

• 优点:没有增加标签，结构更简单,结构语义化正确
• 缺点:照顾低版本浏览器

3. 父级添加双伪元素,也是给父元素添加clearfix类属性后

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

Ps 切图

• 常见的图片格式

  • jpg 图像格式:JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用 jpg 格式的

  • gif 图像格式:GIF 格式最多只能储存 256 色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果.

  • png 图像格式是一种新兴的网络图形格式，结合了 GIF 和 JPEG 的优点，具有存储形式丰富的特点，能够保 3 持透明背景.如果想要切成背景透明的图片,请选择 png 格式

  • PSD 图像格式 PSD 格格式是 Photoshop 的专用格式，里面可以存放图层、通道、遮罩等多种设计稿,对我们前端****人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.

综合案例(学成在线)

新建首页文件index.html(以后我们的网站首页统一规定为index.html)。

新建外链 css 文件,引用

CSS 属性书写顺序(重点)

编程中如何衡量一个人的代码能力?

建议遵循以下顺序:

1. 布局定位属性: display/position/float/clear/visibility/overflow(建议 display 第一个写,毕竟关系到模式 )

2. 自身属性: width/height/margin/padding/border/background

3. 文本属性 : color/font /text-decoration/text-align/vertical-align/white-space/break-word

4. 其他属性(CSS3): content /cursor / border-radius/ box-shadow /text-

   shadow/background:linear-gradient..

分析布局

为了提高网页制作的效率，布局时通常有以下的整体思路

1. 必须确定页面的**版心(可视区)**，我们测量可得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则
4. 制作 HTML 结构。我们还是遵循,先有结构,后有样式的原则。结构永远最重要所以以, 先理清楚布局结构,再写代码尤为重要,这需要我们多写多积累.

确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类:

.w {
  width: 1200px;
  margin: auto;
}

头部制作

• 1 号是版心盒子 header 1200*42 的盒子水平居中对齐，上下给一个 margin 值就可以
• 版心盒子里面包含 2 号盒子logo
• 版心盒子里面包含 3 号盒子nav导航栏
• 版心盒子里面包含 4 号盒子search搜索框
• 版心盒子里面包含 5 号盒子user个人信息
• 注意:要求里面的 4 个盒子必须都是浮动

导航栏注意点:

实际开发中，我们不会直接用链接a而是用li包含链接**(li+a)**的做法。

• li+a语义更清晰，一看这就是有条理的列表型内容。
• 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险)从而影响网站排名

注意:

1. 让导航栏一行显示,给 li 加浮动,因为 li 是块级元素, 需要一行显示
2. 这个 nav 导航栏可以不给宽度,将来可以继续添加其余文字
3. 因为导航栏里面文字不一样多,所以最好给链接a左右 padding撑开盒子,而不是指定宽度

阶段代码

index.html

<div class="header w">
  <!-- logo部分 -->
  <div class="logo">
    <img src="logo.png" alt="logo" />
  </div>
  <!-- 导航栏部分 -->
  <div class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">课程</a></li>
      <li><a href="#">职业规划</a></li>
    </ul>
  </div>
  <!-- 搜索模块 -->
  <div class="search">
    <input type="text" name="" value="输入关键字" />
    <button></button>
  </div>
  <!-- 用户模块 -->
  <div class="usr">
    <div class="img-div"><img src="user.png" alt="" /></div>
    <div class="usrname">xubin</div>
  </div>
</div>

style.css

* {
  margin: 0;
  padding: 0;
}

.w {
  width: 1200px;
  margin: auto;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  background-color: #f3f5f7;
}

.header {
  height: 42px;
  margin: 30px auto;
}

/* logo模块 */
.logo {
  float: left;
  width: 198px;
  height: 42px;
}

.nav {
  float: left;
  margin-left: 60px;
}

.nav li {
  float: left;
  margin: 0 15px;
}

.nav ul li a {
  display: block;
  height: 42px;
  padding: 0px 10px;
  /* 居中显示 */
  line-height: 42px;
  font-size: 18px;
  color: #050505;
}

.nav ul li a:hover {
  border-bottom: 2px solid #1384c1;
  color: #1384c1;
}

/* 搜索模块 */
.search {
  float: left;
  width: 412px;
  height: 42px;
  margin-left: 70px;
}

.search input {
  float: left;
  width: 345px;
  height: 40px;
  border: 1px solid #00a4ff;
  border-right: 0;
  color: #bfbfbf;
  font-size: 14px;
  padding-left: 15px;
}

.search button {
  float: left;
  width: 50px;
  height: 42px;
  background: url(btn.png);
  /* 按钮button默认有个边框需要我们手动去掉 */
  border: 0px;
}

/*  用户模块  */
.usr {
  float: right;
  line-height: 42px;
  margin-right: 30px;
  font-size: 14px;
  color: #666;
}

.usr .img-div {
  float: left;
  margin-top: 7px;
  margin-right: 10px;
  height: 30px;
  width: 30px;
}

.usr div {
  float: left;
  line-height: 42px;
  margin-right: 30px;
  font-size: 14px;
  color: #666;
}

banner 制作

代码

index.html

<!-- banner区域 -->
<div class="banner">
  <!-- 版心 -->
  <div class="w">
    <div class="subnav">
      <ul>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
        <li>
          <a href="#">前端开发<span>&gt;</span></a>
        </li>
      </ul>
    </div>
    <div class="course">
      <h2>我的课程表</h2>
      <div class="bd">
        <ul>
          <li>继续学习 程序语言设计<span>正在学习-使用对象</span></li>
          <li>继续学习 程序语言设计<span>正在学习-使用对象</span></li>
          <li>继续学习 程序语言设计<span>正在学习-使用对象</span></li>
        </ul>
        <a href="#" class="more">全部课程</a>
      </div>
    </div>
  </div>
</div>

style.css

.banner .course {
  background-color: #fff;
  float: right;
  width: 200px;
  height: 300px;
  /* 浮动的盒子不会有外边距合并的问题 */
  margin-top: 50px;
}

.banner .course h2 {
  height: 48px;
  background-color: rgb(148, 203, 233);
  color: #f3f5f7;
  line-height: 48px;
  text-align: center;
}

.bd {
  padding: 0 20px;
}
.bd li {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1384c1;
  border-bottom: 1px solid #776c6c;
}
.bd li span {
  color: rgb(165, 165, 165);
  font-size: 12px;
  font-weight: normal;
}
.bd .more {
  display: block;
  height: 38px;
  width: 150px;
  margin-top: 4px;
  background-color: #fff;
  border: 1px solid #00a4ff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 38px;
  color: #00a4ff;
}

精品推荐

• 大盒子水平居中 goods 精品，注意此处有个盒子阴影
• 1 号盒子是标题 H3 左侧浮动
• 2 号盒子里面放链接左侧浮动，goods-item 距离可以控制链接的左右内边距(注意行内元素只给左右内外边距)
• 3 号盒子右浮动 mod 修改

index.html

<!-- 金牌推荐 -->
<div class="goods w">
  <h3>精品推荐</h3>
  <ul>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Spark</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">JavaWeb</a></li>
    <li><a href="#">MySQL</a></li>
    <li><a href="#">JavaWeb</a></li>
  </ul>
  <a href="#" class="mod">修改兴趣</a>
</div>

style.css

/* 精品推荐 */
.goods {
  height: 60px;
  background-color: #fff;
  margin-top: 10px;
  box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.3);
  /*行高会继承给三个孩子*/
  line-height: 60px;
}
.goods h3 {
  float: left;
  margin-left: 30px;
  font-size: 16px;
  color: #00a4ff;
}
.goods ul {
  float: left;
  margin-left: 30px;
}
.goods ul li {
  float: left;
}
.goods ul a {
  padding: 0 35px;
  border-left: 1px solid #776c6c;
  font-size: 16px;
  color: #050505;
}

.goods .mod {
  float: right;
  margin-right: 30px;
  font-size: 14px;
  color: #00a4ff;
}

主要模块

在 css 中把img标签设置为**{ width:100% }**能够实现图片缩放,自适应父盒子大小

底部模块

• 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
• 2 号盒子版心水平居中
• 3 号盒子版权 copyright 左对齐
• 4 号盒子链接组 links 右对齐

CSS 定位

1.1 为什么需要定位?

• 提问:以下情况使用标准流或者浮动能实现吗?

  1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
  2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。(京东购物车)

• 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以:

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于向排列盒子
  2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位的由来

定位: 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

1.定位模式
定位模式决定元素的定位方式，它通过 CSS 的position属性来设置，其值可以分为四个:

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right4 个属性。

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离。

1.3 静态偏移(定位)

静态定位是元素的默认定位方式，无定位的意思。
语法:

选择器 {
  position: static;
}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

1.4 相对定位 relative(重要)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)。

语法

选择器 {
  position: relative;
}

• 相对定位的特点:(务必记住)
  1. 它是相对于自己原来的位置来移动的 (移动位置的时候参照点是自己原来的位置)
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)

1.5 绝对定位 absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)

语法:

选择器 {
  position: absolute;
}

绝对定位的特点:(务必记住)

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document 文档)
2. 如果祖先元素有定位(相对、绝对、固定定位)则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原先的位置。**(脱标)**

子绝父相口诀

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2. 父盒子需要加定位限制,子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结:因为父级需要占有位置,因此是相对定位，子盒子不需要占有位置，则是绝对定位

1.6 固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。

语法

选择器 {
  position: fixed;
}

固定定位的特点:(务必记住)

1. 以浏览器的可视窗口为参照点移动元素。

   1. 跟父元素没有任何关系
   2. 不随着滚动条的滚动而滚动

2. 固定定位不在占有原先的位置。

   固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧: 固定在版心右侧位置

1. 让固定定位的盒子left:50%走到浏览器可视区(也可以看做版心)的一半位置。
2. 让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

当一个元素使用 position: fixed 定位时，它会相对于视窗（viewport）进行定位，而不是父元素。然而，在某些情况下，如果父元素具有特定的样式或布局特性，可能会改变其行为。以下是一些可能导致这种现象的原因：

1. 父元素创建了包含块

• 如果父元素创建了一个新的包含块（containing block），fixed 定位的元素可能会以父元素为基础进行定位。
• containing block 是确定 position: fixed 或 position: absolute 元素的定位基准的最近的祖先元素。通常情况下，fixed 定位的包含块是视窗。但如果父元素创建了新的包含块，fixed 元素会以这个新的包含块为基础进行定位。

2. 父元素的 position 属性

• 如果父元素的 position 属性被设置为 relative、absolute 或 fixed，并且同时具有 transform、perspective 或 filter 属性，可能会创建一个新的层叠上下文（stacking context）或块格式化上下文（BFC），进而影响子元素的定位。

3. CSS 滤镜（filter）的影响

• 滤镜（如 blur()、grayscale()、hue-rotate() 等）可能会导致浏览器创建一个新的层叠上下文，这可能会影响 fixed 定位的行为。
• 当父元素应用了滤镜时，浏览器可能会将该元素及其子元素视为一个单独的绘图层，从而改变 fixed 定位元素的定位基准。

4. CSS 的 contain 属性

• 如果父元素使用了 contain 属性，可能会限制子元素的布局和定位，导致 fixed 定位的子元素不再相对于视窗。

1.7 粘性定位 sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。

Sticky:粘性的

语法

选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点

1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位占有原先的位置(相对定位特点)
3. 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE 不支持。

1.9 总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对自身位置移动	常用
absolute 绝对定位	是 (不占有位置)	带有定位的父级	常用
fixed 固定定位	是 (不占有位置)	浏览器可视区	常用
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

1.9 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序(z 轴)

语法:

选择器 {
  z-index: 1;
}

• 数值可以是正整数、负整数或 0,默认是 auto，数值越大，盒子越靠上

• 如果属性值相同，则按照书写顺序，后来居上

• 数字后面不能加单位

• 只有定位的盒子才有z-index属性

1.10 定位的拓展

• 绝对定位的盒子居中

  加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中

  父容器宽度的一半减去自身盒子的 width 的一半

• 定位特殊特性

  绝对定位和固定定位也和浮动类似。

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度，
  2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

• 脱标的盒子不会触发外边距塌陷

  浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

• 绝对定位(固定定位)会完全压住盒子

  浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片),但是绝对定位(固定定位)会压住下面标准流所有的内容。

  

综合案例(淘宝焦点图)

1.大盒子我们类名为:tb-promo淘宝广告

2.里面先放一张图片

3.左右两个按钮用链接就好了。左箭头prev右箭头next

4.底侧小圆点 u 继续做。类名为promo-nav

如果一个盒子既有 left 属性也有 right 属性，则默认会执行left属性(left 和 top 优先级高)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0"
    />
    <title>淘宝焦点轮播图</title>
    <style>
      a {
        /* 消除默认的a标签样式 */
        text-decoration: none;
      }
      li {
        list-style: none;
      }

      * {
        margin: 0;
        padding: 0;
      }

      .tb-promo {
        position: relative;
        width: 520px;
        height: 280px;
        background-color: pink;
        margin: 50px auto;
      }

      .tb-promo img {
        width: 100%;
        height: 100%;
      }

      .prev,
      .next {
        position: absolute;
        /* 绝对定位的盒子垂直居中 */
        top: 50%;
        margin-top: -15px;
        /*加了绝对定位的盒子可以直接设置高度和宽度 */
        width: 20px;
        height: 30px;
        background-color: rgba(3, 255, 11, 0.2);
        text-align: center;
        line-height: 30px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }

      .prev {
        left: 0;
        /* 设置成圆形 */
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
      }

      .next {
        /* 如果一个盒子既有left属性也有right属性，则默认会执行left属性(left和top优先级高) */
        right: 0;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
      }

      .promo-nav {
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -35px;
        width: 70px;
        height: 13px;
        background-color: rgba(255, 255, 255, 0.5);
        /* 圆角 */
        border-radius: calc(13px / 2);
        overflow: hidden;
      }

      .promo-nav li {
        margin: 3px;
        float: left;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
      }
      /* 不要忘记选择器权重，否则会设置失败 */
      .promo-nav .selected {
        background-color: #f00;
      }
    </style>
  </head>

  <body>
    <div class="tb-promo">
      <img src="../综合案例/学成在线/banner2.png" alt="" />
      <!-- 左侧按钮箭头 -->
      <a href="https://www.jd.com" class="prev">&lt;</a>
      <!-- 右侧按钮箭头 -->
      <a href="https://www.jd.com" class="next">&gt;</a>

      <!-- /*小圆点*/ -->
      <ul class="promo-nav">
        <li class="selected"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现!

本质:让一个元素在页面中隐藏或者显示出来。

• display 显示隐藏: display 属性用于设置一个元素应如何显示。

  • display:none;隐藏对象,display 隐藏元素后，不再占有原来的位置,后面应用及其广泛，搭配 JavaScript 可以做很多的网页特效。
  • display:block;除了转换为块级元素之外，同时还有显示元素的意思

• visibility 可见性: visibility 属性用于指定一个元素应可见还是隐藏,visibility 隐藏元素后，继续占有原来的位置

  • visibility:visible; 元素可视
  • visibility:hidden; 元素隐藏

• overflow 溢出显示隐藏

  • overflow:visible;: 默认值,把溢出的部分显示出来,(平铺,超出边框)
  • overflow:hidden;: 隐藏溢出部分
  • overflow:scroll;: 溢出的部分显示滚动条(总是显示滚动条)
  • overflow:auto;: 在需要的时候添加滚动条(子元素需要高度大于父元素)

但是如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分。

综合案例(土豆网鼠标经过显示遮罩)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>土豆网鼠标经过遮罩</title>
    <style>
      .tudou {
        position: relative;
        margin: auto;
        width: 444px;
        height: 332px;
        background-color: pink;
      }
      /* 遮罩层 */
      .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5) url(../综合案例/品优购/favicon.png) no-repeat
          center;
        z-index: 999;
        /* 遮罩层先隐藏 */
        display: none;
      }
      /* 鼠标经过tudou这个盒子 让里面的mask显示遮罩 */
      .tudou:hover .mask {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tudou">
      <div class="mask"></div>
    </div>
  </body>
</html>

效果展示

CSS 高级技巧

1. 精灵图

学习目标：

能够使用精灵图

能够使用字体图标

能够写出 CSS 三角

能够写出常见的 CSS 用户界面样式

能够说出常见的布局技巧

1.1 为什么需要精灵图?

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。

1.2 精灵图的使用

使用精灵图核心

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 移动背景图片位置，此时可以使用background-position。
3. 移动的距离就是这个目标图片的x 和 y 坐标。注意网页中的坐标有所不同
4. 因为一般情况下都是**(图片)往上往左移动，所以数值是负值**。
5. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

1.3 案例：拼出自己名字

1.3.1 案例效果

1.3.2 代码参考

结构

<span class="p">p</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="k">k</span>

样式

span {
  display: inline-block;
  background: url(abcd.jpg) no-repeat;
}
.p {
  width: 100px;
  height: 112px;
  /* background-color: pink; */
  background-position: -493px -276px;
}
.i {
  width: 60px;
  height: 108px;
  /* background-color: pink; */
  background-position: -327px -142px;
}
.n {
  width: 108px;
  height: 109px;
  /* background-color: pink; */
  background-position: -215px -141px;
}
.k {
  width: 105px;
  height: 114px;
  /* background-color: pink; */
  background-position: -495px -142px;
}

2. 字体图标

2.1 字体图标的产生

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

1. 图片文件还是比较大的。

2. 图片本身放大和缩小会失真。

3. 一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2.2 字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

• 兼容性：几乎支持所有的浏览器，请放心使用

• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

使用步骤

字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：

1.字体图标的下载

2.字体图标的引入 （引入到我们html页面中）

3.字体图标的追加 （以后添加新的小图标）

2.3 字体图标的下载

推荐下载网站：

• icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

• 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费！

2.4 字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

1. 把下载包里面的 fonts 文件夹放入页面根目录下

• 字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1). TureType(.ttf)格式.ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2). Web Open Font Format(.woff)格式 woff 字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3). Embedded Open Type(.eot)格式.eot 字体是 IE 专用字体，支持这种字体的浏览器有 IE4+；

4). SVG(.svg)格式.svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过 css 引入到我们页面中。

一定注意字体文件路径的问题

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

3. html 标签内添加小图标。

4. 给标签定义字体。

span {
  font-family: "icomoon";
}

注意：务必保证 这个字体和上面@font-face里面的字体保持一致

2.5 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

2.6 字体图标加载的原理：

3. CSS 三角

3.1 介绍

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

一张图， 你就知道 CSS 三角是怎么来的了, 做法如下：

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-color: red green blue black;
  line-height: 0;
  font-size: 0;
}

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4 个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性低版本的浏览器，加上font-size: 0; line-height: 0;

3.2 案例：京东三角

3.2.1 效果图

3.2.2 代码参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS三角制作</title>
    <style>
      .box1 {
        width: 0;
        height: 0;
        /* border: 10px solid pink; */
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
      }
      .box2 {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-left-color: pink;
        margin: 100px auto;
      }
      .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
      }
      .jd span {
        position: absolute;
        right: 15px;
        top: -10px;
        width: 0;
        height: 0;
        /* 为了照顾兼容性 */
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
      <span></span>
    </div>
  </body>
</html>

4. CSS 用户界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

4.1 鼠标样式 cursor

li {
  cursor: pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

4.2 轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

input {
  outline: none;
}

4.3 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea {
  resize: none;
}

vertical-align 属性应用

5. vertical-align 属性应用

CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline | top | middle | bottom;

5.1 图片、表单和文字对齐

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

5.2 解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加 vertical-align: middle | top | bottom 等。 （提倡使用的）

2.把图片转换为块级元素 display: block;

6. 溢出的文字省略号显示

6.1 单行文本溢出显示省略号

单行文本溢出显示省略号–必须满足三个条件：

/*1. 先强制一行内显示文本*/
 white-space: nowrap;  （ 默认 normal 会自动换行）

/*2. 超出的部分隐藏*/
 overflow: hidden;

/*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

6.2 多行文本溢出显示省略号（了解）

多行文本溢出显示省略号，有较大兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是 webkit 内核）

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

7. 常见布局技巧

巧妙利用一个技术更快更好的布局：

1. margin 负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. CSS 三角强化

7.1. margin 负值运用

1.让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

2.(为了完整显示鼠标悬浮的颜色，鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加 z-index）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin负值的妙用</title>
    <style>
      ul li {
        position: relative;
        list-style-type: none;
        float: left;
        width: 200px;
        height: 300px;
        border: 1px solid red;
        background-color: pink;

        /*负值margin可以把边框重叠只有1px*/
        margin-left: -1px;
      }
      ul li:hover {
        z-index: 1;
        border: 3px solid green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </body>
</html>

7.2 文字围绕浮动元素

效果

布局示意图

巧妙运用浮动元素不会压住文字的特性

7.3 行内块巧妙运用

页码在页面中间显示:

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

7.4. CSS 三角强化 案例

7.4.1 原理

<style>
  .box1 {
    width: 0;
    height: 0;

    /* 写法1 */
    border-top: 100px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 50px solid #f00;
    border-left: 50px solid transparent;

    /* 写法二 */
    /* 把上边框宽度调大 */

    /* border-top: 100px solid transparent;
        border-right: 50px solid skyblue; */

    /*左边和下边的边框宽度设置为0 */

    /* border-bottom: 0 solid blue;
        border-left: 0 solid green; */

    /* 写法三 */
    /* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2. 样式都是solid */
    border-style: solid;
    /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
    border-width: 100px 50px 0 0;
  }
</style>
<body>
  <div class="box1"></div>
</body>

7.4.2 案例效果

7.4.3 代码参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS三角强化的巧妙运用</title>
    <style>
      .price {
        width: 160px;
        height: 24px;
        line-height: 24px;
        border: 1px solid red;
        margin: 0 auto;
      }
      .miaosha {
        position: relative;
        float: left;
        width: 90px;
        height: 100%;
        background-color: red;
        text-align: center;
        color: #fff;
        font-weight: 700;
        margin-right: 8px;
      }
      .miaosha i {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 24px 10px 0 0;
      }
      .origin {
        font-size: 12px;
        color: gray;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <div class="price">
      <span class="miaosha">
        ¥1650
        <i></i>
      </span>
      <span class="origin">¥5650</span>
    </div>
  </body>
</html>

8. CSS 初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化

简单理解： CSS 初始化 是指重设浏览器的样式。 (也称为 CSS reset）

每个网页都必须首先进行 CSS 初始化。

这里我们以 京东 CSS 初始化代码为例。

Unicode 编码字体：

把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。

比如：

黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

HTML5 和 CSS3 提高

1.HTML5 的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

1.1 HTML5 新增的语义化标签

以前布局，我们基本用div来做。div对于搜索引警来说，是没有语义的,

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

• <header>:头部标签
• <nav>:导航标签
• <article> 内容标签
• <section>:定义文档某个区域
• <aside>:侧边栏标签
• <footer>:尾部标签

注意:

这种语义化标准主要是针对搜索引擎的

这些新标签页面中可以使用多次

在 IE9 中，需要把这些元素转换为块级元素

其实，我们移动端更喜欢使用这些标签

HTML5 还增加了很多其他标签，我们后面再慢慢学

1.2 HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个<audio>和<video>

1. 视频:<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

当前<video>元素支持三种视频格式:尽量使用 mp4 格式

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从 Firefox 21 版本开始 Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从 Opera 25 版本开始	YES	YES

语法：

<video src="文件地址" controls="controls"></video>

从上到下依次查看是否支持，若都不支持，输出报错信息

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  您的浏览器不支持Video标签。
</video>

常用的属性值

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完毕后继续播放该视频，循环播放
preload	auto (预先加载视频) none (不预先加载视频)	规定是否加载视频（如果有了 autoplay 就忽略该属性）
src	url	视频 url 地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

2. 音频:<audio>

当前audio元素支持三种格式

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

HTML5 在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。
语法:

<audio src="文件地址" controls="controls"></audio>

<audio controls="controls">
    <source src="happy.mp3"type="audio/mpeg" >
    <source src="happy.ogg"type="audio/ogg" >
    您的浏览器暂不支持<audio>标签。
</audio>

常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
src	url	要播放的音频的URL。

• 谷歌浏览器把音频和视频自动播放禁用了

1.3 HTML5新增的input类型

属性值	说明
type=”email”	限制用户输入必须为Email类型
type=”url”	限制用户输入必须为URL类型
type=”date”	限制用户输入必须为日期类型
type=”time”	限制用户输入必须为时间类型
type=”month”	限制用户输入必须为月份类型
type=”week”	限制用户输入必须为周类型
type=”number”	限制用户输入必须为数字类型
type=”tel”	手机号码
type=”search”	搜索框
type=”color”	生成一个颜色选择菜单

1.4 HMTL5中新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on”,关闭autocomplete="off" 需要放在表单内，同时加上 name 属性，同时成功提交
multiple	multiple	可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色:

input::placeholder 
{
    color: pink;
}

2.CSS3 的新特性

• 新增的CSS3特性有兼容性问题，ie9+才支持

• 移动端支持优于PC端

• 不断改进中

• 应用相对广泛

• 现阶段主要学习:新增选择器和盒子模型以及其他特性

CSS3新增选择器

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att=”val”]	选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=”val”]	匹配具有 att 属性且值以 val 开头的 E 元素
E[att$=”val”]	匹配具有 att 属性且值以 val 结尾的 E 元素
E[att*=”val”]	匹配具有 att 属性且值中含有 val 的 E 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0"
    />
    <title>CSS新增属性选择器</title>
    <style>
      /* 1.利用属性选择器就可以不用借助于类或者id选择器 */
      input[value] {
        width: 200px;
        height: 30px;
        border: 2px solid #ff0000;
        padding: 5px;
      }

      /* 2.属性选择器还可以选择属性=值的某些元素 */
      input[value="hahahah"] {
        width: 200px;
        height: 30px;
        border: 2px solid rgb(43, 70, 170);
        padding: 5px;
      }

      /* 3.属性选择器可以选择属性值开头的某些元素 */
      input[value^="我不是"] {
        width: 200px;
        height: 30px;
        border: 2px solid rgb(255, 165, 0);
        padding: 5px;
      }

      /* 4.属性选择器可以选择属性值结尾的某些元素 */
      input[value$="ef"] {
        width: 200px;
        height: 30px;
        border: 2px solid rgb(0, 128, 0);
        padding: 5px;
      }

      /* 5.属性选择器可以选择属性值包含某些字符的元素 */
      input[value*="黑"] {
        width: 200px;
        height: 30px;
        border: 2px solid rgb(255, 0, 255);
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <input type="text" />
    <input type="text" value="请输入内容" />
    <input type="text" value="hahahah" />
    <input type="text" value="我不是药神" />
    <input type="text" value="abcdef" />
    <input type="text" value="浴血黑帮" />
  </body>
</html>

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择里面的子元素

:first-child不限制类型,只选取第一个子元素,div:first-child表示限制类型的第一个div子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素 E
E:last-child	匹配父元素中最后一个 E 元素

nth-child(n)选择某个父元素的一个或多个特定的子元素

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第n个子元素，里面数字从1开始…
• n 可以是关键字: even偶数，odd奇数
• n 可以是公式: 常见的公式如下(如果n是公式，则从n=0开始赋值计算，但是第0个元素或者超出了元素的个数会被忽略,只能是n,不能是其他字母)
  • 2n: 从n=0开始赋值,会对第0×2,1×2,2×2,3×2…个子元素进行css属性修改,相当于nth-child(even)选择偶数
  • 2n+1: 奇数
  • 5n: 5 10 15…
  • n+5: 从第5个开始(包含第五个)到最后
  • -n+5:前5个(包含第5个)

选择符	简介
E:nth-child(n)	匹配父元素中的第 n 个子元素 E, n 表示全选
E:nth-child(odd)	匹配父元素中的第 奇数 个子元素 E
E:nth-child(even)	匹配父元素中的第 偶数 个子元素 E
E:first-of-type	指定类型 E 的第一个
E:last-of-type	指定类型 E 的最后一个
E:nth-of-type(n)	指定类型 E 的第 n 个

/* 选择ul里的第一个li子元素 */
ul li:first-child {
	background-color: red;
}

/* 选择ul 里面的 li 里面的 第一个子元素 */
ul li :first-child {	/* 注意空格 */ 
	background-color: red;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS新增结构伪类选择器</title>
    <style>
      /* 选择ul里的第一个子元素 */
      ul li:first-child {
        background-color: red;
      }

      /* 选择ul里的最后一个子元素 */
      ul :last-child {
        background-color: blue;
      }

      /* 选择ul里的第n个子元素 */
      ul :nth-child(a) {
        background-color: yellow;
      }

      /* 选择ul里的奇数个子元素 */
      ul :nth-child(odd) {
        background-color: green;
      }

      /* 选择ul里的偶数个子元素 */
      ul :nth-child(even) {
        background-color: purple;
      }

      /* 公式的使用 */
      /* n从0开始赋值,每次加1,对第0*3+1,1*3+1...个孩子进行着色 */
      ol :nth-child(3n + 1) {
        background-color: orange;
      }

      ol :nth-child(-n + 3) {
        background-color: black;
      }

      /* div:nth-child()的原理,它会把所有子元素按顺序排列,先找到对应序号的元素,再看它是否满足是div标签,满足则着色,不满足则不着色. */
      section div:nth-child(1) {
        background-color: pink;
      }

      section div:nth-of-type(1) {
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ul>
    <ol>
      <li>我是第1个孩子</li>
      <li>我是第2个孩子</li>
      <li>我是第3个孩子</li>
      <li>我是第4个孩子</li>
      <li>我是第5个孩子</li>
      <li>我是第6个孩子</li>
      <li>我是第7个孩子</li>
      <li>我是第8个孩子</li>
    </ol>

    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>
  </body>
</html> 

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意

• before 和 after 会创建一个元素，但是属于行内元素

• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

语法:

element::before{}

1. before和after必须有 content 属性
2. before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素
3. 伪元素选择器和标签选择器一样，权重为1

<style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      div::before {
        /* 必须有content属性，否则不会显示 */
        content: "我";
        color: red;
      }
      div::after {
        content: "帅哥";
        color: blue;
      }
    </style>
...
  <body>
    <div>是</div>
  </body>

使用场景1: 伪元素字体图标

div::after {
        font-family: "icomoon";
        float: right;
        content: "";
        margin-right: 8px;
        font-size: large;
        line-height: 50px;
      }

使用场景2: 土豆网悬浮遮罩

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>土豆网鼠标经过遮罩</title>
    <style>
      .tudou {
        position: relative;
        margin: auto;
        width: 444px;
        height: 332px;
        background-color: pink;
      }
      /* 遮罩层 */
      .tudou::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5)
          url(../综合案例/品优购/images/favicon.png) no-repeat center;
        z-index: 999;
        /* 遮罩层先隐藏 */
        display: none;
      }
      /* 鼠标经过tudou这个盒子 让里面的before元素显示遮罩 */
      .tudou:hover::before {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tudou"></div>
  </body>
</html>

伪元素选择器使用场景3:伪元素清除浮动

CSS3盒子模型

在以前,给一个盒子加上border和padding属性,势必会撑大盒子原有的尺寸

CSS3 中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们
计算盒子大小的方式就发生了改变。

• content-box: 盒子大小为 width+ padding+ border (以前默认的)
• border-box: 盒子大小为 width

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了

(前提padding和border不会超过width宽度)

• 使用css3盒子模型想要文字居中的话,不能直接使用line-height = 盒子高度,这样会导致文字稍微偏下,要减去盒子边框的大小

CSS3 过渡效果

**过渡(transition)**是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画: 是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本 ) 但是不会影页面布局。

我们现在经常和:hover一起搭配使用.

语法:

transition:要过渡的属性 花费时间 运动曲线 何时开始; 

1. 属性: 想要变化的css属性，宽度，高度，背景颜色，内外边距都可以。如果想要所有的属性都变化过渡，写一个a 就可以。
2. 花费时间: 单位是秒(必须写单位)比如 0.5s
3. 运动曲线: 默认是ease(可以省略)
4. 何时开始: 单位是秒(必须写单位)可以设置延迟触发时间，默认是0s(可以省略)

记住过渡的使用口诀:谁做过渡给谁加

div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: background-color, width 1s ease 0.5s; /* 过渡效果 */
        transition: background-color 1s, width 3s, rotate 1s; /* 过渡效果 */
}
      /*如果想要属性都变化,属性写all*/
div {
        transition: all 1s;
}
div:hover {
        background-color: blue;
        width: calc(200px);
        /* 旋转 */  
        rotate: 360deg;
}

进度条案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>进度条</title>
    <style>
      .bar {
        width: 200px;
        height: 16px;
        background-color: #ccc;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
      }
      .son {
        width: 0;
        height: 70%; /* 调整高度以留出间隙 11.2*/
        background-color: #4caf50;
        border-radius: 8px;
        /* position: absolute 和 top: 50% 将元素的上边缘定位到定位上下文的中心线，而 transform: translateY(-50%) 再将元素向上移动其自身高度的一半，从而实现垂直居中。 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: width 0.5s ease;
      }
      .percentage {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <div class="son" id="progressBar"></div>
      <div class="percentage" id="percentageText">0%</div>
    </div>
    <button onclick="updateProgressBar(25)">25%</button>
    <button onclick="updateProgressBar(50)">50%</button>
    <button onclick="updateProgressBar(75)">75%</button>
    <button onclick="updateProgressBar(100)">100%</button>

    <script>
      function updateProgressBar(percentage) {
        const progressBar = document.getElementById("progressBar");
        const percentageText = document.getElementById("percentageText");
        progressBar.style.width = `${percentage}%`;
        percentageText.textContent = `${percentage}%`;
      }
    </script>
  </body>
</html>

CSS3的2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

• 2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

重点

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点: 不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的, trahslate:(-50%,-50%)配合定位的left:50%; top:50% 可以实现居中;
• 对行内标签没有效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div:first-child:hover {
      transform: translate(100px, 100px);
    }
    div:first-child {
      width: 300px;
      height: 300px;
      background-color: pink;
      /* transform: translate(100px, 100px); */
      transition: all 0.5s ease-in-out;
    }

    div:nth-child(2) {
      width: 300px;
      height: 300px;
      background-color: rgb(211, 164, 187);
    }
  </style>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

• 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(度数)

1. rotate里面跟度数，单位是deg 比如rotate(45deg)
2. 角度为正时，顺时针，负时，为逆时针
3. 默认旋转的中心点是元素的中心点,设置中心点2D转换中心点 transform-origin: x y;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0"
    />
    <title>下拉菜单三角案例</title>
    <style>
      .box {
        width: 250px;
        height: 40px;
        border: 2px solid #2f2f2f;
        position: relative;
      }
      div::after {
        content: "";
        width: 10px;
        height: 10px;
        top: 10px;
        right: 14px;
        position: absolute;
        border-bottom: 2px solid #2f2f2f;
        border-right: 2px solid #2f2f2f;
        transform: rotate(45deg);
        transition: all 0.2s ease-in-out;
      }
      div:hover::after {
        /* 旋转之后,坐标系也会跟着旋转 */
        transform: rotate(225deg) translate(-2px, -5px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

• 2D转换之缩放scale

transform : scale(x,y);

1. 不跟单位,表示倍数,1就是1倍
2. 只跟一个数字,表示等比例缩放
3. 缩放是默认沿中心向四周变大,不会影响其他元素位置
4. 可以设置缩放中心,使用transform-origin: x y

鼠标经过放大效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
              name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0"
              />
        <title>Scale案例</title>
        <style>
            div {
                width: 500px;
                height: 300px;
                float: left;
                margin-left: 10px;
                transition: all 0.5s;
                overflow: hidden;
                border: 1px solid #ccc;
            }
            img {
                width: 100%;
                height: 100%;
                transition: all 0.5s;
            }
            div img:hover {
                transform: scale(1.1);
            }
        </style>
    </head>
    <body>
        <div><img src="..\html下\image.png" alt="" /></div>
        <div><img src="..\html下\image.png" alt="" /></div>
        <div><img src="..\html下\image.png" alt="" /></div>
    </body>
</html>

transform综合写法: 旋转会影响坐标系,所以一般把位移写到最前面

CSS3动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1. 动画的基本使用

制作动画分为两步:

1. 先定义动画
2. 再使用(调用)动画

2. 定义动画

1. 用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称{
    0%{
        width:100px;
    }
    100%{
        width:200px;}

    .div{
        /*调用动画 */
        animation-name:动画名称;
        /*持续时间 */
        animation-duration:持续时间;
    }

动画序列

• 0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
• 在 @keyframes 中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间，或用关键词”from”和”to”,等同于 0% 和 100%。

3. 动画里的基本属性

属性	描述
@keyframes	指定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	指定@keyframes动画的名称。（必须的）
animation-duration	指定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	指定动画的速度曲线，默认是“ease”。
animation-delay	指定动画何时开始，默认是0。
animation-iteration-count	指定动画被播放的次数，默认是1，还有infinite表示无限循环
animation-direction	指定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播
animation-play-state	指定动画是正在运行还是暂停。默认是“running”，还有“pause”。
animation-fill-mode	动画结束后的状态，保持forwards,回到起始backwards

4. 动画简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态(不能省略动画名称和持续时间)

animation: myfirst 5s linear 2s infinite alternate;

5. 动画曲线细节

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps()	指定了时间函数中的间隔数量（步长）

6. 热点图案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>热点图案例动画</title>
    <style>
      .map {
        width: 800px;
        height: 474px;
        position: relative;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .city {
        position: absolute;
        top: 390px;
        left: 504px;
      }
      .jiangxi {
        top: 334px;
        left: 480px;
      }
      .dotted {
        position: relative;
        width: 8px;
        height: 8px;
        background-color: rgb(132, 18, 21);
        border-radius: 50%;
      }
      .city div[class^="pulse"] {
        /* 保证居中显示 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        box-shadow: 0 0 20px rgb(132, 18, 21);
        animation: pulse 1.2s linear infinite;
      }
      .city div.pulse2 {
        animation-delay: 0.4s;
      }
      .city div.pulse3 {
        animation-delay: 0.8s;
      }
      @keyframes pulse {
        0% {
        }
        70% {
          width: 40px;
          height: 40px;
          opacity: 1;
        }
        100% {
          width: 80px;
          height: 80px;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="map">
      <img src="../src/map.png" alt="" />
      <div class="city guangdong">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
      <div class="city jiangxi">
        <div class="dotted"></div>
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
    </div>
  </body>
</html>

7. 奔跑的北极熊案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
              name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0"
              />
        <title>奔跑的小熊</title>
        <style>
            body {
                margin: 0%;
                padding: 0%;
            }
            @keyframes run {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: -1600px 0px;
                }
            }
            @keyframes move {
                0% {
                    left: 0;
                }
                100% {
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            @keyframes bg_Move {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 100% 0; /* 背景宽度为100%，使得背景无缝滚动 */
                }
            }

            .bg {
                width: 100%;
                height: 336px;
                position: absolute;
                bottom: 0;
                background: url(../src/snowMou.png) repeat bottom;
                animation: bg_Move 10s linear infinite forwards;
            }
            .bear {
                position: absolute;
                bottom: 0;
                width: 200px;
                height: 100px;
                background: url(../src/bear.png) no-repeat;
                animation: run 1s steps(8) infinite, move 3s forwards;
            }
        </style>
    </head>
    <body>
        <div class="bg"></div>
        <div class="bear"></div>
    </body>
</html>

CSS3的3D转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。

• 近大远小。
• 物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果

3D位移

• translform:translateX(100px): 仅仅是在x轴上移动
• translform:translateY(100px): 仅仅是在Y轴上移动
• translform:translateZ(100px): 仅仅是在Z轴上移动(注意:translateZ一般用px单位)
• transform:translate3d(x,y,z): 其中x、y、z分别指要移动的轴的方向的距离

透视: perspective

在2D平面产生近大远小视觉立体，但是只是二维的效果

• 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
• 模拟人类的视觉位置，可认为安排一只眼睛去看
• 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小
• 透视的单位是像素

透视写到被观察元素的父盒子上

3D旋转rotate3d

• transform:rotateX(45deg): 沿着x轴正方向旋转45度
• transform:rotateY(45deg): 沿着y轴正方向旋转45deg
• transform:rotateZ(45deg): 沿着Z轴正方向旋转45deg
• transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转,deg为角度(了解即可)

transform : rotate3d(1,1,0,45deg); //沿对角线旋转

3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境。
• transforim-style: flat子元素不开启3d立体空间 默认的
• transform-style:preserve-3d; 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子
• 这个属性很重要，后面必用

反转硬币案例

<!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>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transform-style: preserve-3d; /* 保持3D效果 */
        perspective: 500px; /* 设置透视效果 */
        transition: transform 0.4s; /* 添加过渡效果 */
      }

      .box:hover {
        transform: rotateY(180deg); /* 鼠标悬停时翻转 */
      }

      .front,
      .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 40px;
        text-align: center;
        line-height: 300px;
        color: white;
        /* backface-visibility: hidden; 隐藏背面的内容 */
      }

      .front {
        background-color: chartreuse; /* 正面颜色 */
        z-index: 1; /* 确保正面在上层 */
        transform: translateZ(1px);
      }

      .back {
        background-color: cyan; /* 背面颜色 */
        transform: rotateY(180deg); /* 将背面旋转180度 */
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="front">hello</div>
      <div class="back">world</div>
    </div>
  </body>
</html>

CSS3其他新特性

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法:

filter:函数();
例如:filter: blur(5px); blur模糊处理 数值越大越模糊

CSS3 calc函数:
calc(): 此CSS函数让你在声明CSS属性值时执行一些计算，

width: calc(100% -80px);

括号里面可以使用 +,-,*,/来进行计算。

H5C3综合案例-旋转木马

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>旋转木马</title>
        <style>
            body {
                perspective: 1500px;
            }
            section {
                position: relative;
                width: 200px;
                height: 300px;
                margin: 100px auto;
                transform-style: preserve-3d;
                /* 添加动画效果 */
                animation: rotate 10s linear infinite;
                background: url(../html下/image.png) no-repeat;
            }
            @keyframes rotate {
                0% {
                    transform: rotateY(0);
                }
                100% {
                    transform: rotateY(360deg);
                }
            }
            section div {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(../../html下/image.png) no-repeat;
                -webkit-box-reflect: below 15px
                    linear-gradient(transparent, transparent, #0005);
            }
            section div:nth-child(1) {
                transform: translateZ(300px);
            }
            section div:nth-child(2) {
                transform: rotateY(60deg) translateZ(300px);
            }
            section div:nth-child(3) {
                transform: rotateY(120deg) translateZ(300px);
            }
            section div:nth-child(4) {
                transform: rotateY(180deg) translateZ(300px);
            }
            section div:nth-child(5) {
                transform: rotateY(240deg) translateZ(300px);
            }
            section div:nth-child(6) {
                transform: rotateY(300deg) translateZ(300px);
            }
        </style>
    </head>
    <body>
        <section
                 onclick="this.style.animationPlayState = this.style.animationPlayState === 'paused' ? 'running' : 'paused'"
                 >
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
</html>

HTML5和CSS3的解释

HTML5和CSS3的狭义解释

广义的HTML5

1. 广义的HTML5是``HTML5本身+CSS3+JavaScript`。
2. 这个集合有时称为HTML5和朋友，通常缩写为HTML5。
3. 虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
4. HTML5MDN介绍: https://developer.mozilla.org/zh-CN/docs/eb/Guide/HTML/HTML

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1.私有前缀

• -moz-: 代表firefox 浏览器私有属性
• -ms-: 代表ie 浏览器私有属性
• -webkit-: 代表safari、chrome私有属性
• -o-: 代表Opera 私有属性

2.推荐写法

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

综合案例

1.品优购项目规划

1.1品优购项目整体介绍

• 项目名称:品优购
• 项目描述:品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作

1.2品优购项目学习目的

1. 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术
2. 品优购项目能复习、总结、提高基础班所学布局技术。
3. 写完品优购项目，能对实际开发中制作 PC 端页面流程有一个整体的感知。
4. 为后期学习移动端项目做铺垫。

1.3开发工具以及技术栈

1. 开发工具

   • VScode、Photoshop、主流浏览器(以Chrome浏览器为主)

2. 技术栈

   • 利用 HTML5+CSS3 手动布局，可以大量使用H5新增标签和样式
   • 采取结构与样式相分离,模块化开发
   • 良好的代码规范有利于团队更好的开发协作，提高代码质量，因此品优购项目里面，请同学们遵循以下代码规范。(详情见素材文件实—品优购代码规范.md)

1.4项目搭建工作

需要创建如下文件夹

名称	说明
项目文件夹	shoping
样式类图片文件夹	images
样式文件夹	css
产品类图片文件夹	upload
字体类文件夹	fonts
脚本文件夹	js

需要创建如下文件

名称	说明
首页	index.html
CSS 公共样式文件	common.css
CSS 初始化样式文件	base.css

有些网站初始化的不太提倡 *{ margin:0; padding:0; }

比如新浪:html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}

1.5模块化开发

• 代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用

• 这里最典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式

• 模块化开发具有重复使用、修改方便等优点

• common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式

1.6网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

1. 制作favicon图标
   1. 把品优购图标切成 png 图片。
   2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫:http://www.bitbug.net/
2. favicon图标放到网站根目录下
3. HTML页面引入favicon图标

<link rel="shortcut icon" href="/favicon.ico"/>

1.7网站TDK三大标签SEO优化

SEO(Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索
引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合SEO优化。

1. title 网站标题

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议:网站名(产品名)-网站的介绍(尽量不要超过30个汉字)

例如:
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!

小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站

2. description 网站说明

简要说明我们网站主要是做什么的

“我们提供…”我们提倡，description作为网站的总体业务和主题概括，多采用“我们是..”,”xxx网作为…”,”电话:010…”之类语句。

例:<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

3. keywords关键字

keywords是页面关键词，是搜索引的关注点之一。

keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。

例如:<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

2.首页制作（★★★）

网站的首页一般都是使用index命名，比如index.html或者 index.php。我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面

2.1常用模块类名命名

以下是我们约定的命名模块，同学们可以直接使用以下类名即可,

2.2快捷导航 shortcut 制作

通栏的盒子命名为shortcut，是快捷导航的意思。注意这里的行高，可以继承给里面的子盒子

<div class="shortcut">
     <div class="w">
       <div class="fl">
         <ul>
           <li>品优购欢迎你！&nbsp;</li>
           <li>
             <a href="login.html">请登录</a>&nbsp;<a href="#" class="style_red"
               >免费注册</a
             >
           </li>
         </ul>
       </div>
       <div class="fr">
         <ul>
           <li>我的订单</li>
           <li></li>
           <li class="arrow-icon">我的品优购</li>
           <li></li>
           <li>品优购会员</li>
           <li></li>
           <li>企业采集</li>
           <li></li>
           <li class="arrow-icon">关注品优购</li>
           <li></li>
           <li class="arrow-icon">客户服务</li>
           <li></li>
           <li class="arrow-icon">网站导航</li>
         </ul>
       </div>
     </div>
   </div>

/* 版心 */
.w {
  width: 1200px;
  margin: 0 auto;
  color: #666666;
}
/* 快捷导航模块  */
.shortcut {
  height: 31px;
  background-color: #f1f1f1;
  line-height: 31px;
}

.style_red {
  color: #c71523;
}
.fl {
  float: left;
}
.fr {
  float: right;
}

.shortcut ul li {
  float: left;
}

.shortcut .fr ul li:nth-child(even) {
  height: 12px;
  border: 1px solid;
  border-color: #666666;
  margin: 9px 15px 0;
}

.shortcut .fr ul li[class="arrow-icon"]::after {
  content: "\e91e";
  font-family: icomoon;
  margin-left: 5px;
}

header制作

1. header 盒子必须要有高度
2. 1号盒子是 logo 标志定位
3. 2号盒子是 search 搜索模块定位
4. 3 号盒子是 hotwrods 热词模块定位
5. 4号盒子是 shopcar 购物车模块

LOGO SEO 优化

1. logo 里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
2. h1 里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来

• 方法1:text-indent移到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法。
• 方法2:直接给font-size:0;就看不到文字了，京东的做法。

4. 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

nav导航栏制作

• 1号盒子有讲究，根据相关性里面包含.dt和.dd两个盒子

footer制作

• footer 页面底部盒子通栏给一个高度和灰色的背景
• footer 里面有一个大的版心
• 版心里面包含1号盒子，mod_service是服务模块，mod是模块的意思
• 版心里面包含2号盒子，mod_help是帮助模块
• 版心里面包含3号盒子，mod_copyright是版权模块

main 主体模块制作

以前书写的就是模块化中的公共部分。

main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css

• main 盒子宽度为 980 像素，高度是455像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动

• main 里面包含左侧盒子，宽度为 721像素，左浮动，focus 焦点图模块

• main 里面包含右侧盒子，宽度为 250像素，右浮动，newsflash 新闻快报模块

  结构代码

  <div class="w">
      <div class="main">
          <div class="focus">
              ...
          </div>
          <div class="newsflash">
              ...
          </div>
      </div>
  </div>

  样式代码

  .main {
      width: 980px;
      height: 455px;
      margin-left: 220px;
      margin-top: 10px;
  }
  .focus {
      float: left;
      width: 721px;
      height: 455px;
      background-color: purple;
  }
  .newsflash {
      float: right;
      width: 250px;
      height: 455px;
  }

左侧 focus 模块制作

• 大的 focus 盒子 包裹 1 号展示图片的盒子，2号 3号 左右箭头的盒子，4号 小圆点的盒子

  <div class="focus fl">
  	<a href="#" class="arrow-l"> < </a>
  	<a href="#" class="arrow-r"> > </a>
  	<ul>
  		<li>
  		  <a href="#"><img src="upload/focus.jpg" alt=""></a>
  		</li>
  	</ul>
  	<ol class="circle">
  		<li></li>
  		<li class="current"></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ol>
  </div>

• 包裹 1 号盒子（ul > li > a > img），轮播图这样的布局是为了后面方便配置js逻辑代码

• 2 号盒子 跟 3 号盒子 左右箭头，利用定位的方式来实现

  样式代码

  .arrow-l,
  .arrow-r {
  	position: absolute;
  	top: 50%;
  	margin-top: -20px;
  	width: 24px;
  	height: 40px;
  	background: rgba(0, 0, 0, .3);
  	text-align: center;
  	line-height: 40px;
  	color: #fff;
  	font-family: 'icomoon';
  	font-size: 18px;
  }
  .arrow-r {
  	right: 0;
  }

• 4 号盒子 里面放 小圆点 （ol > li）

  • 小圆圈利用边框实现
  • 小圆点里面背景颜色来实现

  样式代码

  .circle {
  	position: absolute;
  	bottom: 10px;
  	left: 50px;
  }
  .circle li {
  	float: left;
  	width: 8px;
  	height: 8px;
  	/*background-color: #fff;*/
  	border: 2px solid rgba(255, 255, 255, 0.5);
  	margin: 0 3px;
  	border-radius: 50%;
  	/*鼠标经过显示小手*/
  	cursor: pointer;
  
  }
  .current {
  	background-color: #fff;
  	box-shadow: 
  }

右侧 newsflash 模块制作

• 右侧的模块 分为上中下三个盒子

  结构代码

  <div class="newsflash">
      <div class="news">
          ...
      </div>
      <div class="lifeservice">
          ...
      </div>
      <div class="bargain">
          ...
      </div>
  </div>

• 1 号盒子为 news 新闻模块 高度为 165px

  

  • 分为上下两个结构，但是两个模块都用 div，上面是 news-hd，下面是 news-bd

    结构代码

    <div class="news">
        <div class="news-hd">
            ...
        </div>
        <div class="news-bd">
            ...
        </div>
    </div>

    样式代码

    .news {
       height: 165px;
       border: 1px solid #e4e4e4;
    }

  • 上面是news-hd，设置高度是 33px，设置下边框

    • 里面放一个h5 标题
    • 放一个a标签，内容是 更多，然后让 a 进行右浮动，三角用伪元素设置字体图标就好

    结构代码

    <div class="news-hd">
        <h5>品优购快报</h5>
        <a href="#" class="more">更多</a>
    </div>

    样式代码

    .news-hd {
        height: 33px;
        line-height: 33px;
        border-bottom: 1px dotted #e4e4e4;
        padding: 0 15px;
    }
    .news-hd h5 {
        float: left;
        font-size: 14px;
    }
    .news-hd .more {
        float: right;
    }
    .news-hd .more::after {
        font-family: 'icomoon';
        content: '\e920';
    }

  • 下面是news-bd

    • 里面包含 ul 和 li 还有链接
    • 给li设置高度，24px，设置单行文字溢出省略： 1. 设置 overflow: hidden; 2.设置 white-space: nowrap; 3. 设置 text-overflow: ellipsis;

    结构代码

    <div class="news-bd">
        <ul>
            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
            <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
        </ul>
    </div>

    样式代码

    .news-bd {
        padding: 5px 15px 0;
    }
    .news-bd ul li {
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

• 2 号盒子为 lifeservice 生活服务模块 高度为 209px

  

  • 设置边框（左右下 边框）
  • 里面的内容 是 ul > 12*li，给li设置宽 63px，高71px，设置 右边和下边的边框，设置浮动
  • 这样设置后，第四个li会装不开，掉下来，解决办法如下
    • lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
    • 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li
    • lifeservice 盒子 overflow 隐藏多余的部分就可以了
  • 在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹
  • 给 i 设置 24px宽和28px的高（注意 i 是行内元素， 转成行内块），给 li 设置 text-align:center 让里面内容居中显示

  结构代码

  <div class="lifeservice">
      <ul>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
          <li>
              <i></i>
              <p>话费</p>
          </li>
      </ul>
  </div>

  样式代码

  .lifeservice {
      overflow: hidden;
      height: 209px;
      /* background-color: purple; */
      border: 1px solid #e4e4e4;
      border-top: 0;
  }
  .lifeservice ul {
      width: 252px;
  }
  .lifeservice ul li {
      float: left;
      width: 63px;
      height: 71px;
      border-right: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      text-align: center;
  }
  .lifeservice ul li i {
      display: inline-block;
      width: 24px;
      height: 28px;
      background-color: pink;
      margin-top: 12px;
      background: url(../images/icons.png) no-repeat -19px -15px;
  }

• 3 号盒子为 bargain 特价商品

  • 这个比较简单，直接插入一张图片即可

  结构代码

  <div class="bargain">
      <img src="upload/bargain.png" alt="">
  </div>

  样式代码

  .bargain {
      margin-top: 5px;
  }

推荐模块制作 – recom

• 大盒子 recom 推荐模块 recommend

  • 给这个 recom 大盒子 设置版心，设置 163px的高，背景颜色（#ebebeb），设置距离上边 12px

  结构代码

  <div class="w recom">
      ...
  </div>

  样式代码

  .recom {
      height: 163px;
      background-color: #ebebeb;
      margin-top: 12px;
  }

• 里面包含 2 个盒子， 浮动即可

  结构代码

   <div class="w recom">
      <div class="recom_hd">
          ...
      </div>
      <div class="recom_bd">
          ...
      </div>
  </div>

• 1 号盒子 recom_hd

  • 设置宽度205px，高度163px
  • 里面放一个img标签，插入图片即可

  结构代码

  <div class="recom_hd">
      <img src="images/recom.png" alt="">
  </div>

  样式代码

  .recom_hd {
      float: left;
      height: 163px;
      width: 205px;
      background-color: #5c5251;
      text-align: center;
      padding-top: 30px;
  }

• 2 号盒子 recom_bd ，注意里面的小竖线

  • 右侧结构里面放 ul 包含 4个 li，每个li里面包含一个img
  • 直接利用切片工具把里面的内容当成一张图片
  • 给 li 设置浮动
  • 给 img 设置宽高，宽度 248px，高度 163px
  • 小竖线利用伪元素来实现，给每一个li设置一个 after 伪元素，然后给这个伪元素设置绝对定位，设置top 10px，给li设置相对定位（注意，最后一个li不用设置伪元素），可以利用 nth-child(-n+3){...}

  结构代码

  <div class="recom_bd">
      <ul>
          <li><img src="upload/recom_03.jpg" alt=""></li>
          <li><img src="upload/recom_03.jpg" alt=""></li>
          <li><img src="upload/recom_03.jpg" alt=""></li>
          <li><img src="upload/recom_03.jpg" alt=""></li>
      </ul>
  </div>

  样式代码

  .recom_bd {
      float: left;
  }
  .recom_bd ul li {
      position: relative;
      float: left;
  }
  .recom_bd ul li img {
      width: 248px;
      height: 163px;
  }
  .recom_bd ul li:nth-child(-n+3)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 10px;
      width: 1px;
      height: 145px;
      background-color: #ddd;
  }

家用电器模块

注意这个 floor ，不要给高度，内容有多少，算多少

第一楼是家用电器模块： 里面包含两个盒子

box_hd 制作

• 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子

  

  • box_hd 给 30px 的高度，2个像素的下边框
  • 里面放一个左侧 h3 的盒子，右侧一个div盒子，div盒子里面放 ul > li > a
  • 左侧盒左浮动，右侧盒子右浮动
  • a标签之间的距离用左右的padding撑开即可

  结构代码

  <div class="box_hd">
      <h3>家用电器</h3>
      <div class="tab_list">
          <ul>
              <li> <a href="#" class="style_red">热门</a>|</li>
              <li><a href="#">大家电</a>|</li>
              <li><a href="#">生活电器</a>|</li>
              <li><a href="#">厨房电器</a>|</li>
              <li><a href="#">生活电器</a>|</li>
              <li><a href="#">个护健康</a>|</li>
              <li><a href="#">应季电器</a>|</li>
              <li><a href="#">空气/净水</a>|</li>
              <li><a href="#">新奇特</a>|</li>
              <li><a href="#"> 高端电器</a></li>
          </ul>
      </div>
  </div>

  样式代码

  .box_hd {
      height: 30px;
      border-bottom: 2px solid #c81623;
  }
  .box_hd  h3 {
      float: left;
      font-size: 18px;
      color: #c81623;
      font-weight: 400;
  }
  .tab_list {
      float: right;
      line-height: 30px;
  }
  .tab_list ul li {
      float: left;
  }
  .tab_list ul li a {
      margin: 0 15px;
  }

box_bd 制作

• 2 号盒子 box_bd，不要给高度

  

  • box_bd 属于是tab栏的内容区域，所以在这个里面先嵌套一个盒子 tab_content，在tab_content 里面包裹tab选项卡对应的内容
  • 内容被一个大盒子包裹（tab_list_item），里面是 ul 包裹 5个 li，每个li设置对应的宽度，然后设置浮动
  • 而这5个li的宽度是不一致的，在这里我们的做法是 先把宽度的样式列出来，然后给对应的li设置
    • 第一个小 li 分为上下结构，上面是 ul 包裹 li ，li里面包裹 a，下面插入一张图片
    • 上面的li设置宽高，设置浮动，这样就排列下来了
    • 后面的小 li 里面先放一个a标签，然后在a标签里面插入图片即可

  结构代码

  <div class="box_bd">
      <div class="tab_content">
          <div class="tab_list_item">
              <div class="col_210">
                  <ul>
                      <li><a href="#">节能补贴</a></li>
                      <li><a href="#">节能补贴</a></li>
                      <li><a href="#">节能补贴</a></li>
                      <li><a href="#">节能补贴</a></li>
                      <li><a href="#">节能补贴</a></li>
                      <li><a href="#">节能补贴</a></li>
                  </ul>
                  <a href="#">
                      <img src="upload/floor-1-1.png" alt="">
                  </a>
              </div>
              <div class="col_329">
                  <a href="#">
                      <img src="upload/floor-1-b01.png" alt="">
                  </a>
              </div>
              <div class="col_221">
                  <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a>
                  <a href="#"> <img src="upload/floor-1-3.png" alt=""></a>
              </div>
              <div class="col_221">
                      <a href="#"> <img src="upload/floor-1-4.png" alt=""></a>
                    
              </div>
              <div class="col_219">
                      <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a>
                      <a href="#"> <img src="upload/floor-1-6.png" alt=""></a>
              </div>
          </div>
      </div>
  </div>

  样式代码

  .box_bd {
      height: 361px;
    
  }
  .tab_list_item>div {
      float: left;
      height: 361px;
  }
  
  .col_210 {
      width: 210px;
      background-color: #f9f9f9;
      text-align: center;
  }
  .col_210  ul li {
      float: left;
      width: 85px;
      height: 34px;
      border-bottom: 1px solid #ccc;
      text-align: center;
      line-height: 33px;
      margin-right: 10px;
  }
  .col_210  ul {
      padding-left: 12px;
  }
  .col_329 {
      width: 329px;
  }
  .col_221 {
      width: 221px;
      border-right: 1px solid #ccc;
  }
  .col_219 {
      width: 219px;
  }
  .bb {
      /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
      display: block;
      border-bottom: 1px solid #ccc;
  }

tab栏切换需求

tab栏切换实现对结构的要求

• tab栏的布局是 ul > li > a
• 有多少个tab选项卡，那么对应就有多少个内容
• 但是每一次只会显示一个内容块，其他内容进行的隐藏
• 等后面我们学习了js之后，我们就会配合js来实现，tab栏的切换

3.列表制作（★★★）

品优购列表页制作准备工作

• 列表页面是新的页面，我们需要新建页面文件 list.html
• 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来
• 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css
• 需要新的 list.css 样式文件，这是列表页专门的样式文件

列表页 header 和 nav 修改

• 秒杀盒子 sk（ second kill ） 定位即可

结构代码

<header class="header w">
     <!-- logo模块 -->
     ...
     <!-- 列表页的秒杀模块 -->
     <div class="sk">
         <img src="css/sk.png" alt="">
     </div>
     <!-- search搜索模块 -->
     ...
     <!-- hotwords模块制作 -->
     ...
     <!-- 购物车模块 -->
     ...
 </header>

样式代码

.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0  14px;
}

• 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
• 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li

结构代码

<!-- nav模块制作 start -->
<nav class="nav">
    <div class="w">
        <div class="sk_list">
            <ul>
                <li><a href="#">品优秒杀</a></li>
                <li><a href="#">品优秒杀</a></li>
                <li><a href="#">品优秒杀</a></li>
            </ul>
        </div>
        <div class="sk_con">
            <ul>
                <li><a href="#">女装</a></li>
                <li><a href="#" class="style_red">女鞋</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">更多分类</a></li>
            </ul>
        </div>
    </div>
</nav>

样式代码

.sk_list {
    float: left;
}
.sk_list  ul li {
    float: left;
}
.sk_list  ul li a {
    display: block;
    line-height: 47px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.sk_con {
    float: left;
}
.sk_con ul li {
    float: left;
}
.sk_con  ul li a {
    display: block;
    line-height: 49px;
    padding: 0 20px;
    font-size: 14px;
   
}
.sk_con  ul li:last-child a::after {
    content: '\e91e';
    font-family: 'icomoon';
}

列表页主体 sk_container

• 1 号盒子 sk_container 给宽度 1200，不要给高度

结构代码

<!-- 列表页主体部分 -->
<div class="w sk_container">
    <div class="sk_hd">
        ...
    </div>
    <div class="sk_bd">
        ...
    </div>
</div>

sk_hd 制作

• 2 号盒子 sk_hd ，插入图片即可

结构代码

<div class="sk_hd">
    <img src="upload/bg_03.png" alt="">
</div>

sk_bd 制作

• 3 号盒子 sk_bd ，里面包含很多的 ul 和 li
  • 当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候 设置为红色即可
  • 由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了

结构代码

<div class="sk_bd">
     <ul class="clearfix">
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
    </ul>
</div>

样式代码

.sk_bd ul li {
    overflow: hidden;
    float: left;
    margin-right: 13px;
    width: 290px;
    height: 460px;
    border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}
.sk_bd ul li:hover {
    border: 1px solid #c81523;
}

4.注册页面（★★★）

注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化

准备工作

• 创建register.html，引入 base.css，引入favicon图标
• 创建register.css ，在html页面进行引入

header 头部实现

• 整个内容用 版心 进行包裹
• 第一个头部区域怎么简单怎么来，用一个header盒子包裹链接，链接里面放图片即可

结构代码

<header>
    <div class="logo">
        <a href="index.html"> <img src="images/logo.png" alt=""></a>
    </div>
</header>

样式代码

.w {
    width: 1200px;
    margin: 0 auto;
}
header {
    height: 84px;
    border-bottom: 2px solid #c81523;
}
.logo {
    padding-top: 18px;
}

registerarea 主体模块实现

• 整个大盒子 高度为 522px，设置4个边框

  结构代码

  <div class="registerarea">
     ...
  </div>

  样式代码

  .registerarea {
      height: 522px;
      border: 1px solid #ccc;
      margin-top: 20px;
  }

• 1号盒子 是一个 h3 标签，放标题

  • 里面放 注册新用户 的文字，然后包一个 div的标签，让div标签右浮动

  结构代码

  <h3>注册新用户
      <div class="login">我有账号，去<a href="#">登陆</a></div>
  </h3>

  样式代码

  .registerarea h3 {
      height: 42px;
      border-bottom: 1px solid #ccc;
      background-color: #ececec;
      line-height: 42px;
      padding: 0 10px;
      font-size: 18px;
      font-weight: 400;
  }
  .login {
      float: right;
      font-size: 14px;
  }
  .login a {
      color: #c81523;
  }

• 2号盒子 里面放注册的内容

  • 先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示

  • 里面的内容利用 ul 包含 li 来实现的（不需要用表格）

  • 每个 li 里面，左侧放 label 标签， 中间放input 标签， 右侧放 span 提示信息

  • 左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐

  • input 表单设置 宽度 242px，高度 37px，设置边框

  • 右侧 span修饰一下文字颜色

  • 提示信息的样式优化

    • 定义一个 错误的样式，定义一个 正确的样式，然后给对应的盒子设置类名

    • 在span里面放一个小盒子，这个小盒子用来显示 图标的，设置一下宽高 （20x20）

    • 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置 图片与文字对齐方式

  • 安装程度的布局，在第4个小 li 里面放 三个盒子，分别放 弱、中、强

    • 设置 em 的 左右 12px 的内边距，设置一下文字颜色
    • 分别设置 背景颜色

  • 同意协议 和 完成注册 都是用 li 进行包裹

  结构代码

  <div class="reg_form">
      <form action="">
          <ul>
              <li><label for="">手机号：</label> <input type="text" class="inp">
                  <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
              <li><label for="">短信验证码：</label> <input type="text" class="inp">
                  <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li>
              <li><label for="">登录密码：</label> <input type="password" class="inp">
                  <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
              <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
              <li><label for="">确认密码：</label> <input type="password" class="inp">
                  <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
              <li class="agree"><input type="checkbox" name="" id=""> 
                  同意协议并注册 <a href="#">《知晓用户协议》</a>
              </li>
              <li>
                  <input type="submit" value="完成注册" class="btn">
              </li>
          </ul>
      </form>
  </div>

  样式代码

  .reg_form {
      width: 600px;
  
      margin: 50px auto 0;
  }
  .reg_form ul li {
      margin-bottom: 20px;
  }
  .reg_form ul li label {
      display: inline-block;
      width: 88px;
      text-align: right;
  }
  .reg_form ul li .inp {
      width: 242px;
      height: 37px;
      border: 1px solid #ccc;
  }
  .error {
      color: #c81523;
  }
  .error_icon,
  .success_icon {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      background: url(../images/error.png) no-repeat;
      margin-top: -2px;
  }
  .success {
      color: green;
  }
  .success_icon {
      background: url(../images/success.png) no-repeat;
  }
  .safe {
      padding-left: 170px;
  }
  .safe em {
      padding: 0 12px;
      color: #fff;
  }
  .ruo {
      background-color: #de1111;
  }
  .zhong {
      background-color: #40b83f;
  }
  
  .qiang {
      background-color: #f79100;
  }
  .agree {
      padding-left: 95px;
  }
  .agree input {
      vertical-align: middle;
  }
  .agree a {
      color: #1ba1e6;
  }
  .btn {
      width: 200px;
      height: 34px;
      background-color: #c81623;
      font-size: 14px;
      color: #fff;
      margin: 30px 0 0 70px;
  }

底部实现

结构代码

<footer>
    <div class="mod_copyright">
        <div class="links">
            <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
            品优购公益 | English Site | Contact U
        </div>
        <div class="copyright">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
            京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</footer>

样式代码

.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.links a {
    margin: 0 3px;
}
.copyright {
    line-height: 20px;
}

Web服务器

把自己网站上传到服务器上，可以让其他人访问

什么是Web服务器

我们写的品优购网站，目前是放到自己电脑上的，只能自己访问浏览。

如果想要很多人访问我们的网站，可以把品优购放到服务器上，这样就可以多人访问我们的品优购网站了

服务器（我们也会称之为主机）是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web 服

务器等。

Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等 Web 客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。

以下服务器我们主要指的是Web服务器。

根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

本地服务器

我们可以把自己的电脑设置为本地服务器， 这样同一个局域网内的同学就可以访问你的品优购网站了。 就业班学ajax的时候，再进行讲解

远程服务器

本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。

远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

比如域名： www.mi.com 可以访问小米网站

小结

• 服务器就是一台电脑。因为我们主要是做网站，所以我们主要使用web服务器
• 服务器可以分为本地服务器和远程服务器
• 远程服务器是别的公司为我们提供了一台计算机。
• 我们可以把网站上传到远程服务器里面， 别人就可以通过域名访问我们的网站了

将自己的网站上传到远程服务器（★★★）

注意：一般稳定的服务器都是需要收费的。 比如：阿里云

这里给大家推荐一个免费的远程服务器（免费空间） http://free.3v.do/

• 去免费空间网站注册账号。
• 记录下主机名、用户名、密码、域名。
• 利用 cuteftp 软件 上传网站到远程服务器
• 在浏览器中输入域名，即可访问我们的品优购网站了

移动端布局

1.移动端基础

1.1 浏览器现状

移动端常见浏览器–UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的

总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可

1.2 手机屏幕现状

移动端设备屏幕尺寸非常多，碎片化严重，作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px

1.3 移动端调试方法

• Chrome DevTools(谷歌浏览器)的模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

2. 视口

视口(viewport)就是浏览器显示页面内容的屏幕区域,视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• IOS,Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

2.2 视觉视口 visual viewport

• 字面意思，它是用户正在看到的网站的区域。
• 注意:是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

2.3 理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

• 理想视口，对设备来讲，是最理想的视口尺寸
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽，我们布局的视口就多宽

2.4 meta视口标签

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

2.6 标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

3. 二倍图

3.1 物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750*1334
• 我们开发时候的1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

3.2 多倍图

• 对于一张 50px * 50px的图片,在手机,Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊

• 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

• 通常使用二倍图，因为iPhone6\7\8的影响,但是现在还存在3倍图4倍图的情况，这个看实际开发公司需求

• 背景图片 注意缩放问题,一般来说就是先测量大小,设置盒子宽高,然后把背景图缩小2倍,测量位置设置background,注意bgsize属性要改成原来宽高的一半

3.3 背景缩放 background-size

background-size属性规定背景图像的尺寸

background-size:背景图片宽度 背景图片高度;

• 单位: 长度 | 百分比 | cover | contain;
• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。(按比例拉伸到图片完全被盖住,可能会有部分溢出)
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(按比例拉伸到和图片宽度相同,可能会有部分空白)

4. 移动端开发选择

4.1 移动端主流方案

1. 单独制作移动端页面(主流)
   京东商城手机版
2. 响应式页面兼容移动端(其次)
   三星手机官网
   淘宝触屏版
   苏宁易购手机版

5. 移动端开发解决方案

5.1 移动端浏览器

• 移动端浏览器基本以 webkit内核为主，因此我们就考虑webkit兼容性问题。
• 我们可以放心使用 H5 标签和 CSS3 样式。
• 同时我们浏监器的私有前缀我们只需要考虑添加webkit即可

5.2 CSS初始化 normalize.css

移动端 CSS 初始化推荐使用normalize.css/

• Normalize.css:保护了有价值的默认值
• Normalize.css:修复了浏览器的bug
• Normalize.css:是模块化的
• Normalize.css:拥有详细的文档

官网地址:http://necolas.github.io/normalize.css/

5.3 css3盒子模型 box-sizing

• 传统模式宽度计算:盒子的宽度=CSS中设置的width+border+padding

• CSS3盒子模型: 盒子的宽度=CSS中设置的宽度,width里面包含了border和padding也就是说，我们的CSS3中的盒子模型，padding和border不会撑大盒子了

5.4 特殊样式

/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing:border-box;
/*点击高亮我们需要清除清除 设置为transparent完成透明*/
webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时的弹出菜单*/
img,a {-webkit-touch-callout:none;}

6. 移动端常见布局

移动端技术选型

6.1 流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局。

• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

• 流式布局方式是移动web开发使用的比较常见的布局方式。

• max-width 最大宽度(max-height 最大高度)

• min-width 最小宽度(min-height 最小高度)

京东移动端案例

• 图片格式
• DPG图片压缩技术
  京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
• webp图片格式
  谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间

6.2 flex布局

flex布局和传统布局

传统布局	flex 弹性布局
布局繁琐	操作方便，布局极为简单，移动端应用很广泛
兼容性好	PC 端浏览器支持情况较差
局限性，不能很好地移动端布局	IE 11或更低版本，不支持或仅部分支持

1. 如果是PC端页面布局，我们还是传统布局。
2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

flex布局初体验

  <style>
    div {
      display: flex;
      justify-content: space-between;
      width: 80%;
      height: 300px;
      background-color: pink;
    }
    div span {
      width: 150px;
      height: 100px;
      background-color: purple;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</body>

布局原理

flex 是 flexible-Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

采用 Flex布局的元素,称为Flex容器(flex container),简称”容器”。

它的所有子元素自动成为容器成员，称为Flex 项目(flexitem)，简称”项目”。

flex布局父项常见属性

• flex-direction 设置主轴的方向

  1. 主轴与侧轴

     在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有: 行和列、x轴和y轴

     • 默认主轴方向就是x轴方向，水平向右
     • 默认侧轴方向就是y轴方向，水平向下

  2. 属性值

  flex-direction属性决定主轴的方向(即项目的排列方向)

  注意:主轴和侧轴是会变化的，就看fex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

• justify-content 设置主轴上的子元素排列方式

  justify-content属性定义了项目在主轴上的对齐方式

  注意:使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始 如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间（重要）

• flex布局中子元素的排列方式flex-wrap

  默认父盒子装不下的时候,会修改子元素的大小
  默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap属性定义，flex布局中默认是不换行的。

属性值	说明
nowrap	默认值，不换行
wrap	换行

• align-items 设置侧轴上的子元素排列方式(单行)
  该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单行的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）,不能给子项设置高度

• align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平均分剩余空间
space-between	子项在侧轴先分布在两头，再平均分剩余空间
stretch	设置子项元素高度平分父元素高度

• flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

flex-flow : cloumn wrap;

• 总结
  • flex-direction:设置主轴的方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性

• flex 属性 ★

  flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。也可以使用百分比(20%表示占父元素的20%)

item{
flex : <number>;/*default 0*/
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0"
    />
    <title>flex子项属性</title>
    <style>
      section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
      }

      section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: yellow;
      }
      section div:nth-child(2) {
        background: red;
        /* 子项属性 */
        flex: 1; /* 独占剩余空间 */
      }
      section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: yellow;
      }

      .box {
        display: flex;
        width: 60%;
        height: 350px;
        background-color: pink;
        margin: 100px auto;
        flex-direction: row;
      }

      .box div:nth-child(n) {
        /* 子项属性 */
        flex: 1; /* 独占剩余空间 */
      }
      .box div:nth-child(1) {
        background-color: blue;
      }
      .box div:nth-child(2) {
        background: red;
      }
      .box div:nth-child(3) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: yellow;
      }
      .box div:nth-child(3) .son {
        flex: 0.4;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <section>
      <div></div>
      <div></div>
      <div></div>
    </section>

    <div class="box">
      <div></div>
      <div></div>
      <div>
        <div class="son">1</div>
        <div class="son">2</div>
      </div>
    </div>
  </body>
</html>

• align-self 控制子项自己在侧轴上的排列方式

  align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性默认值为 auto，表示继承父元素的align-items属 性，如果没有父元素，则等同于stretch。

span:nth-child(2){
    /*设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

• order 属性定义项目的排列顺序
  数值越小，排列越靠前，默认为0. 注意:和 z-index不一样。

6.3 响应式布局

响应式布局是一种网页设计技术，旨在使网页在各种设备上（如电脑、平板、手机等）都能良好显示。它通过使用灵活的网格布局、媒体查询和流式图像等手段，自动调整网页的结构和样式，以适应不同的屏幕尺寸。

以下是实现响应式布局的一些基本步骤和技巧：

1. 使用流式网格布局： 通过使用百分比宽度而不是固定宽度，可以使元素相对于其父元素进行缩放。例如：

   .container {
       width: 100%; /* 使容器宽度占满屏幕 */
   }
   .column {
       width: 50%; /* 列宽度为容器宽度的50% */
   }

2. 媒体查询： 利用CSS的媒体查询，根据不同的屏幕尺寸应用不同的样式。例如：

   @media (max-width: 600px) {
       .column {
           width: 100%; /* 当屏幕宽度小于600px时，列宽度为100% */
       }
   }

3. 流式图像： 确保图像能够根据其父容器的大小进行缩放，通常可以通过设置max-width来实现：

   img {
       max-width: 100%; /* 图像最大宽度为其父元素的100% */
       height: auto; /* 保持图像的纵横比 */
   }

4. 灵活的排版： 设置字体大小和行高等，使用相对单位（如em、rem），确保文本在不同设备上可读性良好。

5. 移动优先设计： 在设计时优先考虑手机用户的体验，然后再为更大的屏幕添加样式。

7. 渐变效果

background: linear-gradient(起始方向，颜色1，颜色2，...);
background: -webkit-linear-gradient(left,red,blue);
background: -webkit-linear-gradient(left top,red,blue);

背景渐变必须添加浏览器私有前缀
起始方向可以是:方位名词 或者 度数，如果省略默认就是 top

div {
    width: 600px;
    height: 200px;
    background: -webkit-linear-gradient(left, red, blue);
    /* 起始位置可以省略,默认从上到下 */
    background: -webkit-linear-gradient(red, blue);
    /* 也可以指定起始位置 (左上角到右下角) */
    background: -webkit-linear-gradient(top left, red, blue);
}

8. SEO之文字隐藏

隐藏文本曾经是SEO手册中古老的运营技巧之一

• 方式一 : font-size: 0
• 方式二 : text-indent : -999; overflow : hidden;

移动端开发之rem适配布局

1. 页面布局文字能否随着屏幕大小变化而变化?
2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置?
3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放?

1.rem基础

rem 单位

• rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。
  不同的是rem的基准是相对于html元素的字体大小。

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24pX。

• 可以通过修改html标签的字体大小来控制全部盒子的大小,非常方便

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rem布局之rem基础单位</title>
    <style>
      html {
        font-size: 14px;
      }
      body {
        font-size: 12px;
      }
      /* em 是父元素字体大小 */
      div {
        /* width: 10em;
        height: 10em; */

        /* rem是相对于html的font-size */
        width: 10rem;
        height: 10rem;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

2.媒体查询

2.1 什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2.2 语法规范

@media mediatype and|not|only(media feature){
    css-code;
};

• 用 @media开头 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性 必须有小括号包含

1. mediatype查询类型

   将不同的终端设备划分成不同的类型，称为媒体类型

   值	解释说明
   all	用于所有设备
   print	用于打印机和打印预览
   screen	用于电脑屏幕，平板电脑，智能手机等

2. 关键字

   关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

   • and: 可以将多个媒体特性连接到一起，相当于“且”的意思
   • not: 排除某个媒体类型，相当于“非”的意思，可以省略。
   • only: 指定某个特定的媒体类型，可以省略。

3. 媒体特性
   每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

   值	解释说明
   width	定义输出设备中页面可见区域的宽度
   min-width	定义输出设备中页面最小可见区域宽度
   max-width	定义输出设备中页面最大可见区域宽度

   @media screen and (min-width: 450px) and (max-width: 980px) {
       body {
           background-color: blue;
       }
   }
   // 在宽度处于450px到980px之间时,设置body颜色为蓝色

2.3 媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式, 使用 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

2.4 引入资源(理解)

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)

原理，就是直接:link中判断设备的尺寸，然后引用不同的css文件。

语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href-"mystylesheet.css">

3.less基础

3.1 维护css的弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念

• CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的，
• 不方便维护及扩展，不利于复用。
• CSS 没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

3.2 Less 介绍

Less(Leaner Style Sheets 的缩写)是一门CSS扩展语言，也成为CSS预处理器。

做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。

它在CSS的语法基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的编写并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

• Less中文网址:http://lesscss.cn/
• 常见的CSS预处理器:Sass、Less、Stylus

3.3 Less使用

我们首先新建一个后缀名为less的文件，在这个less文件里面书写less语句

• Less 变量
• Les编译
• Less 嵌套
• Less 运算

3.4 Less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用

@变量名:值;

1. 变量命名规范
   • 必须有@为前缀
   • 不能包含特殊字符
   • 不能以数字开头
   • 大小写敏感

3.5 Less编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。
所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

3.6 Less嵌套

我们经常用到选择器的嵌套

#header .logo{
    width:300px;
}

Less 嵌套写法

#header {
    .logo {
        width: 300px;
    }
}

• 如果遇见(交集|伪类|伪元素选择器)
• 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代;
• 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

3.7 Less 运算 ★

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算

/*Less 里面写*/
@width: 10px+ 5;

div {
  border: @width solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样*/
width: (@width+5) * 2;

注意:

• 乘号(*)和除号(/)的写法
• 运算符中间左右有个空格隔开1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

3.8 Less导入

//在 index.less 中导入common.less 文件
@import "common"

4.rem适配布局

4.1 rem 实际开发适配方案

1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的 font-size 大小;(媒体查询)
2. CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值;

4.2 rem 适配方案技术使用(市场主流)

• 技术方案1
  • less
  • 媒体查询
  • rem
• 技术方案2(推荐)
  • flexible.js
  • rem

总结:

1. 两种方案现在都存在。
2. 方案2 更简单，现阶段大家无需了解里面的js代码。

4.3 rem 实际开发适配方案1

rem +媒体查询 + less 技术

1. 设计稿常见尺寸宽度

设备	常见宽度
iphone 4.5	640px
iphone 678	750px
Android	常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的安卓设备为720px

一般情况下，我们现在基本以750为准。一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果

2. 动态设置 html 标签 font-size 大小

   1. 假设设计稿是750px
   2. 假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)
   3. 每一份作为html字体大小，这里就是50px
   4. 那么在320px设备的时候，字体大小为320/15就是 21.33px
   5. 用我们页面元素的大小 除以不同的 html 字体大小会发现他们比例还是相同的
   6. 比如我们以 750为标准设计稿
   7. 一个100*100像素的页面元素在750屏幕下，就是100/50 转换为rem是2rem * 2rem 比例是 1比1
   8. 320屏幕下，html字体大小为21.33 则2rem=42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
   9. 但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

3. 元素大小取值方法

   1. 最后的公式:页面元素的 rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
   2. 屏幕宽度/划分的份数就是 html font-size 的大小
   3. 或者:页面元素的 rem值 = 页面元素值(px)/html font-size 字体大小

4.4 rem 实际开发适配方案2

手机淘宝团队出的简洁高效移动端适配库flexable.js

我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理

它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。

我们要做的，就是确定好我们当前设备的html 文字大小就可以了比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以

里面页面元素rem值:页面元素的px值/75

剩余的，让flexible.js来去算

4.5 VSCode px转换rem插件 cssrem

1. 打开设置
2. 在setting.json中设置cssrem插件的base-font-size

黑马面面布局开发

一、目的

1. 了解移动端页面开发流程
2. 掌握移动端常见布局思路

1.1 技术方案

1. 弹性盒子 + rem + LESS 
4. 最小适配设备为iphone5 320px  最大设配设备为iphone8plus(ipad能正常查看内容即可)

1.2 代码规范

1. 类名语义化,尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线“_” 连接
2. 类名嵌套层次尽量不超过三层
3. 尽量避免直接使用元素选择器
4. 属性书写顺序
   布局定位属性：display / position / float / clear / visibility / overflow
   尺寸属性：width / height / margin / padding / border / background
   文本属性：color / font / text-decoration / text-align / vertical-align
   其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
5. 避免使用id选择器
6. 避免使用通配符*和!important

1.2 目录规范

项目文件夹：heimamm
	样式文件夹：css
	业务类图片文件夹：images
	样式类图片文件夹： icons
	字体类文件夹： fonts

二、流程开发

2.1 蓝湖/摹客协作平台

• UI设计师 psd效果图完成后，会上传到蓝湖//摹客里面，同时会拉前端工程师进入开发

• 大部分情况下，UI会把图片按照前端设计要求给切好

• UI设计师 上传蓝湖到或者/摹客（了解）

  1. /摹客官网地址： https://www.mockplus.cn/ 注册一个账号
  2. 下载moke ps插件
  3. PS 安装/摹客/蓝湖插件
  4. 打开PS/摹客/蓝湖插件
  5. 上传（需要切图，需要先标注切图）
  6. 查看项目
  7. 邀请成员进入（分享按钮，链接地址）

• 前端设计师可以直接/摹客/蓝湖测量取值

2.2 适配方案

• flex 布局
• 百分比布局
• rem布局
• vw/vh布局
• 响应式布局
• 本次案例 flex + rem + + flexible.js + LESS

2.3 初始化文件

• 引入 normalize.css

• less 中 初始化body样式

• 约束范围

• @media screen and (min-width: 750px) {
    html {
      font-size: 37.5px !important;
    }
  }
  
  
  #### 2.4 布局模块
  
  1. 头部模块  .header  高度为 80px 
  
  2. nav 模块制作  多用 flex
  
  3. 充电学习 阴影
  
     ~~~css
     box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)
  

2.5 swiper 插件使用

官网地址：https://www.swiper.com.cn/

• 下载需要的css和js文件 html页面中 引入相关文件
• 官网找到类似案例，复制html结构，css样式 js 语法
• 根据需求定制修改模块

2.6 图标字体上传下载

上传步骤：

1. 让UI美工准备好 图标字体（必须是svg格式）

2. 点上传按钮（保留颜色并提交）

3. 生成之后加入购物车即可

4. 点击下载 — 下载代码

小技巧： 如何批量下载全部字体图标呢？

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
    console.log(span[i].querySelector('span').click());
}

2.7 上传码云并发布部署静态网站

准备工作： 需要下载git软件 需要码云注册账号

git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面 类似以前的 ftp

码云 就是远程仓库， 类似服务器

1. 码云创建新的仓库。 heimamm

2. 利用git 提交 把本地网站提交到 码云新建的仓库里面

   • 在网站根目录右键– Git Bash Here

   • 如果是第一次利用git提交，请配置好全局选项

     git config --global user.name "用户名"
     git config --global user.email "你的邮箱地址"

   • 初始化仓库

     git init

   • 把本地文件放到暂存区

     git add .

   • 把本地文件放到本地仓库里面

     git commit -m '提交黑马面面网站'

   • 链接远程仓库

     git remote add origin 你新建的仓库地址

   • 把本地仓库的文件推送到远程仓库 push

     git push -u origin master

3. 码云部署发布静态网站

   • 在当前仓库中，点击 “服务” 菜单

     

   • 选择 Gitee Pages

     

   • 选择 “启动” 按钮

   • 稍等之后，会拿到地址，就可以利用这个地址来预览网页了

   • 当然你也可以利用 草料二维码 生成二维码 https://cli.im/

     

移动端布局之响应式

1. 响应式开发

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备类型	尺寸区间
超小屏幕	<768px
小屏设备	>=768px ~ <992px
中等屏幕	>=992px ~ <1200px
宽屏设备	>=1200px

1.2 响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布和样式变化。

平时我们的响应式尺寸划分

• 超小屏幕(手机，小于768px):设置宽度为100%
• 小屏幕(平板，大于等于768px):设置宽度为750px
• 中等屏幕(桌面显示器，大于等于992px):宽度设置为970px
• 大屏幕(大桌面显示器，大于等于1200px):宽度设置为1170px

1.3 响应式导航栏案例

1. 当我们屏幕大于等于768像素，我们给布局容器container宽度为750px
2. container里面包含8个小盒子,每个盒子的宽度定为93.75px(750/8)，高度为 30px,浮动一行显示
3. 当我们屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度。
4. 此时里面的8个小i，宽度修改为 33.33%，这样一行就只能显示3个小i,剩余下行显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式导航栏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 750px;
        margin: 0 auto;
      }
      .container ul li {
        list-style: none;
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: lightblue;
      }
      @media screen and (max-width: 750px) {
        .container {
          width: 100%;
        }
        .container ul li {
          width: 33.3%;
          background-color: lightblue;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
      </ul>
    </div>
  </body>
</html>

2. Bootstrap前端开发框架

2.1 bootstrap简介

Bootstrap 来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIP的，它简洁灵活，使得 Web开发更加快捷。

中文官网:http://www.bootcss.com/

官网:http://getbootstrap.com/

推荐使用:http://bootstrap.css88.com/

框架: 顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要拨照框架所规定的某种规范进行开发。

优点
标准化的html+css编码规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

让开发更简单，提高了开发的效率

2.2 bootstrap使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
Bootstrap 使用四步曲: 1.创建文件夹结构 2.创建 html骨架结构 3.引入相关样式文件 4.书写内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap框架快速开发</title>
    <!-- 4版本 -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <!-- 3版本 -->
    <link
      rel="stylesheet"
      href=" https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
  </head>
  <body>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
    <span class="glyphicon glyphicon-plus"></span>
  </body>
</html>

2.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类,叫.container

它提供了两个作此用处的类。

1. container类

   • 响应式布局的容器 固定宽度
   • 大屏(>=1200px)宽度定为1170pX
   • 中屏(>=992px)宽度定为 970px
   • 小屏(>=768px)宽度定为 750px
   • 超小屏(100%)

2. container-fluid 类

   • 流式布局容器 百分百宽度

   • 占据全部视口(viewport)的容器。

   • 适合于单独做移动端开发

3. Bootstrap栅格系统布局

3.1 栅格系统简介

栅格系统英文为“gridsystems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加
系统会自动分为最多12列。

3.2 栅格选项参数

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

.col-sm-6表示在小屏设备及以上,将会占据容器的6 / 12即 50%的宽度;

设备尺寸	超小屏幕 (手机) < 768px	小屏设备 (平板) >=768px	中等屏幕 (桌面显示器) >=992px	宽屏设备 (大桌面显示器) >=1200px
.container 最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 (column) 数	12	12	12	12

• 行(row)必须放到container布局容器里面
• 我们实现列的平均划分 需要给列添加 类前缀
• xs-extrasmall:超小; sm-small:小; md-medium:中等; lg-large:大;
• 列(column)大于12，多余的 “列(column)” 所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=”col-md-4 col-sm-6”

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。

简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 要求网页以最新浏览器内核渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <style>
      .row > div {
        height: 50px;
        background-color: pink;
        /* margin: 0 10px; */
      }
    </style>

    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <!-- 我们列嵌套最好加一个row,这样可以去掉父元素的padding值,而且高度自动和父级一样 -->
          <div class="row">
            <div class="col-md-6">a</div>
            <div class="col-md-6">b</div>
          </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
      </div>
    </div>
  </body>
</html>

3.4 列偏移

使用 .col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap列偏移</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <style>
      .row div {
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">左侧</div>
        <div class="col-md-4 offset-4">右侧</div>
      </div>

      <div class="row">
        <!-- 盒子居中摆放offset = (12 - 盒子宽度) / 2-->
        <div class="col-md-8 offset-2">中间布局</div>
      </div>
    </div>
  </body>
</html>

3.5 列排序

在Bootstrap3及以前,使用col-md-pull-4和col-md-push-8来对列进行列排序

现在版本改成使用 order-first类名来指定排序顺序

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap列排序</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <style>
      .row div {
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">左侧</div>
        <div class="col-md-8 order-first">右侧</div>
      </div>
    </div>
  </body>
</html>

3.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

• BootstrapV3

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

• BootstrapV4.6

隐藏页面元素

为了更快地采用移动设备优先的方式进行开发，请使用响应式的 display 类来显示和隐藏页面元素。避免为同一个网站创建多个完全不同的版本，而是应该根据屏幕尺寸隐藏某些页面元素。

如需隐藏某个页面元素，只需使用 .d-none 类即可，还可以使用支持响应式布局的 .d-{sm,md,lg,xl}-none 类。

如需在给定的屏幕尺寸范围内显示某个页面元素的话，可以将一个 .d-*-none 类和一个 .d-*-* 类联合使用，例如，.d-none .d-md-block .d-xl-none 的效果是：在中等尺寸（medium）和大尺寸（large）的屏幕上显示指定的页面元素，其余尺寸的屏幕上全部隐藏该页面元素。

屏幕尺寸	类
在所有尺寸的屏幕上隐藏	.d-none
只在 xs 尺寸的屏幕上隐藏	.d-none .d-sm-block
只在 sm 尺寸的屏幕上隐藏	.d-sm-none .d-md-block
只在 md 尺寸的屏幕上隐藏	.d-md-none .d-lg-block
只在 lg 尺寸的屏幕上隐藏	.d-lg-none .d-xl-block
只在 xl 尺寸的屏幕上隐藏	.d-xl-none
在所有尺寸的屏幕上显示	.d-block
只在 xs 尺寸的屏幕上显示	.d-block .d-sm-none
只在 sm 尺寸的屏幕上显示	.d-none .d-sm-block .d-md-none
只在 md 尺寸的屏幕上显示	.d-none .d-md-block .d-lg-none
只在 lg 尺寸的屏幕上显示	.d-none .d-lg-block .d-xl-none
只在 xl 尺寸的屏幕上显示	.d-none .d-xl-block

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0"
    />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <style>
      .row div {
        height: 200px;
        background-color: pink;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5em;
      }
      .row div:nth-child(2) {
        background-color: yellow;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-3">1</div>
        <div class="col-3">2</div>
        <div class="col-3 d-none d-sm-block">我会变魔术哦</div>
        <div class="col-3">4</div>
      </div>
    </div>
  </body>
</html>