2009年7月29日
转自： http://blog.onlygrape.com/css-advantage/404
关于CSS网页布局，随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。
如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。
CSS网页布局的优势体现在如下方面：
一、使页面载入得更快
由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用
页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率
由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性
DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录
由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力
我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
说了这么多CSS网页布局的意义与优势，同时也不能轻视CSS网页布局的弊端：
一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。
三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。
四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。
转自： http://blog.onlygrape.com/css-menu/460
给大家介绍一种简单的实现方法，没有用到复杂的JS代码，进行简单的变换就可以了。我们来看最终的效果，如下图所示：
HTML代码：
HTML Code
大家特别留意类似于以下代码的HTML, 这是变换的关键。
onMouseOver=”this.className=’menu1′”
onMouseOut=”this.className=’menu2′”
下面看CSS代码：
CSS Code
转自： http://blog.onlygrape.com/css-skill-2/472
十一、Block和inline元素对比
所有的HTML元素都属于block和inline之一。block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。 用code class=”inline”>display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？ 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。
十二、box黑客方法
之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法： padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; 第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
十三、页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类： <body> <div class=”container“> 然后CSS这样设计： #container { min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” ); } 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 同样的办法也可以为IE实现最大宽度：
#container { min-width: 600px; max-width: 1200px; width:expression(document.body.clientWidth < 600? “600px” : document.body.clientWidth > 1200? ”1200px“ : ”auto”); }
十四、IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： .box { width: 80px; height: 35px; } html>body .box { width: auto; height: auto; min-width: 80px; min-height: 35px; } 所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。
十五、字体变形命令
text-transform 命令很有用，它有3个值：text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。
十六、IE中图片文字消失的问题
有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定： position: relative ，如果不行，再考虑为这些元素指定一个宽度试试。
十七、不可见文字
不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用 display: none 。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到： position: absolute; left: -9000px 。 这实际上是把文字指定在页面以外显示。
十八、为手持设备设计专门的CSS
也就是手机／PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是： <link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” /> 也可以阅读专门的手持设备可用性。
十九、3D效果的按钮
以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了： a { display: block; border: 1px solid; border-color: #aaa #000 #000 #aaa; width: 8em; background: #fc0; } a:hover { position: relative; top: 1px; left: 1px; border-color: #000 #aaa #aaa #000; } 至于效果，还可以自己调整了。
二十、在不同页面上使用同样的导航代码
许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。 首先，在导航代码中使用CSS类： <ul> <li><a href=”#” class=”home”>Home</a></li> <li><a href=”#” class=”about”>About us</a></li> <li><a href=”#” class=”contact”>Contact us</a></li> </ul> 然后分别为每一页的Body指定一个id，和上面类同名。如<body id=”contact”>。 然后设计CSS如下： #home .home, #about .about, #about .about { commands for highlighted navigation go here } 这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。
转自： http://blog.onlygrape.com/img/453
实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。
display:block;
background:url(’parallax.gif’) no-repeat bottom left;
padding:93px 100px 75px 100px;
}
根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：
display:block;
padding:1px;
background:red;
border:1px solid black;
}
转自： http://blog.onlygrape.com/css-skill/468
一、CSS字体属性简写规则
一般用CSS设定字体属性是这样做的： font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif 这里需要注意的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
二、同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样： <p class=”text side”>…</p> 同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
三、CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如： border: 3px solid #000 这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。 如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
四、CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。 也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印： <link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” /> 第1行就是显示，第2行是打印，注意其中的media属性。 但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。
五、图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。 比如你想整个卖东西的图标，你就用了这个图片： <h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1> 这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的： <h1>Buy widgets</h1> 但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS： h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px } 注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
六、CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如： #box { width: 100px; border: 5px; padding: 20px } 这样调用它： <div id=”box”>…</div> 这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。 但用CSS也可以达到同样的目的，让它们显示效果一致。 #box { width: 150px } #box div { border: 5px; padding: 20px } 这样调用： <div id=”box”><div>…</div></div> 这样，不管什么浏览器，宽度都是150点了。
七、块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样： #content { width: 700px; margin: 0 auto } 你会使用 <div id=”content”> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下： body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto } 这会把网页内容都居中，所以在Content中又加入了 text-align: left 。
八、用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。 CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
九、CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器： #container { position: relative } 这样容器内所有的元素都会相对定位，可以这样用： <div id=”container”><div id=”navigation”>…</div></div> 如果想定位到距左30点，距上5点，可以这样： #navigation { position: absolute; left: 30px; top: 5px } 当然，你还可以这样： margin: 5px 0 0 30px 注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
十、直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS： #navigation { background: blue; width: 150px } 较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？ 不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。 body { background: url(blue-image.gif) 0 0 repeat-y } 此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
转自： http://blog.onlygrape.com/css-float/434
Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。
如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。
让我们尝试去解决这些问题并澄清一些以前使用浮动的误解。我们参考了成打的相关文章，并选取了最为重要的一些你必须了解的问题。
What You Should Know About Floats
“关于图文围绕的实践可以追溯到很久很久以前。这也就是为什么从Netscape1.1开始这个功能被引入浏览器，以及为什么CSS使用浮动属性来实现它。‘Float(浮动)’这个术语引用自伴随Netscape1.1一同发布的‘Additions to HTML 2.0’文档，描述一个元素浮动至某一侧并停下的表现方式。”
“浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。”
“元素浮动后将自动转为块级元素。该元素可以被移动至当前行的左侧或右侧。属性如下：float: left, float: right or float: none”
“你应该为所有的浮动元素设定宽度属性（除非是＜img＞元素，因其具有隐含的宽度）。如果不设定宽度，结果将是不可预知的。”
“举例来说，浮动元素应该定义宽度属性，不论是显式指定的还是隐含的。另外，它会尽可能的水平的填充容器元素，就像非浮动内容那样，不给其他内容空间以围绕它们。其次，和正常文档流中的元素不同，浮动元素的垂直边距(margin)不会叠加。最后，浮动元素可以和临近在正常文档流中块级元素重叠（译注：浮动元素不占任何正常文档流空间，所以建议不要理解成重叠，而是腾空浮动的概念。）。”
“首先我们要牢记的一件事情是，浮动元素只能浮动至左侧或者右侧，没有浮动至中间一说，这是很多新手容易范的错误。记住，最基本的规则，浮动元素只能浮动至两侧。”
“当我们让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果我们向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。如果我们浮动更多的元素，他们将一个挨一个排列，但不久就会空间不足，当该行已经无法容纳更多的浮动元素，则下一个浮动元素会换行继续排列。”
Containing blocks or containing boxes：“容器元素是指包含其他子元素的行级或块级元素。。。。” “当明确指定时，浮动元素垂直位置由它原先在文档流中的位置决定，顶端与当前行顶端对其。但是水平方向上，它尽可能远的向容器元素边缘移动，但是仍遵循容器元素的填充距离(padding)。同行的行内元素则围绕浮动元素排列。”
“由于浮动元素不占据正常文档流空间，所以浮动元素前后那些未明确指定位置的块级元素会占据浮动元素本来应该处在的位置，就好像它从来不曾存在过。而浮动元素之后的那行会根据浮动元素缩小宽度。浮动元素之前的元素则会重新被排列，占据独立的一行。（译注：ie 和 ff 在这种情况下的表现不尽相同）”
“如果当前行的水平方向上没有足够的空间容纳浮动元素，则向下一行，直至有能容纳该元素的行。”
“任何浮动元素都不可能超过原来所处文档留位置的上边界。浮动元素的顶端必定和当前行顶端对齐（或者在没有当前行元素时和前一个块级元素底部边缘对齐）。”
“想要真正理解浮动理论，你必须明白在CSS中什么是行 (line box)。不幸的是，为了解释什么是行，你必须先明白什么是行级元素。行级元素指的是那些非块级元素，例如＜em＞而行是一个逻辑上的概念，是一个虚拟的矩形，包含了组成该行的所有行级元素，其高度至少等于这些行级元素中最高的那个。”
“如果我们将Div中所有的列都加上 float: left 它们会挨个向左排列，如果我们希望在页面底部有一个页脚，并不需要一个最长的列，只要加上 clear: both 就可以了”
“使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点，即你的页面是否能够一直保持一致的展现效果将取决于浏览器的实现是否保持一致。特别是当浮动元素是一个更为复杂的布局中的一部分的话，将变得更加不堪一击。”
Clearing the floats
“浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样，你可以为这些元素应用‘clear’属性。该属性有4种设值：clear: left, clear: right, clear: both or clear: none”
有很多技巧可以做到清理浮动元素，但不引入额外的无语义标签。下面3种是比较常见的做法： a) 将容器元素一起浮动 b) 在容器元素上使用 overflow: hidden c) 使用:after这样的css伪类。
“插入一个清理元素是使容器正确包裹所有浮动元素的标准做法，这样做具有将容器底部边缘‘拖拉’以包裹所含元素的效果。”
“对于基于浮动设计的布局来说，一个常见的问题就是浮动元素的容器不会自动伸展来包含浮动元素。如果你希望在所有的浮动元素的外面加上边框（例如，在容器元素上加上边框），这样你必须显示的命令浏览器来伸展容器。你可以是用overflow method方法。”
使用:after 想像一下我们使用:after来插入一个点号，并且设置它的属性{clear: both;}。这就是所有你需要做的事情，但是没有人会接受容器底部有那么一丝空隙，所以我们还要设置{height: 0;} 和 {visibility: hidden;} 来保证严丝合缝。
转自： http://blog.onlygrape.com/css-navigation/440
导航结构在网站设计中是起到决定性作用的，导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受，它是网页设计的关键元素。
虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键，但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人，又不会夺走网站内容的焦点。
不幸的是，目前还有很多网站在使用过时的导航菜单方式，这样使网站可用性大打折扣。如果导航菜单过分的依赖图片那会失去一定的用户，比如那些网速慢或浏览器设置关闭读取网页图片功能。但是，并不意味着导航一定要朴素简单才能提高访问性及网站可用性。
CSS导航菜单的四个优点分析：
一、减少代码量
结合CSS和XHTML来制作导航菜单会比使用Javascript或图片来实现同样效果更加节省代码(CSS可以结合一些图片来制作导航而且代码量很小，而完全使用图片的导航代码量也要多很多)。代码量晓得网站会更有益于搜索引擎的索引排名，而且读取速度会快很多。
二、亲和力
基于CSS的导航菜单对用户来说不但更有可用性，而且更有亲和力。如果用户关闭读取图片和(或)CSS的功能，网站仍然可以以简洁的方式浏览，内容结构及网站可用性不会受到影响。有极少数用户使用的旧浏览器虽然不支持CSS，但网站导航菜单却仍然能够访问。
三、无限的设计方案
使用CSS来设计导航菜单并不会限制你的设计。事实上，CSS会提供更加灵活的导航设计方案，当用CSS来设置背景图时也能实现各种视觉效果。
四、大量的脚本资源
如果你不想自己从头开始设计基于CSS的导航菜单，那么有大量的免费脚本资源可以拿来使用。但暴风彬彬并不提倡使用这些脚本资源，因为这样的话你会和其它成百上千的网站使用同样的导航菜单。不过有一些菜单可以自定义样式(颜色、字体、尺寸及背景图)来符合你自己的网站风格。
转自： http://blog.onlygrape.com/css-ul-li-2/395
ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。
CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，并且将项目符号去掉。
我们看下面的XHTML代码：
<li><a href=”http://www.onlygrape.com/”>Div+CSS教程</a></li>
<li><a href=”http://www.onlygrape.com/”>CSS布局实例</a></li>
<li><a href=”http://www.onlygrape.com/”>CSS2.0教程</a></li>
<li><a href=”http://www.onlygrape.com/”>CSS酷站欣赏</a></li>
<li><a href=”http://www.onlygrape.com/”>CSS模板下载</a></li>
</ul>
我们建立了一个id为nav的无序列表，包含了五个列表项li，这就是我们的菜单了。我们通过下面的css代码，对它进行重新定义：
display: inline;
list-style-type: none;
padding: 5px 10px;
}
对id为nav的无序列表中的列表项li，我们进行CSS定义。每句代码的意义解释如下：
display: inline; 内联（行内）。将li限制在一行来显示。
list-style-type: none; 列表项预设标记为无。这就去掉了“方块或实心的黑点”
padding: 5px 10px; 设置li的填充，距离上下均为5px，距离左右均为10px.
这样定义以后，我们的列表就有一个菜单的雏形了.
最终的运行效果：
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>www.onlygrape.com</title>
<style type=”text/css”>
#nav li {
display: inline;
list-style-type: none;
padding: 5px 10px;
}
</style>
</head>
<body>
<ul id=”nav”>
<li><a href=”http://www.onlygrape.com/“>英文网站建设</a></li>
<li><a href=”http://www.onlygrape.com/“>英文站点推广</a></li>
<li><a href=”http://www.onlygrape.com/“>案例展示</a></li>
<li><a href=”http://www.onlygrape.com/“>关于我们</a></li>
<li><a href=”http://www.onlygrape.com/“>联系我们</a></li>
</ul>
</body>
</html>
转自： http://blog.onlygrape.com/position/186
定义
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
span>position版本：CSS2 兼容性：IE4+ NS4+ 继承性：无br>
position : static | absolute | fixed | relative
参数：
static：默认。它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。
absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。
fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
HTML定位规则
absolute : 将对象从文档流中拖出，使用left， right， top， bottom 等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和 边框
relative : 对象不可层叠，但将依据left，right， top， bottom等属性在正常文档流中偏移位置
fixed : IE5.5及NS6尚不支持此属性
图片垂直居中代码：
<style type=”text/css”>
<!–
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
–>
</style>
<div><p><img src=”http://www.google.com/intl/en/images/logo.gif” /></p></div>
转自： http://blog.onlygrape.com/word-spacing-letter-spacing/278
在对网页文本进行精细编辑时，需要应用到多方面的CSS属性设置，如垂直方向上的行距line-height，水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔，letter-spacing是指字母的间隔。下面我们来介绍下word-spacing与letter-spacing属性应用：
word-spacing属性：
语法：
参数：
normal : 默认间距
length :由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位
说明：
检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
对应的脚本特性为wordSpacing。请参阅我编写的其他书目。
示例：
div { word-spacing : 10px; }
检索或设置对象中的单词之间插入的空格数。由浮点数字和单位标识符组成的长度值，允许为负值。
设置word-spacing为15px的情况：
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>word-spacing与letter-spacing在文字编辑中的应用</title>
<style type=”text/css”>
p {word-spacing:15px;}
</style>
</head>
<body>
<p><a href=”http://blog.onlygrape.com/” target=”_blank”>CSS Web Design</a>onlygrape 网站 建设</p>
</body>
</html>
由此我们看出，文字间的间隔并未增加，而词与词之间的间隔变为了15px.
letter-spacing属性：
语法：
letter-spacing : normal | length
参数：
normal :默认间隔
length :由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位
说明：
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。
对应的脚本特性为letterSpacing。请参阅我编写的其他书目。
示例：
div {letter-spacing:0.5pt; }
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。
可以调整单词中每个字母（汉字）间的距离。
普通的字与字之间的间距可以用这个来控制实现。
设置letter-spacing为5px的情况：
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>word-spacing与letter-spacing在文字编辑中的应用</title>
<style type=”text/css”>
p {letter-spacing:5px;}
</style>
</head>
<body>
<p><a href=”http://blog.onlygrape.com/” target=”_blank”>CSS Web Design</a>onlygrape 网站 建设</p>
</body>
</html>
由此我们看出，单词间的间隔并未增加，而字母与字母，单个字与单个字之间的间隔变为了5px。
转自： http://blog.onlygrape.com/css-3/298
根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。
1、十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;
2、display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;
3、border:none;与border:0;的区别
和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;
4、不宜过小的背景图片平铺
一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片
5、IE的滤镜
IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。
6、*{ margin:0; padding:0;}避免浏览器样式差异
*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。
7、不要添加额外的标签来描述class或id
如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 - button#backButton { }
* 不赞成 - .menu-left #newMenuIcon { }
* 建议用 - #backButton { }
* 建议用 - #newMenuIcon { }
8、尽量选择最特殊的类来存放选择器
降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。
* 不赞成 - treeitem[mailfolder=”true”] > treerow > treecell { }
* 建议用 - .treecell-mailfolder { }
9、避免子孙选择符
子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。
* 不赞成 - treehead treerow treecell { }
* 好一点，但还是不行(参照下一条) - treehead > treerow > treecell { }
10、标签类中不要包含子选择符
不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）
* 不赞成 - treehead > treerow > treecell { }
* 建议用 - .treecell-header { }
11、留意所有子选择符的使用
小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。
* 不赞成 - treeitem[IsImapServer=”true”] > treerow > .tree-folderpane-icon { }
请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。
* 建议用 - .tree-folderpane-icon[IsImapServer=”true”] { }
转自： http://blog.onlygrape.com/css-prepared/397
如何有效的编写代码？这是许多网页制作者与开发者都关心的问题。合理的 CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然，样式表大小的缩减还能减少下载的时间。
一、排版：
1、关键词和操作符之间加适当的空格。
2、相对独立的程序块与块之间加空行
3、较长的语句、表达式等要分成多行书写。
4、划分出的新行要进行适应的缩进，使排版整齐，语句可读。
5、长表达式要在低优先级操作符处划分新行，操作符放在新行之首。
6、循环、判断等语句中若有较长的表达式或语句，则要进行适应的划分。
7、若函数或过程中的参数较长，则要进行适当的划分。
8、不允许把多个短语句写在一行中，即一行只写一条语句。
9、函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。
10、C/C++语言是用大括号‘{’和‘}’界定一段程序块的，编写程序块时‘{’和‘}’应各独占一行并且位于同一列，同时与引用它们的语句左对齐。在函数体的开始、类的定义、结构的定义、枚举的定义以及if、for、do、while、switch、case语句中的程序都要采用如上的缩进方式。
二、注释
1、注释要简单明了。
2、边写代码边注释，修改代码同时修改相应的注释，以保证注释与代码的一致性。
3、在必要的地方注释，注释量要适中。注释的内容要清楚、明了，含义准确，防止注释二义性。保持注释与其描述的代码相邻，即注释的就近原则。
4、对代码的注释应放在其上方相邻位置，不可放在下面。
5、对数据结构的注释应放在其上方相邻位置，不可放在下面;对结构中的每个域的注释应放在此域的右方;同一结构中不同域的注释要对齐。
6、变量、常量的注释应放在其上方相邻位置或右方。
7、全局变量要有较详细的注释，包括对其功能、取值范围、哪些函数或过程存取它以及存取时注意事项等的说明。
8、在每个源文件的头部要有必要的注释信息，包括：文件名;版本号;作者;生成日期;模块功能描述(如功能、主要算法、内部各部分之间的关系、该文件与其它文件关系等);主要函数或过程清单及本文件历史修改记录等。
9、在每个函数或过程的前面要有必要的注释信息，包括：函数或过程名称;功能描述;输入、输出及返回值说明;调用关系及被调用关系说明等。
三、命名
1、较短的单词可通过去掉“元音”形成缩写;
2、较长的单词可取单词的头几发符的优先级，并用括号明确表达式的操作顺序，避免使用默认优先级。
3、使用匈牙利表示法
四、可读性
1、避免使用不易理解的数字，用有意义的标识来替代。
2、不要使用难懂的技巧性很高的语句。
3、源程序中关系较为紧密的代码应尽可能相邻。
五、变量
1、去掉没必要的公共变量。
2、构造仅有一个模块或函数可以修改、创建，而其余有关模块或函数只访问的公共变量，防止多个不同模块或函数都可以修改、创建同一公共变量的现象。
3、仔细定义并明确公共变量的含义、作用、取值范围及公共变量间的关系。
4、明确公共变量与操作此公共变量的函数或过程的关系，如访问、修改及创建等。
5、当向公共变量传递数据时，要十分小心，防止赋与不合理的值或越界等现象发生。
6、防止局部变量与公共变量同名。
7、仔细设计结构中元素的布局与排列顺序，使结构容易理解、节省占用空间，并减少引起误用现象。
8、结构的设计要尽量考虑向前兼容和以后的版本升级，并为某些未来可能的应用保留余地(如预留一些空间等)。
9、留心具体语言及编译器处理不同数据类型的原则及有关细节。
10、严禁使用未经初始化的变量。声明变量的同时对变量进行初始化。
11、编程时，要注意数据类型的强制转换。
六、函数、过程
1、函数的规模尽量限制在200行以内。
2、一个函数最好仅完成一件功能。
3、为简单功能编写函数。
4、函数的功能应该是可以预测的，也就是只要输入数据相同就应产生同样的输出。
5、尽量不要编写依赖于其他函数内部实现的函数。
6、避免设计多参数函数，不使用的参数从接口中去掉。
7、用注释详细说明每个参数的作用、取值范围及参数间的关系。
8、检查函数所有参数输入的有效性。
9、检查函数所有非参数输入的有效性，如数据文件、公共变量等。
10、函数名应准确描述函数的功能。
11、避免使用无意义或含义不清的动词为函数命名
12、函数的返回值要清楚、明了，让使用者不容易忽视错误情况。
13、明确函数功能，精确(而不是近似)地实现函数设计。
14、减少函数本身或函数间的递归调用。
15、编写可重入函数时，若使用全局变量，则应通过关中断、信号量(即P、V操作)等手段对其加以保护。
七、可测性
1、在编写代码之前，应预先设计好程序调试与测试的方法和手段，并设计好各种调测开关及相应测试代码如打印函数等。
2、在进行集成测试/系统联调之前，要构造好测试环境、测试项目及测试用例，同时仔细分析并优化测试用例，以提高测试效率。
八、程序效率
1、编程时要经常注意代码的效率。
2、在保证软件系统的正确性、稳定性、可读性及可测性的前提下，提高代码效率。
3、不能一味地追求代码效率，而对软件的正确性、稳定性、可读性及可测性造成影响。
4、编程时，要随时留心代码效率;优化代码时，要考虑周全。
5、要仔细地构造或直接用汇编编写调用频繁或性能要求极高的函数。
6、通过对系统数据结构划分与组织的改进，以及对程序算法的优化来提高空间效率。
7、在多重循环中，应将最忙的循环放在最内层。
8、尽量减少循环嵌套层次。
9、避免循环体内含判断语句，应将循环语句置于判断语句的代码块之中。
10、尽量用乘法或其它方法代替除法，特别是浮点运算中的除法。
九、质量保证
1、在软件设计过程中构筑软件质量。代码质量保证优先原则
(1) 正确性，指程序要实现设计要求的功能。
(2) 稳定性、安全性，指程序稳定、可靠、安全。
(3) 可测试性，指程序要具有良好的可测试性。
(4) 规范/可读性，指程序书写风格、命名规则等要符合规范。
(5) 全局效率，指软件系统的整体效率。
(6) 局部效率，指某个模块/子模块/函数的本身效率。
(7)个人表达方式/个人方便性，指个人编程习惯。
2、只引用属于自己的存贮空间。
3、防止引用已经释放的内存空间。
4、过程/函数中分配的内存，在过程/函数退出之前要释放。
5、过程/函数中申请的(为打开文件而使用的)文件句柄，在过程/函数退出前要关闭。
6、防止内存操作越界。
7、时刻注意表达式是否会上溢、下溢。
8、认真处理程序所能遇到的各种出错情况。
9、系统运行之初，要初始化有关变量及运行环境，防止未经初始化的变量被引用。
10、系统运行之初，要对加载到系统中的数据进行一致性检查。
11、严禁随意更改其它模块或系统的有关设置和配置。
12、不能随意改变与其它模块的接口。
13、充分了解系统的接口之后，再使用系统提供的功能。
14、要时刻注意易混淆的操作符。当编完程序后，应从头至尾检查一遍这些操作符。
15、不使用与硬件或操作系统关系很大的语句，而使用建议的标准语句。
16、建议：使用第三方提供的软件开发工具包或控件时，要注意以下几点：
(1) 充分了解应用接口、使用环境及使用时注意事项。
(2) 不能过分相信其正确性。
(3) 除非必要，不要使用不熟悉的第三方工具包与控件。
十、代码编译
1、编写代码时要注意随时保存，并定期备份，防止由于断电、硬盘损坏等原因造成代码丢失。
2、同一项目组内，最好使用相同的编辑器，并使用相同的设置选项。
3、合理地设计软件系统目录，方便开发人员使用。
4、打开编译器的所有告警开关对程序进行编译。
5、在同一项目组或产品组中，要统一编译开关选项。
6、使用工具软件(如Visual SourceSafe)对代码版本进行维护。
十一、代码测试、维护
1、单元测试要求至少达到语句覆盖。
2、单元测试开始要跟踪每一条语句，并观察数据流及变量的变化。
3、清理、整理或优化后的代码要经过审查及测试。
4、代码版本升级要经过严格测试。
转自: http://blog.onlygrape.com/overflow-hidden/312
Overflow: hidden 的使用
引用:
overflow 版本：CSS2 兼容性：IE4+ NS6+ 继承性：无
语法：
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
overflow:hidden清除浮动
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<div id=”inside”></div>
</div>
这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验
#inside { float:left; width:600px; height:600px; background:red;}
可以看到，我给inside这个id加了一个浮动，我们常规的理解是，我们允许inside这个id的div的右边出现其他的内容，只要它的宽度不超过outside这个div和inside这个div的剩余值。
如果div outside中还包含其他的div，我不允许它出现在inside的右侧，我们则用样式clear:both指定这个div，不允许它浮动在inside右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当inside这个div的宽度和高度都大于outside这个div的时候，outside并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是500。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给outside这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出，给outside加上这个属性后，我们的inside的宽高自动的被隐藏掉了。另外，我们再做一个试验，将outside这个div的高度值删除后，我们发现，outside的高度自动的被inside这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！
也就是说，当inside这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了outside这个div，也就是说，此时的inside的宽高是多少，对于已经脱离了的outside来说，都是不起作用的。
当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给outside这个div加上overflow:hidden这个属性的时候，其中的inside等等带浮动属性的div的在这个立体的浮动已经被清除了。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给outside这个div设置高度的时候，inside这个div的高度，就会撑开outside这个div，而在另一个方面，我们要注意到的是，当我们给outside这个div加上一个高度值，那么无论inside这个div的高度是多少，outside这个高度都是我们设定的值。而当inside的高度超过outside的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
转自： http://blog.onlygrape.com/css-arc/362
一直做圆角的边框都是用图片来铺成的，这次尝试了下用CSS来制作圆角的边框，效果还是蛮不错的。
代码如下：
.arcaround {width:100%; height:auto;}
.arc, .abottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.acontent {display:block; background:#ccc; height:20px; border:0 solid #08c; border-width:0 1px;}
</style>
<div class="arcaround">
<b class="arc"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="acontent"></div>
<b class="abottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
效果如图：
转自： http://blog.onlygrape.com/css-bug/323
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在葡提子之前的技术文档中，也介绍了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的几种CSS BUG解决方法以及CSS BUG类的小技巧。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
IE6及其更低版本 * html {} IE7及其更低版本 *:first-child+html {} * html {} 仅针对IE7 *:first-child+html {} IE7和当代浏览器 html>body{} 仅当代浏览器(IE7不适用) html>/**/body{} Opera9及其更低版本 html:first-child {} Safari html[xmlns*=”"] body:last-child {}
要使用这些选择器,请将它们放在样式之前. 例如:
#content-box { 
}
width: 300px; height: 150px; 
}
四、给行内元素定义宽度
如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括：<span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素。
span { width: 150px; display: block }
五、让固定宽度的页面居中
为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
#wrapper { margin: auto; position: relative; }
六、IE6双倍边距的bug
给此对象加上display:inline即可解决问题。
七、图片替换技术
文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
HTML:
CSS:
h1 { background: url(heading-image.gif) no-repeat; } h1 span { position:absolute; text-indent: -5000px; } 你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.
关掉css,然后看看头部会是什么！
八、 最小宽度
IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了。
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:
<div class=”holder”>Content</div>
</div>
然后你需要定义外层div的min-width属性
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:
* html .container { border-right: 300px solid #FFF; } * html .holder { display: inline-block; position: relative; margin-right: -300px; }
As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.