HTML+CSS基础教程：选择器、伪元素与盒子模型.pptx

CSS第三天选择器、PxCook软件、盒子模型

选择器1

结构伪类选择器作用：根据元素的结构关系查找元素。li:first-child{?background-color:green;}

:nth-child(公式)作用：根据元素的结构关系查找多个元素。提示：公式中的n取值从0开始。

伪元素选择器作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。注意点：必须设置content:””属性，用来设置伪元素的内容，如果没有内容，则引号留空即可伪元素默认是行内显示模式权重和标签选择器相同div::before{?content:before伪元素;}

div::after{?content:after伪元素;}

PxCook2

PxCookPxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。开发面板（自动智能识别）设计面板（手动测量尺寸和颜色）

PxCook创建项目→输入项目名称、项目类型Web→单击按钮【创建项目】→单击按钮【添加】，导入设计稿

盒子模型3

盒子模型–组成作用：布局网页，摆放盒子和内容。

盒子模型–组成盒子模型重要组成部分：内容区域–widthheight内边距–padding（出现在内容与盒子边缘之间）边框线–border外边距–margin（出