慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

fwj唯一

Media Queries——媒体类型（一）随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。 Media Queries Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式。随着时代的变化，这个模块功能越来越强大。在彻底的了解Media Queries我们需要了解其中的两个重要部分，第一个是媒体类型，第二个是媒体特性。下面的内容我们简单的来了解这两个部分：一、媒体类型媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。如下表所示：

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2015-11-17
fwj唯一

跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明属性值属性值说明 none none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-11-17
fwj唯一

列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则：

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2015-11-17
fwj唯一

列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。例如：将内容分三列显列，列与列之间的间距为2em，实现代码为： column-count: 3; column-gap: 2em;

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
fwj唯一

多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法： columns：<column-width> || <column-count>

查看全部

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

设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-11-17
fwj唯一

设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-11-17
fwj唯一

设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2015-11-17
fwj唯一

通过animation-iteration-count属性让动画move只播放5次，代码设置为： animation-iteration-count:5;

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2015-11-17
西西不小心

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。示例演示使用“:read-write”选择器来设置不是只读控件的文本框样式。

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2015-11-17
HZ1990

对基础的巩固很有帮助，不错！

查看全部

0 采集收起来源：CSS3能做什么？
2015-11-16
Beborn_Ye

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2015-11-16
Beborn_Ye

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

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2015-11-16
Beborn_Ye

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—target</title> <style> :target p { background: orange; color: #fff; } </style> </head> <body> <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> </body> </html>

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
慕田峪7004386

nth-of-type(2n+1) :not(:nth-of-type(2n)) :nth-of-type(odd) :not(:nth-of-type(even))

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2015-11-16

首页上一页 703 704 705 706 707 708 709 下一页尾页

0/150

提交

取消

开始学习

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

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