前端开发培训技术分享 CSS3新增选择器(上).doc

前端开发培训技术分享 CSS3新增选择器(上).doc

ID:62161808

大小:569.00 KB

页数:18页

时间:2021-04-19

前端开发培训技术分享 CSS3新增选择器(上).doc_第1页
前端开发培训技术分享 CSS3新增选择器(上).doc_第2页
前端开发培训技术分享 CSS3新增选择器(上).doc_第3页
前端开发培训技术分享 CSS3新增选择器(上).doc_第4页
前端开发培训技术分享 CSS3新增选择器(上).doc_第5页
资源描述:

《前端开发培训技术分享 CSS3新增选择器(上).doc》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、优选前端开发培训技术分享CSS3新增选择器(上)我们大家是不是对网页有了初步的了解了,我们CSS3还提供一新的选择器,为我们在写页面时提供了更方便的服务。我们一起来看一下吧!一、CSS3新增选择器1.伪对象选择器::before、:after或::before、::afterCSS3新增选择器选择器描述:before设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,并且必须定义content属性。:after设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一

2、起使用,并且必须定义content属性。备注CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。即E:before可转化为E::before伪对象选择器应用(:before和:after的使用几乎是一样)1)插入内容2)制定个别元素不进行插入3)插入图像文件使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

<

4、h2>使用选择器插入内容

使用选择器插入内容

案例一代码:显示效果18/18优选案例二代码:插入图片文件

插入图片文件

插入图片文件插入图片文件插入图片文件插入图片文件插入图片文件

插入图片文件

显示效果:18/18优选案例三:万能清除浮动的方法大家都知道我们在讲浮动的

6、时候,使用浮动会产生副作用:导致父元素的高度塌陷,后面的元素占了浮动元素的空间。代码:.box{width:800px;background:red;18/18优选margin:0auto;}.box1{width:300px;height:200px;background:yellow;/*float:left;*/}.box2{width:40

7、0px;height:200px;background:pink;/*float:right;*/}.box3{width:800px;height:200px;background:green;margin:0auto;}left

right
box3
显示效果:18/

8、18优选代码:.box{width:800px;background:red;margin:0auto;}.box1{width:300px;height:200px;18/18优选background:y

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。