为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • nth-child(n)选择器用来定位某个父元素的一个或者多个子元素。 n为参数,可以是整数,也可是是表达式和关键式 1:第1个 2n:2的倍数(2,4,6) 2n-1:2的倍数-1(1,3,5) even,odd:偶数奇数 当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。
    查看全部
  • :target 就是定义对锚记伪类模拟了一个点击事件。通过target来选取到你想要改变的地方 #demo:target{ color:red; } 这段就是对锚记名为demo的元素里面的字体给设置了一个红色的颜色。
    查看全部
  • :empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
    查看全部
  • :not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。 div中选择除了footer之外的元素:div:not([id="footer"])
    查看全部
  • css属性选择权 E[alt^=val] 选择匹配元素E,并且E元素定义了属性alt,其属性数值与val相关 ^为val开头 $为val结束 *为包含val
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto <长度值> <百分比> cover contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • background-clip : border-box padding-box content-box no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
  • background-origin : border-box padding-box content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 ps:如果背景不是no-repeat,这个属性无效,他会从边框开始显示
    查看全部
  • border-image:url(图片路径) 边框宽高 显示方式;round(平铺)repeat(重复)stretch(拉伸)
    查看全部
  • box-shadow是向盒子添加阴影。支持添加一个或多个,多个用逗号隔开 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; inset写在参数的第一位或者最后一位,其他位置是无效的代表内阴影
    查看全部
  • border-radius是向元素添加圆角边距 以px为单位 实心圆:border-radius:50px; border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
    查看全部
  • xcxcx
    查看全部
  • box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
    查看全部
  • background-size: auto <长度值> <百分比> cover contain
    查看全部
  • 如果有 size 值,需要紧跟 position 并且用 "/" 隔开;
    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!