网页编程day-40：CSS3新增选择器和属性

一、新增选择器

1.CSS3新增选择器：

1）.divl>p:first-child:获得class名称是div1下面的第一个元素；

2）.divl>p:last-child:获得class名称是divl下面的最后一个元素；

3）.div1>p:nth-child(数字)：获取具体的某一个子元素；

4）.divl>p:empty：获取空的元素对象；

5）.div1:before/after:伪对象之前（或者之后）插入内容；

2.选择器分类：

（1）基础选择器：

（2）关系选择器：

（3）伪类选择器：

（4）伪对象选择器：

二、新增属性

1）倒圆角指令设置所有四个 border-*-radius 属性。：border-radius像素；

2）旋转角度：transform：rotate（度数deg）；

4）放大倍数：transform：scale（倍数）；

5）水平位移和垂直位移（X/Y）：transform：translate（像素，像素）；

6）2D角度旋转X/Y：transform：skew（deg，deg）；

7）可伸缩框属性（阴影水平偏移 垂直偏移 模糊度 阴影的颜色）：Box-shadow：像素 像素 像素 颜色；

8）动画标签（0-100%）：目前浏览器都不支持 @keyframes 规则。

Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

@keyframes

name｛

From｛｝

To｛｝

三、京东购物车网页搭建

1.效果图：

2.实现步骤：

（1）封装的属性布局：

CSS

（2）导航栏

HTML CSS

（3）搜索框：

HTML CSS

（4）标题栏：

HTML CSS

（5）显示菜单：

（6）商品展示菜单：

复制两个HTML改变内容即可；

HTML CSS

（7）结算栏：

HTML CSS