慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Adorrable坛子

“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2015-08-26
Adorrable坛子

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2015-08-26
Adorrable坛子

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2015-08-26
Adorrable坛子

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-08-26
Adorrable坛子

冒号前没有空格

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2015-08-26
Adorrable坛子

a[href$=pdf]{ background: orange; color: #fff; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2015-08-26
417435584

border-radius是向元素添加圆角边框。使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-08-26
部分进阶已完成

#brand:target p{ background: orange; color: #fff; }//id=brand里面不管有几个p标签，当你点击链接后，所有的段落p将添加橙色背景和白色文字。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-08-26
_依然_0_0

图片的自适应： <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt=""> CSS 控制： @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }

查看全部

0 采集收起来源：Responsive设计（一）
2018-03-22
_依然_0_0

响应式布局必须满足： 1、网站必须建立灵活的网格基础； 2、引用到网站的图片必须是可伸缩的； 3、不同的显示风格，需要在Media Queries上写不同的样式。

查看全部

0 采集收起来源：Responsive设计（一）
2015-08-25
_依然_0_0

1、@media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。 2、only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器，另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。 3、在Media Query中如果没有明确指定Media Type，那么其默认为all 4、<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
慕用4042094

background-size:auto | 长度值 | 百分比 | cover(填满整个容器) |contain （等比缩放到某一边紧贴容器边缘为止）

查看全部

0 采集收起来源：CSS3背景 background-size
2015-08-25
慕后端4851235

以上若是写为： .wrapper > div:nth-child(1) { background: orange; }将不会生效；写成 .wrapper > div:nth-child(3) { 会生效；可能原因: :nth-child选择符的使用具有一定局限性；？

查看全部

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

::before,::after

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-08-24
ikicw

Gradient 分为线性渐变(linear)和径向渐变(radial)。 linear-gradient(to top left ,blue,orange); to+left/right/top left/top riht 表示渐变终点位置

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-08-24

首页上一页 802 803 804 805 806 807 808 下一页尾页

0/150

提交

取消

开始学习

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

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