慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

fwj唯一

:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2015-10-28
广藿香Patchouli

Media Queries媒体类型，其中Screen、All和Print为最常见的三种媒体类型。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2015-10-28
广藿香Patchouli

列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 不占用空间真是个大优点，目测以后会常用。

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
huangjiayi

.box { width:70%; height:200px; background:#FFF; margin:40px auto; } .effect{ position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }

查看全部

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

Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

查看全部

0 采集收起来源：Media Queries使用方法
2015-10-27
L小姐咯

5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-10-27
L小姐咯

3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-10-27
L小姐咯

1.创建一个flex容器任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-10-27
L小姐咯

在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成。

查看全部

0 采集收起来源：CSS3 盒子模型
2015-10-27
fwj唯一

first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2015-10-27
huangjiayi

.nav li{ position:relative; display:inline-block; padding:0 16px; font-size: 13px; text-shadow:1px 2px 4px rgba(0,0,0,.5); list-style: none outside none; } /*使用伪元素制作导航列表项分隔线*/ .nav li::after{ content:""; color:#666; position:absolute; top:18px; height:20px; left:-1px; width:1px; background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57); } /*删除第一项和最后一项导航分隔线*/ .nav li:first-child::after{ background:none; }

查看全部

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

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2015-10-27
二小423

-moz是针对火狐，enable是可编辑的type="text"的input，默认状态下的，disable是不可编写 readly是input只读状态

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
L小姐咯

小结： CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形; transition: property duration timing-function delay;animation: KeyframesName duration timing-function delay iteration-count direction play-state fill-mode;

查看全部

0 采集收起来源：CSS3中设置动画播放时间
2015-10-27
L小姐咯

position: absolute; top: 50%; left:50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); 可以让一个元素居中显示

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-10-27

首页上一页 719 720 721 722 723 724 725 下一页尾页

0/150

提交

取消

开始学习

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

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