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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • UFO2015
    结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; } 相关HTML代码： <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <label for="name">Password Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> ​ 演示结果：
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2018-03-22

  • UFO2015
    结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 示例演示： 通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; } 演示结果： “:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE９以下还可以借助“:root”实现hack功能。
    查看全部
    2 采集 收起 来源：CSS3 结构性伪类选择器—root

    2018-03-22

  • UFO2015
    属性选择器 在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2018-03-22

  • UFO2015
    http://www.runoob.com/css3/css3-gradients.html<br> CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。<br> <br> 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。<br> <br> CSS3 定义了两种类型的渐变（gradients）：<br> <br> 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向<br> 径向渐变（Radial Gradients）- 由它们的中心定义<br> <br> http://www.w3.org/TR/css3-images/#repeating-gradients<br> CSS Image Values and Replaced Content Module Level 3<br> W3C Candidate Recommendation 17 April 2012
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2018-03-22

  • 慕尼黑2897118
    上一条笔记错误，border-radius：50px.格式如上，接的是像素，不是百分比，（接百分比的是哪个属性？）
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2016-05-07

  • 慕尼黑2897118
    border-radius:50%; 这里的百分值是指的圆角对应的半径占占高度或者宽度的百分比，eg：500%，指的是宽度的5倍，10%指的是宽度的十分之一。
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2016-05-07

  • UFO2015
    渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。 这一小节我们来说一下线性渐变： 参数： 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示： （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2016-05-07

  • q三天打鱼两天晒网
    关于鼠标放上去的变色
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2016-05-07

  • qq_以后得曾经_0
    结构性伪类选择器 ：not
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2016-05-07

  • qq_以后得曾经_0
    :root 根选择器
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2016-05-07

  • weibo_心所遇_0
    ol > li{list-style:none;text-align:center;line-height:32px;} ol > li:first-child{ background: green;color:#fff; } ol > li:nth-child(4n){ background: blue;color:#fff; } ol > li:last-child{ background: orange;color:#fff; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2018-03-22

  • weibo_心所遇_0
    ol > li:nth-child(4n+1){} n=0
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2018-03-22

  • weibo_心所遇_0
    a[class^=**]{} a[href$=扩展名]{} a[title*=包含字符]{} :root{} div:not[(id=**)]{} inout:not[(type=submit)]{} div:empty{} #div:target{}
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—target

    2016-05-07

  • serena_mc
    “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
    查看全部
    0 采集 收起 来源：CSS3 last-of-type选择器

    2016-05-07

  • serena_mc
    “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
    查看全部
    0 采集 收起 来源：CSS3 nth-of-type(n)选择器

    2016-05-07

首页上一页538539540541542543544下一页尾页

举报

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

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

查看已购买的课程