慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

aashine

first-of-type：用来定位一个父元素下的某个类型的第一个子元素例： .wrapper > p:first-of-type { //wrapper类下的第一个p类型元素 background: orange; }

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22
aashine

nth-last-child(n),从某父元素的最后一个子元素开始计算，来选择特定的元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-last-child(n)
2015-05-14
aashine

nth-child(n)：用来定位某个父元素的一个或多个特定的子元素参数： “n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。注意：当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如：http://img1.sycdn.imooc.com//531eba56000138aa05870197.jpg 例:

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2015-05-14
aashine

last-child，选取的是元素的最后一个子元素例：ul>li:last-child{background:blue;}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2018-03-22
aashine

first-child，选择元素中的第一个子元素，记住是子元素，而不是后代元素。例：

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2015-05-14
aashine

:target目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素例： HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> CSS代码： .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; } 当有多个url处理时，在“:target"前指明对应的id即可。例： html代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div> css代码： #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
aashine

:empty，用来选择没有任何内容的元素（哪怕是一个空格也不行）例： p:empty { display: none; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2015-05-14
aashine

:not否定选择器，可以选择除某个元素之外的所有元素例： input:not([type="submit"]){ border:1px solid red; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22
aashine

:root根选择器，就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html> 简单说：“:root”选择器等同于<html>元素 :root{background:orange} 等价与 html {background:orange;}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2018-03-22
aashine

CSS3新增筛选元素属性：http://img1.sycdn.imooc.com//5438cff800012a4d09080383.jpg 例：

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-05-15
aashine

案例(导航栏)

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2015-05-13
aashine

multiple backgrounds：多重背景详见教程

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2015-05-13
aashine

background-size：设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩语法:background-size: auto | <长度值> | <百分比> | cover | contain 参数： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
aashine

background-clip：用来将背景图片做适当的裁剪语法：background-clip ： border-box | padding-box | content-box | no-clip 参数：参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。效果：http://img1.sycdn.imooc.com//5310065d0001c95103660166.jpg 例：

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-05-13
aashine

background-origin：设置元素背景图片的原始起始位置语法：background-origin ： border-box | padding-box | content-box; 参数：参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示效果：http://img1.sycdn.imooc.com//531003de0001166903660166.jpg 注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。例：

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-05-13

首页上一页 952 953 954 955 956 957 958 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果