05-显示模式
显示模式：标签（元素）的显示方式。
作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。
块级元素
特点：
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
行内元素
特点：
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
行内块元素
特点：
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
转换显示模式
属性：display
06-综合案例一-热词
HTML标签
<a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a> <a href="#">Vue</a> <a href="#">React</a>
CSS样式
<style> /* 默认效果 */ a { display: block; width: 200px; height: 80px; background-color: #3064bb; color: #fff; text-decoration: none; text-align: center; line-height: 80px; font-size: 18px; } /* 鼠标悬停的效果 */ a:hover { background-color: #608dd9; } </style>
07-综合案例二 – banner 效果
HTML标签
<div class="banner"> <h2>让创造产生价值</h2> <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p> <a href="#">我要报名</a> </div>
CSS样式
<style> .banner { height: 500px; background-color: #f3f3f4; background-image: url(./images/bk.png); background-repeat: no-repeat; background-position: left bottom; /* 文字控制属性，继承给子级 */ text-align: right; color: #333; } .banner h2 { font-size: 36px; font-weight: 400; line-height: 100px; } .banner p { font-size: 20px; } .banner a { width: 125px; height: 40px; background-color: #f06b1f; display: inline-block; /* 转块级无法右对齐，因为块元素独占一行 */ /* display: block; */ text-align: center; line-height: 40px; color: #fff; text-decoration: none; font-size: 20px; } </style>
01-选择器
结构伪类选择器
基本使用
作用：根据元素的结构关系查找元素。
li:first-child { background-color: green; }
:nth-child(公式)
提示：公式中的n取值从 0 开始。
伪元素选择器
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。
div::before { content: "before 伪元素"; } div::after { content: "after 伪元素"; }
注意点：
- 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
02-PxCook
PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）
使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿
