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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • indd
    translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 那么对于其他元素呢？？？？？？？？？？？？？是不是也可以实现你想要的移动而不改变其他元素的位置呢
    查看全部
    0 采集 收起 来源：CSS3中的变形--位移 translate()

    2015-09-16

  • indd
    缩放 scale()函数 让元素根据中心原点对对象进行缩放。
    查看全部
    0 采集 收起 来源：CSS3中的变形--缩放 scale()

    2015-09-16

  • indd
    -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg);
    查看全部
    0 采集 收起 来源：CSS3变形--旋转 rotate()

    2015-09-16

  • indd
    “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
    查看全部
    0 采集 收起 来源：CSS3 first-of-type选择器

    2015-09-16

  • indd
    “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—nth-child(n)

    2015-09-16

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

    2015-09-16

  • indd
    额，对a标签就没用了 “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—first-child

    2015-09-16

  • 527925921
    圆角效果： 在class中加入border-radius：10px;所有圆角都使用半径为10px的圆角 border-radius：5px 4px 3px 2px；左上角、右上角、右下角、左下角圆角半径（顺时针顺序） ps：border-radius的值还可以用百分比或em，但兼容性不好 实心上半圆：在class中设置高度为宽度一半，并且只设置左上角与右上角的半径与元素高度一致（大于也可） height：50px； width：100px； border-radius：50px 50px 0 0； 实心圆：高度宽度设置一致，四个圆角值为其一半
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-09-16

  • ZymoWalker
    综合而言，Flexbox布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-09-16

  • 527925921
    现在大多数的浏览器已经可以兼容CSS3了，所以，对于兼容前缀我们应该熟知： -webkit- chrome、safari -moz- firefox -ms- IE -o- opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2015-09-16

  • ZymoWalker
    在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit 取值说明 属性值 属性值说明 content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 inherit 使元素继承父元素的盒模型模式
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-09-16

  • ZymoWalker
    box-sizing： 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示： W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-09-16

  • ZymoWalker
    跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列不管里面元素如何排放顺序他们都是从左向右的放置内容但有时我们需要基中一段内容或一个标题不进行分列也就是横跨所有列此时column-span就可以轻松实现此属性的语法如下。 column-span: none | all 取值说明 属性值 属性值说明 none 此值为column-span的默认值表示不跨越任何列。 all 这个值跟none值刚好相反表示的是元素跨越所有列并定位在列的轴之上
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-09-16

  • ZymoWalker
    列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明： 属性值----------------------------------------------属性值说明 column-rule-width-----------------------------类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style-------------------------类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color-----------------------------类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-03-22

  • ZymoWalker
    列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明 属性值----------------------属性值说明 normal----------默认值，默值为1em（如果你的字号是px， ----------------其默认值为你的font-size值）。 <length>--------此值用来设置列与列之间的距离，其可以 ----------------使用px,em单位的任何整数-----值，但不能是负值。
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

首页上一页773774775776777778779下一页尾页

举报

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

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

查看已购买的课程