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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • yunyun_0124
    “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—last-child

    2015-03-26

  • yunyun_0124
    :first-child”选择器定位列表中的第一个列表项
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2015-03-26

  • yunyun_0124
    结构性伪类选择器—target :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;} 分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。 多个url（多个target）处理： 就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与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; } 上面的代码可以对不同的target对象分别设置不的样式
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—target

    2018-03-22

  • 虹之翼
    多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。 语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意： 1.用逗号隔开每组 background 的缩写值； 2.如果有 size 值，需要紧跟 position 并且用 "/" 隔开； 3.如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 4.background-color 只能设置一个。
    查看全部
    0 采集 收起 来源：CSS3背景 multiple backgrounds

    2018-03-22

  • yunyun_0124
    结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示：
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2015-03-26

  • yunyun_0124
    input:not([type="submit"]){ border:1px solid red; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2018-03-22

  • balance_gem
    首先#id是用于定位页面内的标签，通过#id:target定义有id属性的对象，当触发定位操作时（点击），就触发定义target目标样式
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—target

    2015-03-26

  • yunyun_0124
    “:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2018-03-22

  • balance_gem
    div:not([ id $= ge ]){ border:1px solid red;}
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2015-03-26

  • yunyun_0124
    CSS3相对于CSS2新增的3个属性选择器： 1、E[att^="val"] 属性值以 val 开头的 2、E[att$="val"] 属性值以 val 结尾的 3、E[att*="val"] 属性值包含 val 的
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2018-03-22

  • yunyun_0124
    /*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; position:absolute;right:0px;top:15px; height:20px;width:1px; background:linear-gradient(to bottom,red,gray,red); } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child:after{width:0px;height:0px;}
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • yunyun_0124
    /*使用背景图制作导航列表项分割线*/ .nav li{ background: no-repeat left / 1px 15px linear-gradient(to top,rgba(255,255,255,0),rgba(0,0,0,1),rgba(255,255,255,0)); }
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-03-26

  • yunyun_0124
    background-size: auto | <长度值> | <百分比> | cover | contain 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
    0 采集 收起 来源：CSS3背景 background-size

    2018-03-22

  • yunyun_0124
    background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2015-03-26

  • yunyun_0124
    background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-03-26

首页上一页1026102710281029103010311032下一页尾页

举报

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

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

查看已购买的课程