慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

知识

transition: property duration timing-function delay;咳咳，这个语法要记一下。

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2016-04-20
呸呸呸彭

主要记住animation-direction：reverse 表示倒放就行了

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-04-19
呸呸呸彭

利用position将方块左上角定位在大屏幕中心点，再利用translate（-50%，-50%）将方块的中心点移动到与大屏幕中心点重合，达到垂直水平居中的效果！！！！！

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-04-19
kangkai_fe

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;}

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
kangkai_fe

通过“:checked”状态来自定义复选框效果。 HTML代码 <form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="usename" /><span>√</span> </div> <label for="usename">我是选中状态</label> </div> </form> CSS代码： form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 20px; height: 20px; margin-right: 10px; position: relative; border: 2px solid orange; vertical-align: middle; } .box input { opacity: 0; position: absolute; top:0; left:0; } .box span { position: absolute; top: -10px; right: 3px; font-size: 30px; font-weight: bold; font-family: Arial; -webkit-transform: rotate(30deg); transform: rotate(30deg); color: orange; } input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; }

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22
邬在想

css选择器中:first-child与:first-of-type的区别 :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： QQ截图20140210135428 p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码： QQ截图20140210135428 p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个； h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个； span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。所以，通过以上两个例子可以得出结论： :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

查看全部

1 采集收起来源：CSS3 first-of-type选择器
2016-04-19
kangkai_fe

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2016-04-19
Queen_1

/*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; position:absolute; right:0px; top:15px; height:20px; width:1px; background:linear-gradient(to bottom,#f82f87,#B0363F,#f82f87); /*content:"|";*/ /*color:rgb(168,58,68);*/ /*position:absolute;*/ /*right:0;*/ /*text-shadow:0 0 5px ;*/ } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child:after{ background: none; /*content: none;*/ }

查看全部

1 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
kangkai_fe

text-overflow:ellipsis;//文字溢出时显示效果->clip: 剪切; ellipsis: 省略标记; overflow:hidden;//溢出内容隐藏 white-space:nowrap;//强制文本在一行内显示

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2018-03-22
kangkai_fe

1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-04-19
大手

变形--缩放 scale(); 缩放 transform:scale(0.5);

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-04-19
wanwei23

FLEXBOX,即伸缩布局盒模型，用来提供一个更加有效的方式制定，调整和分布一个容器里项目布局，即使它们的大小是未知

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-04-19
tobeyous

::selection{ background: orange; color: white; }网页中选中的文本

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-04-18
wanwei23

多列布局 columns:200px 3

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2016-04-18
tobeyous

给li加上颜色是ol>li:nth-child(2n+1){background-color:red;}

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22

首页上一页 564 565 566 567 568 569 570 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果