HTML5与CSS3
经过有一周的学习，我又来分享笔记啦！！！
## 1. PS 切图
### 1.1. 常见的图片格式
| 1 | jpg | JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们**产品类的图片** 经常用jpg格式的 |
| 2 | gif | GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 **经常用于一些图片小动画效果** |
| 3 | png | png图像格式，是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景. 如果想要切成 **背景透明的图片** ,请选择png格式. |
| 4 | psd | PSD图像格式，Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿. **对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离**. |
PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。
### 1.2. 图层切图
简单版步骤：
① 使用**移动工具**，点击需要的图片
② 查看右侧，找到图片对应的图层，右击图层 → 快速导出为 PNG
但是很多情况下,我们需要合并图层再导出:
步骤：
① 选中需要的若干个图层：选择一个图层，再按住shift键，继续选第二个图层:
② 图层菜单 → 合并图层(ctrl+e)
③ 查看右侧生成的新图层，在合并后的图层上，右击 → 快速导出为 PNG
### 1.3. 切片切图
步骤：
① 利用切片选中图片 ：利用切片工具手动划出
② 导出选中的图片：文件菜单 → 导出 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储
注意：保存的时候，要选“选中的切片”：
### 1.4. 插件切图
#### 1.4.1. 介绍
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手
#### 1.4.2. 安装
注意： **cutterman插件要求你的ps 必须是完整版**，不能是绿色版，所以大家需要从新安装完整版本。
查看 “窗口菜单”里面的“扩展功能”：
① 如果是扩展功能的是灰色的，表示就是绿色版的，需要重新安装PS
② 如果是扩展功能右侧是可以使用的，表示就是完整版的，可以安装cutterman插件快速切图
官网: http://www.cutterman.cn/zh/cutterman
当cutterman 安装完成后，重启PS，会发现扩展功能里面多了一个cutterman工具：
1.4.3 使用步骤
① 选择需要的图层
② 选择web端，点击web下面的下拉三角
③ 选择需要的图片格式
④ 设置好存储路径
⑤ 点击 “导出选中图层” 按钮
## 2. 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 …
**举例：**
```css
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}
```
## 3. 学成在线页面制作
### 3.1. 前期准备素材
- 学成在线PSD源文件
- 开发工具 = PS（切图） + sublime（代码） + chrome（测试）
### 3.2. 前期准备工作
先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。
1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
2. 用vscode打开study目录文件夹.
3. study 目录内新建 images 文件夹，用于保存图片。
4. 新建首页文件 index.html（以后我们的网站**首页**统一命名规定为 **index.html** )。
5. 新建 style.css 样式文件。我们本次采用外链样式表。
6. 将样式引入到我们的 HTML 页面文件中。
7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。
### 3.3. 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路，具体如下：
1.必须确定页面的**版心**（可视区），我们**测量**可得知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3.一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则
4.制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5.所以, 先理清楚**布局结构**,再写代码尤为重要. 这需要我们多写多积累.
### 3.4. 页面制作
**确定版心**：
这个页面的版心是 1200像素 ，每个版心都要水平居中对齐，所以，我们可以定义版心为公共类：
```css
.w {
width: 1200px;
margin: auto;
}
```
#### 3.4.1. header头部制作
- 1号是版心盒子 **header** 1200 * 42 的盒子水平居中对齐, 上下给一个margin值就好了。
- 版心盒子 里面包含 2号盒子 **logo** 图标
- 版心盒子 里面包含 3号盒子 **nav** 导航栏
- 版心盒子 里面包含 4号盒子 **search** 搜索框
- 版心盒子 里面包含 5号盒子 **user** 个人信息
- 注意，要求里面的 **4个子盒子 必须都浮动**
**导航栏注意点:**
实际开发中，**重要的导航栏**，我们不会直接用链接a ，而是**用 li 包含链接(li+a)的做法**
1.li+a 语义更清晰，一看这就是有条理的列表型内容。
2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
**注意:**
1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
**4号盒子search的细节：**
search 搜索框的意思: 一个 search 大盒子里面包含 2个 表单
技巧：input和button都，属于行内块元素，会有缝隙，使用浮动，可以去缝隙。
#### 3.4.2. banner制作
- 1号盒子是通栏的大盒子**banner**， 不给宽度，给高度，给一个蓝色背景。
- 2号盒子是版心 **w**， 要水平居中对齐。
- 3号盒子版心内，左对齐 **subnav** 侧导航栏。
- 4号盒子版心内，右对齐 **course** 课程。
##### 3.4.2.1 subnav 侧导航栏 (左侧的)
- subnav 盒子 背景色 黑色半透明
- 重要的导航栏，li 包 a ，行高45px
- a里面包含文字和span，span右浮动
- 当鼠标经过a ，a里面的内容（文字和span）变蓝色
##### 3.4.2.2 course课程表模块 (右侧的)
- 1号盒子 是 228 * 300 的盒子 右浮动 **注意 浮动的元素 不会有外边距塌陷的问题**
- 1号盒子内 分为 上下 两个 子盒子
- 2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)
- 3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)
#### 3.4.3. 精品推荐小模块
- **复习点：** 因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？？？ font- line- text- color
- 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
- 1号盒子是标题 H3 左侧浮动
- 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
- 3号盒子 右浮动 mod 修改
#### 3.4.4. 精品推荐大模块
- 1号盒子为最大的盒子 **box** 版心水平居中对齐
- 2号盒子为上面部分 **box-hd** -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
- 3号盒子为底下部分 **box-bd** --- 里面是无序列表 有 10个 小li 组成
- 小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
- 复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。
#### 3.4.5. 底部模块制作
- 1号盒子通栏大盒子 底部 **footer** 给高度 底色是白色
- 2号盒子版心水平居中
- 3号盒子版权 **copyright** 左对齐
- 4号盒子 链接组 **links** 右对齐
## 1. 定位(position) 介绍
### 1.1 为什么使用定位
> 我们先来看一个效果，同时思考一下**用标准流或浮动能否实现类似的效果**？
**场景1**： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.
**场景2**：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
> 结论**：要实现以上效果，**标准流 或 浮动都无法快速实现
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
### 1.2 定位组成
**定位**：将盒子**定**在某一个位置，所以**定位也是在摆放盒子， 按照定位的方式移动盒子**
定位也是用来布局的，它有两部分组成：
> **定位 = 定位模式 + 边偏移**
**定位模式** 用于指定一个元素在文档中的定位方式。**边偏移**则决定了该元素的最终位置
#### 1.2.1 边偏移（方位名词）
**边偏移** 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。
| 边偏移属性 | 示例 | 描述 |
| `top` | `top: 80px` | **顶端**偏移量，定义元素相对于其父元素**上边线的距离**。 |
| `bottom` | `bottom: 80px` | **底部**偏移量，定义元素相对于其父元素**下边线的距离**。 |
| `left` | `left: 80px` | **左侧**偏移量，定义元素相对于其父元素**左边线的距离**。 |
| `right` | `right: 80px` | **右侧**偏移量，定义元素相对于其父元素**右边线的距离** |
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。
#### 1.2.2 定位模式 (position)
在 CSS 中，通过 `position` 属性定义元素的**定位模式**，语法如下：
```css
选择器 {
position: 属性值;
}
```
定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。
定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：
| 值 | 语义 |
| `static` | **静态**定位 |
| `relative` | **相对**定位 |
| `absolute` | **绝对**定位 |
| `fixed` | **固定**定位 |
### 1.3 定位模式介绍
#### 1.3.1. 静态定位(static) - 了解
- **静态定位**是元素的**默认**定位方式，**无定位的意思**。它相当于 border 里面的none，静态定位static，不要定位的时候用。
- 语法：
```
选择器 {
position: static;
}
```
- 静态定位 按照标准流特性摆放位置，它没有边偏移。
- 静态定位在布局时我们几乎不用的
#### 1.3.2. 相对定位(relative) - 重要
- **相对定位**是元素在移动位置的时候，是相对于它自己**原来的位置**来说的（自恋型）。
- 语法：
```
选择器 {
position: relative;
}
```
- 相对定位的特点：（务必记住）
- 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 2.**原来**在标准流的**位置**继续占有，后面的盒子仍然以标准流的方式对待它。
因此，**相对定位并没有脱标**。它最典型的应用是给绝对定位当爹的。。。
#### 1.3.3. 绝对定位(absolute) - 重要
##### 1.3.3.1 绝对定位的介绍
- **绝对定位**是元素在移动位置的时候，是相对于它**祖先元素**来说的（拼爹型）。
- 语法：
```
选择器 {
position: absolute;
}
```
1. **完全脱标** —— 完全不占位置；
2. **父元素没有定位**，则以**浏览器**为准定位（Document 文档）。
3. **父元素要有定位**
* 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
- **绝对定位的特点总结**：（务必记住）
1.如果**没有祖先元素**或者**祖先元素没有定位**，则以浏览器为基准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位**不再占有原先的位置**。所以绝对定位是脱离标准流的。（脱标）
##### 1.3.3.2 定位口诀 —— 子绝父相
弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。
这个**“子绝父相”**太重要了，是我们学习定位的**口诀**，是定位中最常用的一种方式这句话的意思是：**子级是绝对定位的话，父级要用相对定位。*
因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
这就是子绝父相的由来，所以**相对定位经常用来作为绝对定位的父级**。
总结： **因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位**
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，**子绝父绝**也会遇到。
#### 1.3.4. 固定定位(fixed) - 重要
- **固定定位**是元素**固定于浏览器可视区的位置**。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
- 语法：
```
选择器 {
position: fixed;
}
```
- 固定定位的特点：（务必记住）：
1.以浏览器的可视窗口为参照点移动元素。
- 跟父元素没有任何关系
- 不随滚动条滚动。
2.固定定位**不在占有原先的位置**。
- - 固定定位也是**脱标**的，其实**固定定位也可以看做是一种特殊的绝对定位**。（认死理型）
- - **完全脱标**—— 完全不占位置；
- - 只认**浏览器的可视窗口** —— `浏览器可视窗口 + 边偏移属性` 来设置元素的位置；
- - 跟父元素没有任何关系；单独使用的
- - 不随滚动条滚动。
**提示**：IE 6 等低版本浏览器不支持固定定位。
#### 1.3.5 粘性定位(sticky) - 了解
- **粘性定位**可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
- 语法：
```
选择器 {
position: sticky;
top: 10px;
}
- 粘性定位的特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先的位置（相对定位特点）
3.必须添加 top 、left、right、bottom **其中一个**才有效
跟页面滚动搭配使用。 兼容性较差，IE 不支持。
#### 1.3.6 定位总结
| **定位模式** | **是否脱标** | **移动位置** | **是否常用** |
- | static 静态定位 | 否 | 不能使用边偏移 | 很少 |
- | **relative 相对定位** | **否 (占有位置)** | **相对于自身位置移动** | **基本单独使用** |
- | **absolute绝对定位** | **是（不占有位置）** | **带有定位的父级** | **要和定位父级元素搭配使用** |
- | **fixed 固定定位** | **是（不占有位置）** | **浏览器可视区** | **单独使用，不需要父级** |
- | sticky 粘性定位 | 否 (占有位置) | 浏览器可视区 | 当前阶段少 |
- 一定记住 相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。
- 学习定位重点学会子绝父相。
- 注意：
1. **边偏移**需要和**定位模式**联合使用，**单独使用无效**；
2. `top` 和 `bottom` 不要同时使用；
3. `left` 和 `right` 不要同时使用。
## 2. 综合案例：学成在线-hot 模块添加
### 2.2 案例分析
1. 一个大的 `li` 中包含 一个课程图片，课程介绍文字信息，还有hot的小图标；
2. hot图片**重叠**在课程图片上面—— 脱标，不占位置，需要使用**绝对定位**；
3. hot图片**重叠**在**li的右上方 —— 需要**使用边偏移确定准确位置。
### 2.3 案例小结
1. **子绝父相** —— **子元素**使用**绝对定位**，**父元素**使用**相对定位**；
2. **与浮动的对比**：
* **绝对定位**：脱标，**利用边偏移指定准确位置**；
* **浮动**：脱标，不能指定准确位置，**让多个块级元素在一行显示**。
结构修改：
```html
<!-- 修改.box-bd里面的li标签内容，添加一个hot图标 -->
<li>
<!-- 添加hot小图片 -->
<em>
<img src="images/hot.png" alt="">
</em>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • 1125人在学习
</div>
</li>
```
样式修改：
```css
.box-bd ul li {
/* 子绝父相 */
/* 父元素相对定位 */
position: relative;
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li > img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd ul li em {
/* 子元素绝对定位 */
position: absolute;
top: 4px;
right: -4px;
}
```
## 3. 定位(position)的应用
### 3.1. 固定定位小技巧： 固定在版心左侧位置。
小算法：
1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。
2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
就可以让固定定位的盒子**贴着版心右侧对齐**了。
```html
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
```
### 3.2. 堆叠顺序（z-index）
- 在使用**定位**布局时，可能会**出现盒子重叠的情况**。此时，可以使用 **z-index** 来控制盒子的前后次序 (z轴)
- 语法：
```
选择器 {
z-index: 1;
}
```
`z-index` 的特性如下：
1. **属性值**：**正整数**、**负整数**或 **0**，默认值是 0，数值越大，盒子越靠上；
2. 如果**属性值相同**，则按照书写顺序，**后来居上**；
3. 数字后面**不能加单位**。
**注意**：`z-index` 只能应用于**相对定位**、**绝对定位**和**固定定位**的元素，其他**标准流**、**浮动**和**静态定位**无效。
- 应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**。如下图所示：
## 4. 定位(position)的拓展
### 4.1 绝对定位的盒子居中
> **注意**：加了**绝对定位/固定定位的盒子**不能通过设置 `margin: auto` 设置**水平居中**。
> 但是可以通过以下计算方法实现水平和垂直居中，
1. `left: 50%;`：让**盒子的左侧**移动到**父级元素的水平中心位置**；
2. `margin-left: -100px;`：让盒子**向左**移动**自身宽度的一半**。
### 4.2 定位特殊特性
绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了**浮动**、**固定定位**和**绝对定位**，不用转换，就可以给这个盒子直接设置宽度和高度等。
### 4.3 脱标的盒子不会触发外边距塌陷
浮动元素、**绝对定位(固定定位）**元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直**外边距合并的问题**了。
### 4.4 绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位） 会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素
## 5. 综合案例 - 淘宝轮播图(重点)
### 步骤
1. 大盒子我们类名为： tb-promo 淘宝广告
2. 里面先放一张图片。
3. 左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next
左按钮样式（border-radius：左上，右上，右下，左下），
右按钮定位，提取左右按钮共同的样式代码（并集选择器）
4. 底侧小圆点ul 继续做。 类名为 promo-nav
中间长方形椭圆 ul的定位（水平居中，离底部15px）
长方形需要五个小圆点，ul无序列表，li浮动，椭圆中小圆点的样式
### 5.4 知识点：圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
```
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
```
* 如果4个角，数值相同
~~~css
border-radius: 15px;
~~~
* 里面数值不同，我们也可以按照简写的形式，具体格式如下:
~~~css
border-radius: 左上角 右上角 右下角 左下角;
~~
还是遵循的顺时针。
### 5.5 代码参考
```html
<!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>淘宝轮播图做法</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 520px;
height: 280px;
}
/* 并集选择器可以集体声明相同的样式 */
.prev,
.next {
position: absolute;
/* 绝对定位的盒子垂直居中 */
top: 50%;
margin-top: -15px;
/* 加了绝对定位的盒子可以直接设置高度和宽度 */
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.prev {
left: 0;
/* border-radius: 15px; */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
/* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理 top bottom 会执行 top */
right: 0;
/* border-radius: 15px; */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
/* background-color: pink; */
background: rgba(255,255,255, .3);
border-radius: 7px;
}
.promo-nav li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
/* 不要忘记选择器权重的问题 */
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="images/tb.jpg" alt="">
<!-- 左侧按钮箭头 -->
<a href="#" class="prev"> < </a>
<!-- 右侧按钮箭头 -->
<a href="#" class="next"> > </a>
<!-- 小圆点 -->
<ul class="promo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
```
## 6. 网页布局总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位 可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
### 6.1. 标准流
可以让盒子上下排列或者左右排列，**垂直的块级盒子显示就用标准流布局**。
### 6.2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，**多个块级盒子水平显示就用浮动布局**
### 6.3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。**如果元素自由在某个盒子内移动就用定位布局。**
## 7. 元素的显示与隐藏
- 目的（本质）
让一个元素在页面中消失或者显示出来
- 场景
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！
### 7.1. display 显示（重点）
- display 设置或检索对象是否及如何显示。
```
display: none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思。
```
- 特点： display 隐藏元素后，**不再占**有原来的位置。
- 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：
> 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
### 7.2. visibility 可见性 （了解）
- visibility 属性用于指定一个元素应可见还是隐藏。
```
visibility：visible ; 元素可视
visibility：hidden; 元素隐藏
```
- 特点：**visibility 隐藏元素后，继续占有原来的位置**。（停职留薪）
- 如果隐藏元素想要原来位置， 就用 visibility：hidden
- 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）
### 7.3. overflow 溢出（重点）
- overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
| 属性值 | 描述 |
| **visible** | 不剪切内容也不添加滚动条 |
| **hidden** | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| **scroll** | 不管超出内容否，总是显示滚动条 |
| **auto** | 超出自动显示滚动条，不超出不显示滚动条 |
- 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
- 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。
- 实际开发场景：
1. 清除浮动
2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。
### 7.4. 显示与隐藏总结
| 属性 | 区别 | 用途 |
| **display 显示 （重点）** | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| **visibility 可见性 （了解）** | 隐藏对象，保留位置 | 使用较少 |
| **overflow 溢出（重点）** | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
## 8 综合案例：土豆网鼠标经过显示遮罩
### 案例目标
1.练习元素的显示与隐藏
2.练习元素的定位
### 核心原理
原先半透明的黑色遮罩看不见， 鼠标经过 大盒子，就显示出来。
遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。
### 代码参考
```html
<!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>仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */
.tudou:hover .mask {
/* 而是显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
```
## 1. 精灵图（重点）
### 1.1 为什么需要精灵图
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
**为什么使用精灵图（目的）：**
**为了有效地减少服务器接收和发送请求的次数**，**提高**页面的**加载速度**，出现了 **CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）。
**核心原理**：
将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
### 1.2 精灵图（sprites）的使用
使用精灵图核心：
1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
使用精灵图核心总结：
1. 精灵图主要**针对于小的背景图片**使用。
2. 主要借助于背景位置来实现---**background-position** 。
3. 一般情况下精灵图都是**负值**。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
### 1.3 案例：拼出自己名字
#### 代码参考
结构
```html
<span class="p">p</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="k">k</span>
```
样式
```css
span {
display: inline-block;
background: url(images/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** 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。
## 3. CSS 三角
### 3.1 介绍
网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。
一张图， 你就知道 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.2 代码参考
```html
<!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
```css
li {
cursor: pointer;
}
```
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
### 4.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
```css
input {
outline: none;
}
```
### 4.3 防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
```css
textarea{
resize: none;
}
vertical-align 属性应用
## 5. vertical-align 属性应用
CSS 的 **vertical-align** 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的**垂直对齐方式**，但是它只针对于行内元素或者行内块元素有效。
语法：
```css
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 单行文本溢出显示省略
单行文本溢出显示省略号--必须满足三个条件：
```css
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
```
### 6.2 多行文本溢出显示省略号（了解）
多行文本溢出显示省略号，**有较大兼容性问题**，适合于webKit浏览器或移动端（移动端大部分是webkit内核）
```css
/*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）
### 7.2 文字围绕浮动元素
**巧妙运用浮动元素不会压住文字的特性**
### 7.3 行内块巧妙运用
页码在页面中间显示:
1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
### 7.4. CSS 三角强化 案例
```html
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* 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>
</head>
<body>
<div class="box1"></div>
</body>
```
#### **7.4.3 代码参考**
```html
<!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
这周的分享到这里就结束啦！大家记得勤加练习哦！我们下周同一时间同一地点不见不散！！！