慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Wendy_22

columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。参数参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22
linshuang

加强练习

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2015-07-31
iluyao

变形--矩阵 matrix() 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是初始位置

查看全部

5 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-07-30
慕仙8654537

注意IE6不支持inline-block属性，可以用hack来解决：*display:inline;zoom:1; display: inline-block; *display: inline; zoom: 1; IE下块元素如何实现display:inline-block的效果？　　有两种方法：　　1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：　　div {display:inline-block;...} 　　div {display:inline;} 　　2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：　　div {display:inline; zoom:1;...}

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2015-07-30
九天化宇

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：第一，在默认样式中声明元素的初始状态样式；第二，声明过渡元素最终状态样式，比如悬浮状态；第三，在默认样式中通过添加过渡函数，添加一些不同的样式。 CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-07-30
慕仙8654537

display:inline; 内联元素，简单来说就是在同一行显示。 display:block; 块级元素，简单来说就是就是有换行，会换到第二行。 display:inline-block; 就是在同一行内的块级元素。设置 div 元素的不透明级别： div { opacity:0.5; } inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。 HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。.高手，去面试的时候就被问与float有何区别。答案就是这个，我答出来了。然后又问怎么去除这个空隙。想了好久居然被我瞎猫碰上死耗子给答对了（word-spacing letter-spacing设置为负值）解决了问题。

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2015-07-30
慕仙8654537

什么是placeholder？ placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字消失。由于placeholder是html5的新属性，可想而知，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。在input上应用背景图片，获得和失去焦点的时候切换背景图片是否显示。

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2015-07-30
慕仙8654537

placeholder 是HTML5的。在IE6-8中不能使用。可以使用 JQ 来设置。给input一个value， JQ判断得到焦点时 value=""；移开焦点时，若input为空，那么再加上"请输入即可" 具体例子如下： 1 2 3 4 5 6 7 8 9 10 11 12 $(document).ready(function() { $("input").focusin(function() { if($(this).val() =="请输入"){ $(this).val(""); } }); $("input").focusout(function() { if($(this).val() ==""){ $(this).val("请输入"); } }); });

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2018-03-22
慕仙8654537

在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面 <td><label for="repassword">密码确认：</label></td> <td><input type="password" name="repassword" id="repassword"></td> td><label for="_basketball">爱好：</label></td> 25. <td> 26. <label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label> 27. <label><input type="checkbox" value="football" name="hobby" id="_football">football</label> 28. <label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label> 29. <label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label> 30. </td> input[type="text"]:enabled { background: #ccc; border: 2px solid red; }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
yyk_7

1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-07-30
yyk_7

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-07-30
慕仙8654537

。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。 <div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div> CSS代码： .wrapper > div:only-of-type { background: orange; }

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2018-03-22
慕仙8654537

li:only-child { background: orange; } weibo_iuo1218li :only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

查看全部

0 采集收起来源：CSS3 only-child选择器
2015-07-30
慕仙8654537

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2015-07-30
慕仙8654537

last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素 .wrapper > p:last-of-type{ background: orange; } [ 查看全文 ]

查看全部

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

首页上一页 839 840 841 842 843 844 845 下一页尾页

0/150

提交

取消

开始学习

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

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