存档

‘css’ 分类的存档

网页中圆角的制作方法与选择（一）宽度固定高度自适应的圆角

2009年8月12日 雨无形 没有评论

今天在做移动新版页面的模板的时候因为页面中用到了很多圆角的效果，基本效果如下：

圆角效果

所以准备做一个圆角的通用模板。考虑到网站中此圆角样式只有两种宽的尺寸370和750，但高度不定所以首先做了一个固定宽高度自适应的模板。

代码如下：

Html部分：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="box">
<div class="box-top">
<h2>宽固定高自适应box</h2>
</div>
<div class="box-bd">
<ul>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
	<li><a>新闻标题新闻标题新闻标题新闻标题新闻</a></li>
</ul>
</div>
</div>

CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.box {
	width:370px;
	padding-bottom:3px;
	background:url("../images/box-round.png") 0 100% no-repeat;
}
.box .box-top {
	height:27px;
	padding:2px 2px 4px;
	background:url("../images/box-round.png") -370px 0 repeat-x;
}
.box .box-top h2 {
	font-size:14px;
	line-height:27px;
	color:#1866a6;
	padding-left:20px;
	background:url("../images/ico.gif") 5px 7px no-repeat;
}
.box .box-bd {
	border-left:1px solid #c6c6c6;
	border-right:1px solid #c6c6c6;
	padding:5px 10px 8px;
}
.box {
	background-position:0 100%;
}
.box .box-top {
	background-position:-370px 100%;
}

提示：你可以先修改部分代码再运行。

如果还要新加一个750宽度的，则要修改一下代码。

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div class="width1">
<div class="box">
  <div class="box-top">
    <h2>宽固定高自适应box</h2>
  </div>
  <div class="box-bd">
    <ul>
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
    </ul>
  </div>
</div>
</div>
<div class="width2">
<div class="box">
  <div class="box-top">
    <h2>宽固定高自适应box</h2>
  </div>
  <div class="box-bd">
    <ul>
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
      <li><a href="">新闻标题新闻标题新闻标题新闻标题新闻</a></li> 
    </ul>
  </div>
</div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.width1 {
	width:370px;
	margin:20px auto;
}
.width2 {
	width:750px;
	margin:20px auto;
}
.box {
	padding-bottom:3px;
	background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") no-repeat;
}
.box .box-top {
	height:27px;
	padding:2px 2px 4px;
	background:url("http://www.yuwuxing.cn/code/box/images/box-round.png") repeat-x;
}
.box .box-top h2 {
	font-size:14px;
	line-height:27px;
	color:#1866a6;
	padding-left:20px;
	background:url("http://www.yuwuxing.cn/code/box/images/ico.gif") 5px 7px no-repeat;
}
.box .box-bd {
	border-left:1px solid #c6c6c6;
	border-right:1px solid #c6c6c6;
	padding:5px 10px 8px;
}
.width1 .box {
	background-position:0 100%;
}
.width1 .box .box-top {
	background-position:-370px 0;
}
.width2 .box {
	background-position:-740px 100%;
}
.width2 .box .box-top {
	background-position:-1490px 0;
}

提示：你可以先修改部分代码再运行。

宽度固定，高度自适应的圆角就这样完成了，如果需要宽度也能自适应敬请期待PART II，宽高自适应的圆角边框

分类: css, 网页设计 标签:

CSS3 Columns属性研究

2009年8月6日 雨无形 没有评论

CSS3 Columns属性研究

Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

1
2
3
4
5
6

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码分别是定义的栏数根每栏的宽度

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

属性的使用很简单，比如要做一个宽度固定为800px，4栏的布局可以用如下代码：

1
2
3
4

width: 800px;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

同样如果要制作一个高度固定为400px，每栏宽度300px的布局可以用如下代码

1
2
3
4

height:400px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
column-width: 300px;

但是如果同同时使用了column-width和column-count会有怎么样的效果呢？
我们实验一下最开头的代码，

1
2
3
4
5
6

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;

分别用FF3.5和chrome/safari打开看一下
我们发现chrome/safari是按照设定的每栏宽250px，两栏显示的，但是FF下却成了两栏，但是每栏的宽变成了整个容器的50%的宽度。说明在FF下优先考虑的是容器的宽度。

然后我们再测试一下极端一点的情况：

提示：你可以先修改部分代码再运行。

在限定了高度，栏数，栏宽，字数又超过了的情况下，在FF下，栏宽还是容器宽度的50%，栏宽的限制也不起作用了，唯一起作用的是高度，在chrome/Safari下，栏宽跟高度还是保持，栏数超出设置。这个在使用这个属性的时候都是要注意的。

分类: css, 网页设计 标签: ,

9个你现在可以使用的CSS3属性

2009年8月6日 雨无形 没有评论

前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。

原文：9 CSS3 Properties You Can Use Now

当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。

下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。

1.Text-shadow

这个属性使用的属性值是这样定义的：

1

text-shadow: 2px 2px 5px #000;

其中第一个和第2个值代表了阴影的偏移量，第3个值代表模糊半径，第4个值代表阴影颜色。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 2.0+, Opera 9.6+

注：想了解该属性详细情况可以查看之前的一篇文章CSS文字阴影效果

2.Box-shadow

这个属性跟文字阴影有点相像，但是又有一些区别，它可以作用于一块区域的阴影效果，而不像文字阴影只能作用文字区域。它的属性值是如下所示定义的：

1

box-shadow: 5px 5px 10px 10px #000;

前两个属性值代表阴影的便宜量，第3个值代表模糊半径，第4个值代表阴影的扩散半径，第5个值代表阴影的颜色值。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

3.Box-sizing

这个属性虽然被列入CSS3属性中，但是还尚未广泛支持CSS3的规格。

这个属性相对比较简单，包含了3个属性值，content-box、border-box和inherit。

1

box-sizing: content-box | border-box | inherit;

在浏览器行为中，默认情况下为content-box，内容显示的大小实际上是内容、填充、边界以外指定的宽度和高度，所以一个有20px宽度内容、1px边界以及5px的间距实际上会被当成总宽度为20+1+1+5+5=32px。

所以利用这个属性，如果我们定义为border-box，那边界和边距将会被定义在元素之内，上面举的例子中，总宽度将会被当成20px，这个在实际布局中很有用。

支持此属性的浏览器：IE8+, Safari 3.1+, FireFox 2.0+, Chrome 1.0+, Opera 9.6+

4.Columns

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

1
2
3
4
5
6

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码告诉我们，内容将会以2列展示，每一列250px宽。

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

5.Border-radius (rounded corners)

因为很多人都很喜欢圆角，但是在CSS3之前就不得不使用图片来实现很多效果，所以在CSS3中加入了这个属性，收到了大家的欢迎，但是在Mozilla 和 Webkit 核心浏览器中仍然需要他们自己的前缀，属性书写如下：

1
2
3

-moz-border-radius: 10px; /* For FireFox */
-webkit-border-radius: 10px; /* For Safari/Chrome */
border-radius: 10px; /* For when the standard gets fully supported */

支持此属性的浏览器：Safari 3.1+, FireFox 2.0 (non-antialiased), FireFox 3.0+, Chrome 1.0+ (non-antialiased)

6.Border-image

这个属性没有像Border-radius这个属性那么频繁的被使用，因为在理解上还是有点困难。但是对于一些特殊的效果，用这个属性就很合适：

1
2

-webkit-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;
-moz-border-image: url(whiteButton.png) 0 12 0 12 stretch stretch;

需要查看这个属性的更多细节，请点击：his full article

浏览器对于此属性的支持：Safari 3.1+, FireFox 3.5, Chrome 1.0+

7.@font-face (web font embedding)

这个属性是说用户可以自定义一些个性字体，为了包含自己定义的字体，可以通过这个属性进行定义：

1
2
3
4

@font-face {
font-family: "My Awesome Font";
src: url(MyAwesomeFont.otf) format("opentype");
}

然后可以通过下面的形式进行引用：

1

h1 { font-family: "My Awesome Font", sans-serif; }

支持此属性的浏览器：Safari 3.2+, FireFox 3.5, Chrome 2.0+, IE4+ (sort of)

8.RGBA color

这个属性还是值得一提的，之前我们定义背景颜色，就是一个颜色值，但是通过CSS3的这个属性，如果你想定义一个透明度为50%的一个背景色，就会很容易实现：

1

background: rgba(0, 0, 0, 0.5)

浏览器对于此属性的支持（不包含滤镜）：Safari 3.1+, FireFox 2.0+, Chrome 1.0+

9.Transitions

这个属性可以让你实现一些之前必须用图片实现的效果，比如说线性渐变之类的：

1
2
3
4
5
6
7

#element {
opacity: .7;
-webkit-transition: opacity 1s linear;
}
#element:hover {
opacity: 1;
}

以前都是CSS3属性中加入的属性，对我们在工作当中都有了一个很好的帮助。

分类: css, 网页设计 标签:

CSS文字阴影效果

2009年8月5日 雨无形 没有评论

上回说到用css模拟图片阴影效果，那么文字有办法吗？

其实在css3中已经有一个text-shadow属性专门来实现这个效果，不过目前只有Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)等几个现代浏览器可以支持该属性，IE系的暂时无法实现该属性。

text-shadow的语法：

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

具体请参考：http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows

值得注意的是，text-shadow可以应用多组属性，也就是可以如下方法使用：

0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200

下面看几个范例：(请使用Webkit (from Safari 3+，chrome), Opera 9.5, Firefox 3.1(pre-Alpha)浏览器运行查看效果。)

提示：你可以先修改部分代码再运行。

至于顽固的IE，只能用滤镜来实现类似效果了，下面也顺便介绍一下IE滤镜制作阴影。

IE滤镜的语法为：

filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance )
其中color为阴影颜色 direction为角度 strength为阴影距离

下面一样看个例子

提示：你可以先修改部分代码再运行。

可以看到效果比较差，只有在小字体的时候才能用下。另外要注意要是用滤镜的元素必须触发haslayout

最后把两个方案结合一下即可实现支持大部分浏览器的CSS阴影效果。

提示：你可以先修改部分代码再运行。

分类: css, 网页设计 标签: ,

另辟蹊径，用css制作简单图片阴影效果

2009年8月4日 雨无形 没有评论

一般制作阴影效果都是使用的图片背景或者css滤镜，个人对于CSS滤镜一直抱有抵触心理，所以能不用就不用，有时候为了实现一些效果需要给图片加上阴影。可以尝试一下以下CSS方法。

a.shadow {
	display:inline-block;
	padding:1px;
	background:#d1d1d1;/* 第三层边框的颜色 */
	border:solid #f0f0f0 1px;/* 第四层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
a.shadow img {
	padding:1px;
	background:#676767;/* 第一层边框的颜色 */
	border:solid #a4a4a4 1px;/* 第二层边框的颜色 */
	/* 各标准浏览器中圆角定义 */
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

提示：你可以先修改部分代码再运行。

分类: css, 网页设计 标签:

适合自己的才是最好的——打造最适合自己习惯的reset.css

2009年7月14日 雨无形 没有评论

最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，以YUI为蓝本，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

3、Eric的reset css

4、YUI 3的CSS RESET

5、Less is more – my choice of Reset CSS

首先是最基本的清除padding跟margin：

1
2
3
4

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}

这个我在YUI的基础上进行的修改，去除了pre,code,blockquote三个标签，因为我一般做的项目都是企业或门户型网站，用到这三个标签的机会极少，因此就去除了这三个标签的重置，节省几个字节。

然后是清楚border，一般常用的需要清除的只有fieldset、img两个元素，特别是img，如果不清楚在加上链接的时候会出现蓝色边框。

1
2
3

fieldset, img {
border: 0;
}

对于h标签,我只重置了该标签的font-size其它都没重置，在yui中的font-weight:normal;重置被我去除了，因为在我的使用中的大多数情况下h标签都是需要font-weight:bold的，在这里去除了以后还要加，反而麻烦了。

1
2
3

h1,h2,h3,h4,h5,h6 {
font-size:100%;
}

li标签的list重置，我选择了eric大牛的方法，

1
2
3

ol, ul {
list-style: none;
}

而没有用yui的方法

1
2
3

li {
list-style: none;
}

因为蓝色理想那篇文章里写，前一种方法的性能更好，这个目前没有什么实例证明，不过3个直接姑且就先用第一种吧。

再下来是table的样式

1
2
3
4
5
6
7
8

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
font-weight:normal;
}

最后几个伪类的样式

1
2
3

:focus {
outline: 0;
}

这个主要是针对非IE浏览器链接点击时的虚线框。

另外我一直很犹豫是否把链接的下划线去掉，经过考虑以后还是不在reset里面去掉了。

秉承够用就好的原则，代码中我去掉了那些我不常用的标签的重置，比如abbr,acronym,sup,sub,code,address,cite,dfn,var,blockquote,q标签，一般项目中基本上用不到，所以就不设置了。strong,em等标签还是使用默认样式，这里也不重置了。

将前面的综合一下最后的代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
reset css version: 1.0 | 20090714
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
	font-weight:normal;
}
:focus {
	outline: 0;
}
分类: css, 网页设计 标签: ,

关于表格的学习笔记

2009年2月17日 雨无形 没有评论

今天学习了两篇关于表格的文章，感觉对表格的认识更进一步了，记下此笔记以作分享。

以往设计一个如下表格我都是采用以下代码

  1. <table width="300px" border="0" cellspacing="0" cellpadding="0">   
  2.   <caption>各门派掌门表</caption>   
  3.   <thead>   
  4.     <tr>   
  5.       <th>门派</th>   
  6.       <th>掌门</th>   
  7.       <th>年龄</th>   
  8.     </tr>   
  9.   </thead>   
  10.   <tbody>   
  11.     <tr>   
  12.       <th>武当</th>   
  13.       <td>三丰</td>   
  14.       <td>98</td>   
  15.     </tr>   
  16.     <tr>   
  17.       <th>全真</th>   
  18.       <td>重阳</td>   
  19.       <td>65</td>   
  20.     </tr>   
  21.   </tbody>   
  22. </table>  

今天看了两篇文章：

标记语言——邪恶的表格

标准化——表格

总结如下：

  • tfoot的使用：tfoot标签本来一直知道这个标签，但是很少用到，但是本身一直有一个误区就是写表格的顺序是thead、tbody、tfoot，其实正确的顺序是thead、tfoot、tbody。thead和tfoot要写在tbody前面。
  • summary属性：进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容。summary属性是加到table里的。
  • id和header：同样是对于非可视化浏览器可以使用在th上加id然后在th上加header来使td和th对应。
  • abbr属性：当屏幕阅读器遇到一个表格，每一行会把表头连每一个数据单元格一起读出来。如果表头很长，听一遍一遍的读是十分乏味的。通过使用abbr属性，可以给那些长的表头提供简写形式，取代表头的内容。abbr属性是可选的，大部分情况表头还是（或许是应该）比较简短的。

最后，之前的代码可以修改为：

  1. <table width="300px" border="0" cellspacing="0" cellpadding="0" summary="此表格记录了江湖各门派的掌门和年龄">   
  2.   <caption>各门派掌门表</caption>   
  3.   <thead>   
  4.     <tr>   
  5.       <th id="company">门派</th>   
  6.       <th id="master">掌门</th>   
  7.       <th id="age">年龄</th>   
  8.     </tr>   
  9.   </thead>   
  10.   <tbody>   
  11.     <tr>   
  12.       <th id="wudang">武当</th>   
  13.       <td headers="master wudang">三丰</td>   
  14.       <td headers="age wudang">98</td>   
  15.     </tr>   
  16.     <tr>   
  17.       <th id="quanzhen">全真</th>   
  18.       <td headers="master quanzhen">重阳</td>   
  19.       <td headers="age quanzhen">65</td>   
  20.     </tr>   
  21.   </tbody>   
  22. </table>  
分类: css, 网页设计 标签: ,

Acid2 Browser Test

2008年11月14日 雨无形 没有评论

恕我火星了，今天才知道有Acid2 Browser Test这个东西，动手测试了一下手头的浏览器，IE8 FF3 谷歌浏览器都正常FF2和IE7及以下版本都不正常。

上网搜索了一下

Acid2 Browser Test

Acid2 is a test page, written to help browser vendors ensure proper support for web standards in their products. Please take the Acid2 test!

If you’d like more in-depth information about the Acid2 test, we’ve provided a detailed technical guide that explains how the test works.

Note: Some 827 people (rough estimate, contents may have settled during shipping) have written to point out that the CSS used in the test is invalid. This is deliberate, as a means of exposing the ability of user agents to handle invalid CSS properly.

Note: When taking the test, you should use the default settings of the browser you are testing. Changing the zoom level, minimum font size, applying a fit-to-width algorithm, or making other changes may alter the rendition of the Acid2 page without this constituting a failure in compliance. (Added 21 July 2006)

更深层次的研究放在以后吧，工作先

分类: css, 网页设计 标签:

详解CSS的优先权（ZT）

2008年11月14日 雨无形 没有评论

原文出处：http://www.planabc.net/2008/05/06/css_specificity/

看这篇文章之前，对这个问题一直没深入研究，导致有时候遇到一些问题会很麻烦，看到这篇文章让我茅塞顿开，转帖回来保存一下以便今后复习。

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则：

  • 元素的 style 样式属性，加 1,0,0,0。
  • 每个 ID 选择符（#id），加 0,1,0,0。
  • 每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
  • 每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
  • 其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。

除了 Specificity 还有一些其他规则：

  • !important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
  • 如果优先权一样，则按源码中“后来者居上”的原则。
  • 由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

范例分析：

h1 {color: red;}/* 只有一个普通元素加成，结果是 0,0,0,1 */body h1 {color: green;}/* 两个普通元素加成，结果是 0,0,0,2 *//*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape {color: purple;}/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/h2 {color: silver;}/*一个普通元素，结果是 0,0,0,1 *//*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}/* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */li#answer {color: navy;}/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 *//*0,0,1,7 小于 0,1,0,1，后者胜出*/
分类: css, 网页设计 标签:

举国同悲，一条CSS代码把网页变黑白

2008年5月19日 雨无形 没有评论
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

加在CSS里面网页就可以变黑白的了，但是FLASH还是彩色

分类: css, 网页设计 标签: