园子博客 » Css

用 CSS 实现网页的翻转效果

园子 — Wed, 06 Apr 2011 01:39:36 +0000

有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平翻转过来的，会不会觉得是浏览器出了问题呢？其实这种网页翻转效果通过强大的 css 就可以实现滴。

本文所用的方法是来源于万戈同学的这篇文章，你只需要把以下的 CSS 加入到要实现翻转效果的网页中即可看到效果：

html{
    filter:fliph
}
body{
    -webkit-transform: rotateY(180deg);
    -moz-transform: skew(0deg, 180deg) scale(-1, 1);
    -o-transform: skew(0deg, 180deg) scale(-1, 1);
    transform: rotateY(180deg);
}

园子博客翻转后的效果展示：

园子博客翻转后的效果展示

其原理是让 IE 浏览器用户用滤镜实现网页的翻转效果，非 IE 浏览器用户通过 CSS3 实现网页水平的翻转。再次感叹下 CSS 的强大魅力，我是得多学学了。

扩展阅读

CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

CSS专题之精华文章汇总

园子 — Sun, 31 May 2009 07:32:13 +0000

Cascading Style Sheets（层叠样式表），简写为css，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。您想过吗？您仅仅改变一个文件就可以改变数百个网页的外观，用传统的方法实现这个功能的繁琐程度可想而知，但只要你学会了CSS，这些个性化的表现方式实现起来就如喝杯茶那么简单！这个专题园子将总结在学习CSS的过程中遇到的一些问题和解决方法，这是一个从入门到精通循序渐进的过程，园子希望这些文章可以帮助到您，让我们一起开始学习吧！

PS：本来这是一个页面，现在改为文章列表，由此引起的不便请各位朋友多多包涵。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

CSS中巧用 nowrap 属性禁止文字自动换行

园子 — Sat, 09 May 2009 03:43:11 +0000

设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的图片：

我们可以看到在没有定义 white-space: nowrap; 属性的时候，链接文字会自动换行，而这些效果并不是我们想要的。以上的例子是在做友情链接的时候采用了 li 左浮动所出现的问题（因为每个链接的字数无法确定，所以无法定义 li 的固定宽度）。解决方法也很简单，只要在 li 属性里面加上 white-space: nowrap; 声明就可以了。

语法：

white-space : normal | pre | nowrap

参数：

normal : 默认处理方式

pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。

说明：

通过设置 white-space属性可以改变对象内空格的处理方式。

应用示例：

p { white-space: nowrap; }

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为css，由W3C定义和维护...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

CSS Hack 汇总

园子 — Fri, 08 May 2009 03:33:31 +0000

什么是 css Hack ？

由于不同的浏览器，比如 IE6.0，IE7.0，IE8.0,Firefox 等，对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的 CSS 代码的的过程，就叫 CSS Hack 。

由于要照顾到不同的浏览器下保持完美的显示效果，经常用到 CSS Hack，园子把常用的一些做了一下汇总，希望能够帮助到朋友们。

区别于IE6、IE7、Firefox 的 CSS Hack

1
2
3

.box {margin-top:5px;} /*Firefox */
* html .box {margin-top:10px;} /*IE6*/
*+html .box {margin-top:15px;} /*IE7*/

通过上述 CSS Hack 可以实现在 Firefox 中上边距为5px, IE6 中上边距为10px, IE7 上边距为15px。

屏蔽IE浏览器（也就是IE下不显示）

1 2	:lang(zh) select {font:12px !important;} /FF可见/ select:empty {font:12px !important;} /safari可见*/

这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

IE6及IE6以下识别

1	* html select {…}

这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。

1	html/**/ >body select {…}

这句与上一句的作用相同。

仅IE6不识别，屏蔽IE6

1	select { display :none; /屏蔽IE6/}

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

仅IE7与IE5.0可以识别

1	*+html select {…}

当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识别

1	*+html select {…!important;}

当面临需要只针对IE7做样式的时候就可以采用这个HACK。

仅IE6与IE5不识别，屏蔽IE6与IE5

1	select/*/ {display :none;} /IE6,IE5不识别*/

这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 。

仅IE5不识别，屏蔽IE5

1	select {…} /IE5不识别/

这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

盒模型解决方法

1	selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}

盒模型的清除方法不是通过!important来处理的。这点要明确。

只有Opera识别

1	@media all and (min-width: 0px){ select {……} }

针对Opera浏览器做单独的设定。

IE的if条件Hack

 Only IE 
所有的IE可识别
 Only IE 5.0 
只有IE5.0可以识别
 Only IE 5.0+ 
IE5.0包换IE5.5都可以识别
 Only IE 6- 
仅IE6可识别
 Only IE 6/+ 
IE6以及IE6以下的IE5.x都可识别
 Only IE 7/- 
仅IE7可识别

清除浮动

1	select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

截字省略号

1	select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

扩展阅读：

说说CSS Hack 和向后兼容

您也可以查看更多的关于CSS技巧汇总。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

id与class的使用原则

园子 — Tue, 24 Mar 2009 03:03:44 +0000

在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用css来控制网页布局时我们可能都会遇到一个问题：当定义一个属性时，是使用id，还是使用class？今天园子就把自己平时做站时的经验给大家简要讲述一下，希望能够对您有所帮助。

id的使用原则

先来说说id，id具有唯一性，其使用原则也是依据这一特性建立的。id是不能重复的，所以在xhtml的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。这些根据制定的规范命名为#logo , #nav , #content , #copyright 等等，本着其唯一性的原则园子建议定义id尽量在外围使用。

class的使用原则
class在CSS的定义中具有普遍性。说白一点就是class具有可重复无限制的使用多次，园子建议大家尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的class都成为id的子级或是孙级。在我们写CSS的时候可以写成这样 #father .child {…}，另外需要注意的是尽量不要让class包含id，比如.father #child {…}如果写成这样很显然就非常不可取。当然这也只是相对于良好书写习惯的一些建议，仅供大家参考。

综上所述，归总起来一句话：id是唯一的并且是父级的，class是可以重复的并且是子级的。保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助，如果您有更好的建议，欢迎给我留言探讨。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

CSS入门知识

园子 — Mon, 09 Mar 2009 01:59:20 +0000

我们首先要了解下面几点关于css方面的必备常识：

CSS是Cascading Style Sheets(层叠样式表)的简称。
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
在标准网页设计中CSS负责网页内容(xhtml)的表现。
CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课。
CSS是由W3C的CSS工作组产生和维护的。

了解了这么多您一定想知道CSS的优势在哪里，园子把重要的几点列举了出来：

表现和内容相分离
将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
提高页面浏览速度
对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
易于维护和改版
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

一些在网页中常用的CSS属性：

文字或元素的颜色 color
背景颜色 background-color
背景图像 background-image
字体 font-family
文字大小 font-size
列表样式 list
鼠标样式 cursor
边框样式 border
内补白 padding
外边距 margin
等等…

入门知识暂时就说到这里吧，在以后的文章里园子将与大家一起学习如何在网页中应用CSS，以共同见证CSS的强大魔力。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

如何优化CSS文件

园子 — Mon, 02 Mar 2009 08:42:55 +0000

尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。我们力求努力做到让自己的网站速度更快一些，常常要做的是去优化站点里每一个图像文件，但是你知道吗，css文件也是需要优化的。园子在做一个企业站点时把优化过的CSS和之前用Dreamweaver自动生成的CSS做了下对比，结果竟然发现文件大小缩减了35%！

其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，注意下一些比较常用的缩写方法，你也可以让你的CSS文件做到真正的优化。

当属性值为0时
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;

试试这样吧:
padding: 10px 5px 0 0;

移除选择器
选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:
#logowrap

在这个例子中所谓的那个选择器就是div

学会使用万能通配符*
要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {
margin: 0;
}

这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:
#menu * {
margin: 0;
}

这样的声明是指将#menu下的所有元素的margin设为0。

背景的缩写方法
背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

其实可以缩写成:
background: url(logo.png) no-repeat top center;

颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数字，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值（即奇数位色值和偶数位色值相同时），其它颜色值不适用这种技巧，比如:
#010101, #223345, #FFF000

Margin(外边距/空白边)的缩写
声明CSS magin值得时候通常会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:
margin:0 10px 0 10px;

当你声名padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:
margin:0 10px;

它是指左右的值为10px，上下的值为0；Padding(内边距)padding的简写技巧等同于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

可以写成:
padding: 0 10px;

Border(边框)边框的缩写
border缩写的方式相比其它声明来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:
border-width:1px;
border-style:solid;
border-color:#000;

其实可以写成:
border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。我们还可以为四个边设置不同的宽度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

可以简写成:
border-width:1px 2px 3px 4px;

最后，我们还可以只设置右和下边框的样式:
border-right:1px solid #000;
border-bottom:1px solid #000;

虽然并没减少多少代码,但园子建议写成这样:
border:1px solid #000;
border-width:0 1px 1px 0;

先设置四个边的默认风格，然后声明具体的哪个边要显示。

文字属性的缩写
文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:
font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

列表的缩写
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

可以写成:
list-style:square inside url(filename.gif);

再给大家举个综合的例子，请看下面的CSS代码：
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}

将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000;
}

下面是CSS缩写性质的列表以及它们所表示的常规性质。

Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
Border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停

总结了这么多，园子相信只要你留意正确的缩写方法，你也可以在最短的时间内把你的CSS优化好。赶快尝试一下吧。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

用CSS做的几个漂亮按钮

园子 — Mon, 02 Mar 2009 08:10:34 +0000

你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子就和大家一起见证一下css的强大威力，下图中的几个按钮都是通过CSS的定义制作出来的按钮效果，代码今天也共享出来，有需要的朋友直接复制代码到CSS样式表里面即可。

需要说明下的是，按钮中的渐变效果只在IE等浏览器下可以显示效果，Firefox浏览器下显示的按钮背景是灰色的。CSS代码如下：

.btn {
 BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
 BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
 BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
–>

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

CSS布局命名规则

园子 — Mon, 19 Jan 2009 07:40:42 +0000

近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到的一些命名规则，当然，这些命名并不是绝对的，只是园子认为有个良好的命名习惯无论是对网站后期维护还是团队协作方面都会有很大的帮助。

网站一般布局命名

页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendLink
页脚:footer
版权:copyRight

常用ID命名

外　套:wrap
主导航:mainNav
子导航:subnav
页　脚:footer
整个页面:　content
页　眉:header
页　脚:footer
子菜单:submenu
边导航图标:sidebarIcon
注释:　note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:　container
内容:　content
搜索:　search
登陆:　login
功能区:shop(如购物车，收银台)
当前的　current
商　标:label
标　题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗　志:logo
标　语:banner
菜单内容1: menu1Content
菜单容量:　menuContainer

css样式表的命名

基本的或公用的：base.css
主要的:master.css
布局，版面:layout.css
打印样式:print.css
主题:themes.css
专栏:columns.css
针对文字:font.css

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
常用的CSS单位 (0)
国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

常用的CSS单位

园子 — Thu, 08 Jan 2009 08:00:47 +0000

国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎都在使用em作为字体单位，你了解不同的单位分别代表什么意义吗？除了px像素单位以外，css还提供了许多其他类型的数学单位，下面将我目前所了解到的总结一下。

px
像素（Pixel）。相对长度单位。像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。
em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em单位有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
pt
点（Point）。绝对长度单位。
ex
相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em到px的单位转换
em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

上例的单位转换中，12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题园子已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限吧。

上面列举的数值单位大部分在网页设计中经常会使用到，对于设计者而言，园子建议你为了便于统一于修改，在某一类型的单位上使用同一的数学单位，如字体大小，定义DIV的宽度和高度等。最好是某一个网站中，根据人们的阅读习惯，统一使用px或pt等来定义。

需要注意的一些问题

IE无法调整那些使用px作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。

扩展阅读

用 CSS 实现网页的翻转效果 (38)
有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
CSS专题之精华文章汇总 (7)
Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
CSS中巧用 nowrap 属性禁止文字自动换行 (3)
设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
CSS Hack 汇总 (2)
什么是 CSS Hack ？由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
id与class的使用原则 (3)
在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
CSS入门知识 (1)
我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
如何优化CSS文件 (4)
尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
用CSS做的几个漂亮按钮 (0)
你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
CSS布局命名规则 (1)
近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
css语法结构 (0)
css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	CSS入门	CSS 定义的50个精美按钮下载	详解CSS盒模型
无觅

您可能也喜欢：
CSS技巧汇总	table转div工具：Table2CSS Converter汉化版下载	CSS Hack 汇总	WEB标准专题之精华文章汇总	SEO专题精华文章汇总
无觅

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	详解CSS盒模型	CSS 定义的50个精美按钮下载	用 CSS 实现网页的翻转效果
无觅

您可能也喜欢：
CSS技巧汇总	table转div工具：Table2CSS Converter汉化版下载	CSS专题之精华文章汇总	CSS入门	CSS 定义的50个精美按钮下载
无觅

您可能也喜欢：
h1~h6的使用原则	网站布局设计原则	2010郑州大河车展比亚迪现场混战图片	深度专用链接转换器 – 迅雷、快车下载链接加密解密工具	CorelDRAW X4 加速补丁，完美解决打开文件慢的问题
无觅