慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

荆棘王冠lily3220076

:checked选择器在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。可以定义被选中的按钮的样式

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2016-06-13
荆棘王冠lily3220076

:disabled选择器 “:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。示例演示通过“:disabled”选择器，给不可用输入框设置明显的样式。 HTML代码： <form action="#"> <div> <input type="text" name="name" id="name" placeholder="我是可用输入框" /> </div> <div> <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled /> </div> </form> CSS代码 form { margin: 50px; } div { margin-bottom: 20px; } input { background: #fff; padding: 10px; border: 1px solid orange; border-radius: 3px; } input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); }

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2018-03-22
荆棘王冠lily3220076

:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。示例演示通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。 HTML代码: <form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="可用输入框" /> </div> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" /> </div> </form> CSS代码： div{ margin: 20px; } input[type="text"]:enabled { background: #ccc; border: 2px solid red; }

查看全部

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

:last-child 选择器选择的是元素的最后一个子元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2016-06-13
黎聪

:first-child 父元素下的第一个子元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2016-06-13
pIaoHan3448620

左负右正，上负下正

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2016-06-13
西市路1号

@font-face 能够自定义字体，字体文件从服务器加载， @font-face { font-family: fontname;//定义字体的名字 src: url("字体地址"); }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
西市路1号

text-overflow用来设置是否使用一个省略标记... 表示对象内文本的溢出。 text-overflow:clip | ellipsis 但是text-overflow只是用来说明文字溢出时用什么方式显示，还需强制定义文本在一行内显示white-space:nowrap overflow:hidden.

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-06-13
西市路1号

css3的渐变分为线性渐变和径向渐变。线性渐变 linear-gradient(渐变方向，颜色起始点，结束点)

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-06-13
西市路1号

css3设置背景色 rgba() 增加了设置透明度的参数

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-06-13
十寸雨

border-image中的尺寸不能加px

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-06-13
慕粉ZhiChengChen

<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> <style type="text/css"> div.circle{ height:50px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px 50px 0px 0px;/*四个圆角值都设置为宽度或高度值的一半*/ } /*任务部分*/ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0px 0px 50px; } </style> </head> <body> <div class="circle"> </div> <br/>  <div class="semi-circle"> </div> </body> </html>

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2018-03-22
荆棘王冠lily3220076

only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。示例演示通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。 HTML代码： <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
荆棘王冠lily3220076

only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。 HTML代码： <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码： .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }

查看全部

0 采集收起来源：CSS3 only-child选择器
2018-03-22
荆棘王冠lily3220076

nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。示例演示通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。 HTML代码： <div class="wrapper"> <p>我是第一个段落</p> <p>我是第二个段落</p> <p>我是第三个段落</p> <p>我是第四个段落</p> <p>我是第五个段落</p> <div>我是一个Div元素</div> <p>我是第六个段落</p> <p>我是第七个段落</p> </div> CSS代码： .wrapper > p:nth-last-of-type(3){ background: orange; } 倒着来几个特定的属性找通性

查看全部

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

首页上一页 499 500 501 502 503 504 505 下一页尾页

0/150

提交

取消

开始学习

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

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