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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
  • word-wrap:normal表示控制连续文本换行/break-word表示内容将在边界内换行 还作用于长单词
    查看全部
  • text-overflow:clip剪切/ellipsis表示省略标记 text-overflow:ellipsis; overflow:hidden;;溢出内容为隐藏; white-space:nowrap 强制文本在一行内显示
    查看全部
  • gradient 渐变 linear-gradient 线性渐变 (to bottom,#fff,#666)方向 起始色值 结束色值 可以2个以上
    查看全部
  • 制作3D旋转视频展示区 http://codepen.io/airen/pen/eAztg
    查看全部
  • 脚本下载地址: 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]>
    查看全部
  • 响应式布局 <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
    查看全部
  • resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明: 属性值 取值说明 none 用户不能拖动元素修改尺寸大小。 both 用户可以拖动元素,同时修改元素的宽度和高度 horizontal 用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度。 vertical 用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度。 inherit 继承父元素的resize属性值。 例如:通过resize属性,让文本域可以沿水平方向拖大。代码为: textarea { -webkit-resize: horizontal; -moz-resize: horizontal; -o-resize: horizontal; -ms-resize: horizontal; resize: horizontal; }
    查看全部
  • CSS生成内容 在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素,一般可以做以下四件事情: 功能 功能说明 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源) string 插入字符串 实例展示: 在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示: .clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; } 上面这个示例是最常见的,也是最简单的,我们再来看一个插入元素属性值的方法。 假设我们有一个元素: <a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a> 可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后: a:after { content:attr(title); color:#f00;
    查看全部
    0 采集 收起 来源:CSS生成内容

    2018-03-22

  • 属性值 属性值说明 outline-color 定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。 outline-style 定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。 outline-width 定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。 outline-offset 定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。 inherit 元素继承父元素的outline效果。
    查看全部
    0 采集 收起 来源:CSS3外轮廓属性

    2015-12-23

  • transiton-property:指定过度或动态模拟的css属性; transiton-duration:指定过度所需时间; transiton-timing-duration:指定过度函数; transiton-delay:指定开始出现的延迟时间; transiton:width .5s ease-out .2s,background .5s linear ease .1s
    查看全部
  • 制作3D旋转导航菜单
    查看全部
  • “::before”、“::after”来实现,其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。
    查看全部
    0 采集 收起 来源:CSS生成内容

    2015-12-23

  • Flexbox布局功能主要具有以下几点: 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 第五,可以控制元素在页面上的布局方向; 第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
  • W3C标准盒模型 外盒尺寸计算(元素空间尺寸) element空间高度=内容高度+内距+边框+外距 element空间宽度=内容宽度+内距+边框+外距 内盒尺寸计算(元素大小) element高度=内容高度+内距+边框(height为内容高度) element宽度=内容宽度+内距+边框(width为内容宽度) 2.IE传统下盒模型(IE6以下,不包含IE6版本或”QuirksMode下IE5.5+”) 外盒尺寸计算(元素空间尺寸) element空间高度=内容高度+外距(height包含了元素内容宽度、边框、内距) element宽间宽度=内容宽度+外距(width包含了元素内容宽度、边框、内距) 内盒尺寸计算(元素大小) element高度=内容高度(height包含了元素内容宽度、边框、内距) element宽度=内容宽度(width包含了元素内容宽度、边框、内距) 在CSS3中新增加了box-sizing属性,能够事先定义盒模型的尺寸解析方式,其语法规则如下: box-sizing: content-box | border-box | inherit
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2015-12-22

举报

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

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