为了账号安全,请及时绑定邮箱和手机立即绑定
  • 结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。 示例演示: 通过“:root”选择器设置背景颜色 HTML代码: <div>:root选择器的演示</div> CSS代码: :root { background:orange; } 演示结果: “:root”选择器等同于<html>元素,简单点说: :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。 另外在IE9以下还可以借助“:root”实现hack功能。
    查看全部
  • 制作3D旋转视频展示区
    查看全部
  • 外轮廓outline(非常好用) 外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。 outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit outline-color 定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。 outline-style 定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。 outline-width 定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。 outline-offset 定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。 inherit 元素继承父元素的outline效果。
    查看全部
    2 采集 收起 来源:CSS3外轮廓属性

    2016-04-08

  • 多列布局columns属性参数主要就两个属性参数:列宽和列数。 举例:要显示2栏显示,每栏宽度为200px,代码为: columns: 200px 2; 语法: columns:<column-width> || <column-count> 参数说明: <column-width>主要用来定义多列中每列的宽度 <column-count>主要用来定义多列中的列数
    查看全部
  • 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是初始位置 区别,在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)
    查看全部
  • placeholder属性 提供可描述输入字段预期值的提示信息(hint)。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。 注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。 第二十节 :read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’” input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }
    查看全部
  • ::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。 通过“::selection”选择器,将Web中选中的文本背景变成红色,文本变成绿色。 HTML代码: <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体,</p> CSS代码: //在FF浏览器需要添加前缀 ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; }
    查看全部
  • :target选择器 分析: 1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand 2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。 多个url(多个target)处理: 就像上面的例子,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。 如下面例子: html代码: <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div> css代码: #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; } 上面的代码可以对不同的target对象分别设置不的样
    查看全部
  • E[att] CSS2 选择具有att属性的E元素。 E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。 E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。 E[att^="val"] CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。 E[att$="val"] CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。 E[att*="val"] CSS3 选择具有att属性且属性值为包含val的字符串的E元素。 E[att|="val"] CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
    查看全部
  • 伪类选择器 li:first-child{样式} /*ul中第一个li元素样式*/ li:last-child{样式} /*ul中第一个最后元素样式*/ li:nth-child(n){样式} /*ul中从上到下第n个li元素样式*/ li:nth-last-child(n){样式} /*ul中从下到上第n个li元素样式(加上(last就是倒叙))*/ li:nth-child(even){样式} /*ul中从上到下第2·4·6个(序列为偶数)li元素样式*/ li:nth-child(odd){样式} /*ul中从上到下第1·3·5个(序列为奇数)li元素样式*/
    查看全部
  • @font-face 能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face{ font-family:"字体名称"; src:字体文件在服务器上的相对或绝对路径;} 使用: p{ font-family:"字体名字";}
    查看全部
  • 1.结构性伪类选择器—last-child “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器, ul>li:last-child{background:blue;}
    查看全部
  • gc
    颜色之RGBA RGB是一种色彩标准,是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法: color:rgba(R,G,B,A) 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数,取值在0~1之间,不可为负值。 代码示例: background-color:rgba(100,120,60,0.5);
    查看全部
  • 多啦A梦,发个笔记记一下
    查看全部
    2 采集 收起 来源:CSS3能做什么?

    2018-03-22

  • @-webkit-keyframes around{ 0% { -webkit-transform: translateX(0); } 25%{ -webkit-transform: translateX(180px); } 50%{ -webkit-transform: translate(180px, 180px); } 75%{ -webkit-transform:translate(0,180px); } 100%{ -webkit-transform: translateY(0); } }
    查看全部
    2 采集 收起 来源:CSS3中调用动画

    2015-08-31

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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