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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • yangyuan
    :nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。<br> <br> 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。<br> ol > li:nth-child(2n){<br> background: green;<br> }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2018-03-22

  • yangyuan
    “:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器， ul>li:last-child{background:blue;}
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—last-child

    2018-03-22

  • yangyuan
    “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。 例如： ul > li:first-child { color: red; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2018-03-22

  • yangyuan
    分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。 target属性是跳转到某个标签的内容中，可以对不同的target对象分别设置不的样式。 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

  • yangyuan
    :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 示例显示： 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p>​ CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }​
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—empty

    2018-03-22

  • yangyuan
    :not选择器称为否定选择器，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： input:not([type="submit"]){ border:1px solid red; } 例如除页脚”div#footer”之外的所有div设置橙色背景色，写法： iv:not([id="footer"]){ background: orange; }
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—not

    2018-03-22

  • 盹猪
    /*使用伪元素制作导航列表项分隔线*/ .nav li:before{ background:#666666; position:absolute; top:15px; left:0px; width:1px; height:15px; content:""; } /*删除第一项和最后一项导航分隔线*/ .nav li:first-child::before{ width:0px; height:0px; }
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • 上坡路
    单选框的灵活应用
    查看全部
    0 采集 收起 来源：CSS3选择器 :checked选择器

    2016-03-14

  • 夏末啦
    box-shadow
    查看全部
    0 采集 收起 来源：CSS3选择器 :enabled选择器

    2016-03-14

  • Leadn
    box-shadow: X轴偏移量 Y轴偏移量 【阴影模糊半径】【阴影拓展半径】【阴影颜色】【投影方式】； 设置insert时为内部阴影方式，如果省略为外阴影方式
    查看全部
    0 采集 收起 来源：CSS3边框 阴影 box-shadow（一）

    2016-03-14

  • Leadn
    border-radius:左上角 右上角 右下角 左下角 实心圆，半实心圆的实现
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2016-03-14

  • 夏末啦
    ^开头，$结尾，*包含
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2016-03-14

  • 夏末啦
    [盒子阴影] box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]（设置inset为内阴影，默认为外阴影）; [圆角效果] border-radius:左上角 右上角 右下角 左下角; [文本溢出] text-overflow:[溢出表现方式]（clip剪切，ellipsis省略标记）;（当使用ellipsis时，需要配合white-space设置文本在几行内显示以及overflow:hidden设置溢出内容隐藏） [文本阴影] text-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影颜色]； [嵌入字体] @font-face{font-family:自定义名字;src:url("文字路径");[其他普通字体样式];} [边框图片] border-image:url(图片路径) 切割图片的宽度 [图片延伸方式]（round平铺，repeat重复，stretch拉伸）; [背景图片原始起始位置] background-origin:[从盒子哪个位置开始显示]（border-box从边框开始显示， padding-box从内边距开始显示，content-box从真正区域内容开始显示）;（只有背景图片no-repeat此属性才有效） [剪裁背景图] background-clip:[剪裁哪里的背景]（border-box和不剪裁的no-clip效果一样，padding-box剪裁边框里的图片，content-box剪裁边框和内边剧里的图片）; [图片大小] background-size:图片大小（px、百分比或contain等比缩放至刚好填满容器、contain等比缩放至刚好贴紧某一条边）; [多重背景] background-image:url("图片1地址"),url("图片2地址"),...,url("图片n地址"); [透明颜色] Rgba(r,g,b,透明度[用0~1和中间的小数或百分比表示]) [渐变] 渐变类型（linear线性渐变，radial径向渐变）-gradient(角度[数字deg或方向英文],[起始颜色],[中间颜色]（可省略）,[结束颜色])
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • Leadn
    -webkit chrome 和 safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2016-03-14

  • 夏末啦
    border-image:url(border.png/*图片路径*/) 70 70 70 70/*切割图片的宽度，单位为像素，单省略px也可以使用百分比，遵循顺时针的规律来分别设置，也可以简写为70*/ repeat/*图片延伸方式 三个可选参数为别为：round(平铺) repeat(重复) stretch(拉伸)*/
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2016-03-14

首页上一页602603604605606607608下一页尾页

举报

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

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

查看已购买的课程