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 → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿