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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • cloumns 分栏 [param] 分栏的宽度 (我觉得这个没什么用,我要分6栏还是照样6栏了,一栏也没有150,前提是分栏的综合小于父容器总和) [param] 分栏数
    查看全部
  • 第六节 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素【子元素,而不是后代元素】。 ol li:first-child{ color: red; }
    查看全部
  • 第七节 结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。
    查看全部
  • 第五节 结构性伪类选择器—target :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子,然后再做分析。 1. 单个url(单个target)处理: <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; } 1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand 2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。 2. 多个url(多个target)处理: 当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。 <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> #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }
    查看全部
  • 右下角向左上角的线性渐变背景background-image:linear-gradient(to top left,red,orange,yellow,green,blue,indigo,violet);
    查看全部
  • 颜色之RGBA
    查看全部
  • :empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
    查看全部
  • 为边框应用图片 border-image
    查看全部
  • mark
    查看全部
  • 第三节 结构性伪类选择器—not :not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成: input:not([type="submit"]){ border:1px solid red; }
    查看全部
  • 第一节 属性选择器 E[attr]:只有属性名,但没有确定任何属性值; E[attr="value"]:指定属性名,并指定了该属性的属性值; E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“~”不能不写; E[attr^="value"]:指定属性名,有属性值,以value开头的; E[attr$="value"]:指定属性名,有属性值,以value结束的; E[attr*="value"]:指定属性名,有属性值,包含了value; E[attr|="value"]:指定属性名,属性值,以value或者“value-”开头的值
    查看全部
  • 第二节 结构性伪类选择器—root :root选择器,是匹配元素所在文档的根元素。在HTML文档中,根元素始终是<html>,也就是:root选择器等同于<html>元素,建议使用:root方法。另外在IE9以下还可以借助“:root”实现hack功能。 <div>:root选择器的演示</div> :root { background:orange; }
    查看全部
  • 阴影 box-shadow(二) 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小; 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数: .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666;
    查看全部
  • box-shadow(
    查看全部
  • http://www.imooc.com/code/1883
    查看全部

举报

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

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