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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果
    查看全部
  • 伪类和伪元素的区别是什么? 伪类用于向某些选择器添加特殊的效果,伪元素用于将特殊的效果添加到某些选择器。 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。
    查看全部
    0 采集 收起 来源:CSS生成内容

    2016-09-06

  • 任何元素的根元素都是html,所以该属性并不常用
    查看全部
  • 在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div; 第二,不要使用内联元素(inline); 第三,尽量少用JS或flash; 第四,丢弃没用的绝对定位和浮动样式; 第五,摒弃任何冗余结构和不使用100%设置。 有舍才有得,丢弃了一些对Responsive有影响的东东,那么有哪些东东能帮助Responsive确定更好的布局呢? 第一,使用HTML5 Doctype和相关指南; 第二,重置好你的样式(reset.css); 第三,一个简单的有语义的核心布局; 第四,给重要的网页元素使用简单的技巧,比如导航菜单之类元素。 使用这些技巧,无非是为了保持你的HTML简单干净,而且在你的页面布局中的关键部分(元素)不要过分的依赖现代技巧来实现,比如说CSS3特效或者JS脚本。 说了这么多,怎么样的布局或者说HTML结构才是简单干净的呢?这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式(以及与样式相关的信息),在浏览器中打开,如果你的内容排列有序,方便阅读,那么你的这个结构不会差到哪里去。
    查看全部
  • visibility 属性规定元素是否可见。
    查看全部
  • CSS中的content 属性是插入生成的内容,它一般与伪元素:before和:after配合使用。 content:"." 就表示在需要的地方插入"." 要注意一点就是:如果已经规定 !DOCTYPE,那么 ie8 及更高版本才支持 content 属性。
    查看全部
  • 当你定义的CSS中有position属性值为absolute、relative或fixed, 用z-index此取值方可生效。 此属性参数值越大,则被层叠在最上面。 参数值可以用数字或百分比。
    查看全部
  • background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 background-size: auto | <长度值> | <百分比> | cover | contain 取值说明: 1、auto:默认值,不改变背景图片的原始高度和宽度; 2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器; 5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
  • 用来将背景图片做适当的裁剪以适应实际需要。 语法: background-clip : border-box padding-box content-box no-clip 参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。 backgroud-clip默认值为border-box。
    查看全部
  • background-origin 设置元素背景图片的原始起始位置。<br> 语法:<br> background-origin : border-box 或 padding-box 或 content-box;<br> 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。<br> 需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。 默认的话就是padding-box
    查看全部
  • 区别大了,在CSS3中的变形,如rotate(),skew(),scale(),translate(),都可以使用矩阵matrix()函数来代替。 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)
    查看全部
  • matrix(长度缩放,y轴扭曲,x轴扭曲,宽度缩放,x位移,y位移) matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量,1为原始大小; b为纵向扭曲,0为不变; c为横向扭曲,0不变; d为垂直伸缩量,1为原始大小; e为水平偏移量,0是初始位置; f为垂直偏移量,0是初始位置;
    查看全部
  • 11-7 Responsive响应<meta>标签 在实际项目中,为了让Responsive设计在智能设备中能显示正常,也就是浏览Web页面适应屏幕的大小,显示在屏幕上,可以通过这个可视区域的meta标签进行重置,告诉他使用设备的宽度为视图的宽度,也就是说禁止其默认的自适应页面的效果,具体设置如下: <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
  • 1. top:50%,left:50%,是将色块的左上角定位在了屏幕的中央,但是,整体并不在中央; 2. translate的百分比是根据自身的宽度和高度来定的,translate(-50%,-50%) 配合 top:50%,left:50% 实现了居中
    查看全部
  • 一张图片被分成九份,2,4,6,8起主要作用,repeat:2,4,6,8从中间向两边平铺,超出裁剪; round:2,4,6,8圆满的铺在各边,不能凑整就会被变形;stretch:2,4,6,8被拉伸;
    查看全部

举报

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

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