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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
    查看全部
  • 1. top:50%,left:50%,是将色块的左上角定位在了屏幕的中央,但是,整体并不在中央; 2. translate的百分比是根据自身的宽度和高度来定的,translate(-50%,-50%) 配合 top:50%,left:50% 实现了居中
    查看全部
  • 第一, 尽量少用无关紧要的div; 第二,不要使用内联元素(inline); 第三,尽量少用JS或flash; 第四,丢弃没用的绝对定位和浮动样式; 第五,摒弃任何冗余结构和不使用100%设置。 有舍才有得,丢弃了一些对Responsive有影响的东东,那么有哪些东东能帮助Responsive确定更好的布局呢? 第一,使用HTML5 Doctype和相关指南; 第二,重置好你的样式(reset.css); 第三,一个简单的有语义的核心布局; 第四,给重要的网页元素使用简单的技巧,比如导航菜单之类元素。 使用这些技巧,无非是为了保持你的HTML简单干净,而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现,比如说CSS3特效或者JS脚本。 说了这么多,怎么样的布局或者说HTML结构才是简单干净的呢?这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式(以及与样式相关的信息),在浏览器中打开,如果你的内容排列有序,方便阅读,那么你的这个结构不会差到哪里去。
    查看全部
  • 外阴影:X 左负右正 Y 上负下正 内阴影:X 左正右负 Y 上正下负 刚好相反
    查看全部
  • 变形--旋转 rotate()<br> <br> 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。 .wrapper div:hover{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform:rotate(-90deg); } div{ transition: all 0.5s; }
    查看全部
  • ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
    查看全部
  • :read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。
    查看全部
  • :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’” ":read-only"选择器用来指定处于只读状态元素的样式,火狐下要添加-moz前缀
    查看全部
  • ::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的,
    查看全部
  • CSS3的过度transition属性是一个复合属性,主要包括以下几个子属性。 transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数的缓冲效果 ease-in 加速,ease-out 减速,linear匀速,还可以ease-in-out先加速再减速 transition-delay:指定开始出现的延迟时间 transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果, a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}多个过渡属性用“,”隔开
    查看全部
  • transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。
    查看全部
  • 在CSS3中的变形,如rotate(),skew(),scale(),translate(),都可以使用矩阵matrix()函数来代替。 matrix(长度缩放,y轴扭曲,x轴扭曲,宽度缩放,x位移,y位移) Matrix()与translate()关系:translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系:scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系:rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系:skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)
    查看全部
  • translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。 1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动) 2、translateX(x)仅水平方向移动(X轴移动) 3、translateY(Y)仅垂直方向移动(Y轴移动) css3中不定宽\不定高元素的水平\垂直居中方法
    查看全部
  • 缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况: 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放) 注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放(X轴缩放) 3、scaleY(y)元素仅垂直方向缩放(Y轴缩放)
    查看全部
  • 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。 Skew()具有三种情况: 1、skew(x,y)第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。 2、skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形); 3、skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
    查看全部

举报

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

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