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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 变形--原点 transform-origin 对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置. 默认情况之下,其中心点是居于元素X轴和Y轴的50%处
    查看全部
  • (a b c d e f) e,f为水平和垂直位置 a,d为缩放 b,c为旋转和拉伸 镜像效果公式为 matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0) a = (1-k*k)/(k*k+1); b = 2k/(k*k+1); c = 2k/(k*k+1); d = (k*k-1)/(k*k+1);
    查看全部
  • 变形--矩阵 matrix(a b c d e f)
    查看全部
  • only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解,换一种说法。“:only-of-type”是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 示例演示 通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。 HTML代码: <div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div> CSS代码: .wrapper > div:only-of-type { background: orange; }
    查看全部
  • only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。 示例演示 通过“:only-child”选择器,来控制仅有一个子元素的背景样式,为了更好的理解,我们这个示例通过对比的方式来向大家演示。 HTML代码: <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码: .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }
    查看全部
  • nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。 示例演示 通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。 HTML代码: <div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p> </div> CSS代码: .wrapper > p:nth-last-of-type(3){ background: orange; }
    查看全部
  • last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素。 示例演示 通过“:last-of-type”选择器,将容器“div.wrapper”中最后一个段落元素背景设置为橙色 (提示:这个段落不是“div.wrapper”容器的最后一个子元素)。 HTML代码: <div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <div>我是第一个Div元素</div> <div>我是第二个Div元素</div> <div>我是第三个Div元素</div> </div> CSS代码: .wrapper > p:last-of-type{ background: orange; }
    查看全部
  • 输入框
    查看全部
  • 变形--位移 translate() 1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) 2、translateX(x)仅水平方向移动(X轴移动) 3、translateY(Y)仅垂直方向移动(Y轴移动)
    查看全部
  • perspective设置元素被查看位置的视图
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2015-03-24

  • 还好吧~嘿嘿
    查看全部
  • 必须滴 按钮风格
    查看全部
  • 变形--缩放 scale() 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放) 2、scaleX(x)元素仅水平方向缩放(X轴缩放) 3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
    查看全部
  • 多列布局columns属性参数主要就两个属性参数:列宽和列数。 参数 参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 举例:要显示2栏显示,每栏宽度为200px,
    查看全部
  • 变形--扭曲 skew() 它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。skew()函数不会旋转,而只会改变元素的形状。
    查看全部

举报

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

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