CSS3

CSS3 Media Queries案例——Hicksdesign

前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识,今天开始主要针对CSS3 Media Query进行一些实际案例的分析,从实际案例中来进一步学习和运用CSS3的Media Query,从而好让大家在自己的项目中更好的应用Media Query。

CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式:

CSS3 Multi-columns 之column-gap column-rule

上一节主要介绍了"Multi-column"中多列布局模块(CSS Multi-column Layout Module)的《CSS3 Multi-columns 之列数和列宽》,今天主要来和大家一起继续学习其中的第二部分:column-gap和column-rule

CSS3 Multi-columns 之列数和列宽

Multi-column”译成中文就是“多列”,这个"Multi-column"是W3CCSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示:

CSS ::Selection

前天在一个前端群中碰到一个网友问了一个有关于唐人CSS帝国中关于选择文本,背景是红色,而文本是白色的问题,如下图所示:

或许大家对这样的实现并不陌生,可是有很多童鞋可能跟我一样,并不知道是如何实现,因为在默认情况下,选择网站文本都是深蓝的背景,白色的字体,就如下本站的而言,选择文本后,背景是深蓝色,而选中的文本就是白色,如下图所示:

CSS3 Multiple Backgrounds

前面几节和大家一起学习了CSS3中给Background新追加的属性:《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。

CSS Background-origin

Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是用来决定背景图片的定位原点,换句话说就是背景图片定位的起点(

CSS3 Background-clip

上一节在《CSS3 background-size》详细的介绍了CSS3background新增属性之一,今天和大家一起来学习CSS3中有关于Background的第二新属性Ba

CSS3 Background-size

Background大家一定不会陌生,但是CSS3开始,给这个Background属性增加了几个新的属性值 :Background-size,Background-clip

页面

返回顶部