�� css

标签: 〖css〗

CSS行高与行对齐精解：line-height 和 vertical-align （图文）

目录 css 日期 2009.05.07

7.3 line-height

行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。

(阅读全文…)

Comments (1)

CSS盒模型精解：width/padding/border/margin关系及浏览器兼容

目录 css 日期 2009.05.05

CSS盒模型

如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。

图1 盒模型图解

填充、边框和边界都分为“上右下左”四个方向，既可以分别定义，也可以统一定义。
CSS内定义的宽（width）和高（height），指的是填充以内的内容范围，因此一个元素：
实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度（width） + 右填充 + 右边框 + 右边界
实际高度 = 上边界 + 上边框 + 上填充 + 内容高度（height） + 下填充 + 下边框 + 下边界
例如有CSS定义如下：

#menu {
background: #9cf;
margin: 20px;
border: 10px solid #039;
padding: 40px;
width: 200px;
}

则其实际宽度如图2所示。

图2 元素总宽度的计算

而对于Windows IE 5.x及更前的版本，把这个盒模型的定义搞错了，它认为：
宽度（width）= 元素内容 + 填充 + 边框
这个确实很容易搞错，很多对于盒模型定义没有深入了解的人也同样容易犯这个错误。
例如：

#menu {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}

那么，在IE5.5中div实际内容的宽度将是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等浏览器内宽度则是200px。
这正是很多新手发现自己定义的页面在不同的浏览器内看会发生错位的原因之一。
因此就需要采取一定的弥补措施，一般可以避免同时定义元素的宽度和填充、边框，而将一些定义放到元素的子元素内定义。

如果必须同时定义这几个值，也可以使用一些手段来校正这个错误，即俗称的css hack，其基本思想就是为没有错误的浏览器提供一个正确的宽度值，而对IE5.5等有问题的浏览器提供另一个值。

例如如下的写法：

#menu {
padding: 5px;
width:110px;
voice-family: "\"}\"";
voice-family: inherit;
width: 100px;
}

定义中第一个width:110px，是IE 5.5认为的元素的宽度，100px+5px+5px。

voice-family: "\"}\"";
voice-family: inherit;

是CSS2.0中的语音属性，由于Windows IE5.5不完全支持CSS2.0，不识别此属性，因此跳到下一个选择符。但是其他浏览器（包括IE6）会继续解读下面的定义，由于css是“层叠”的，即对于同一个选择符的相同的属性，后面的定义会覆盖掉前面的定义，因此，对于其他的浏览器，#menu的宽度为最后的100px。

另一个常用的hack手法是使用!important（声明），声明加在CSS属性定义的后面，此条属性的级别将变成最高，即使后面有相同的定义也不会覆盖掉声明过的定义，不过IE不支持!important。

例如有如下css定义：

#box {
border: 1px solid #B51C8C;
width:768px;
}

而其修正方法如图3所示。

图3 针对IE修正CSS

对于支持!important的浏览器，将接受width:768px，而ie6虽然不支持!important，但是由于其无法解释“ /**/（空注释）”，因此会忽略后面的定义，而ie 5.5却会接受最后定义的width:770px，因此达到修正的目的。

关于盒模型，还有以下几点需要注意：

·对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图4所示。

图4 边界的压缩

注1. 块级元素（display: block）
每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。

·内联元素，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

注2. 内联元素（display: inline）
内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。

·边界值可为负，其显示效果各浏览器可能不相同。

·填充值不可为负。

·边框默认的样式（border-style）为不显示（none）。

——————————————————–

转自：http://hi.baidu.com/jikeytang/blog/item/277b7a3daa71c7c09e3d625d.html

发表评论

firefox浏览器下margin-top不起作用的原因和对策

目录软件经验日期 2009.04.30

现象：多个模块的页面，其中有一块的margin-top不起作用，在网上查了一下，下面这位同志和我状况一样：

今天不起作用出现的情况是，上面一个div含有浮动属性，如float:left；而紧接的一个div的margin属性为左右自动且含有上边距，如margin:20px auto 0;这种情况下，下面的这个div的margin-top:20px就不会起作用。

上面的div清除浮动，或下面的div定义浮动，可使这个在firefox，opera等浏览器下出现的问题解决。未独立出来验证，论述可能有误，大致正确。

我是将下面的DIV也添加了 float left 属性，问题马上解决了。

又看到一篇文章讲这个问题，也大致明白了原因是：

“在css2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”

文中还讲了折叠的条件和计算折叠量，感觉计算折叠量与我的实际情况不符，我遇到的情况是：无论设 margin-top 为多少，整个页面都没有任何变化，直到改了浮动属性。

引文较长，有兴趣的慢慢看吧。

————————————————————-

为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。
现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地，切莫浮躁。
在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、 padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。
在css2.1中，水平的margin不会被折叠。
垂直margin可能在一些盒模型中被折叠：
1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。
最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
2、相邻的和模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
4、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
5、设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
6、如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。
a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素布局时，border-top边界位置才是必需的。
7、根元素的垂直margin不会被折叠。
浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素（floated next in-flow block-level sibling）的margin-top相邻，除非那个同级元素使用了清除操作。
浮动的块级元素的margin-top和它的第一个浮动块级子元素（floated first in-flow block-level child）的margin-top相邻（如果该元素没有border-top，没有padding-top，并且子元素没有使用清除操作）。
浮动的块级元素的margin-bottom如果符合下列条件，那么它和它的最后一个浮动块级子元素的margin-bottom相邻（如果该元素没有指定padding-bottom或border）：
a、指定了height:auto
b、min-height小于元素的实际使用高度（height）
c、max-height大于元素的实际使用高度（height）
如果一个元素的min-height属性设置为0，那么它所拥有的margin是相邻的，并且它既没有border-top和border- bottom，也没有padding-top和padding-bottom，它的height属性可以是0或auto，它不能包含一个内联的盒模型（line box），它所有的浮动子元素（如果有的话）的margin也都是相邻的。
当一个元素拥有的margin折叠了，并且它使用了清除操作，那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠，但结果是它的margin将无法和其块级父元素的margin-bottom折叠。
折叠操作是以padding、margin、border的值为基础的（即在浏览器解析所有这些值之后），折叠后的margin计算将覆盖已使用的不同margin的值。
[复制此代码]CODE:
<div id="d0" style="background-color:#333333;height:500px;">
<br style="line-height:0;"/>
//不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示
<div id="d1" style="background-color:#000000;margin-top:20px;height:100px;"></div>
<div id="d2" style="background-color:#000000;margin-top:20px;height:100px;"></div>
</div>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/16357.htm

发表评论

IE6下文字溢出BUG的解决办法

目录学习笔记日期 2009.04.30

实验代码如下:

1、在IE、FF中测试，只在IE出现文字溢出现象。
说明：注释造成文字溢出是IE的BUG。
2、去除<div style="float:left"></div> 中的“float:left;”，你会发现多出来的“猪”字不见了，页面正常显示

同样去除 <div style="float:right;width:400px">中的“float:right;”，多余的“猪”字也同样消失，页面正常显示

说明：注释造成文字溢出与区块的浮动有关。
3、将注释转移到<div style="float:left"></div>前面，多余的“猪”字消失，页面正常显示

将注释转移到<div style="float:right;width:400px">↓这就是多出来的那只猪</div>下面，多余的“猪”字也同样消失，页面正常显示。

说明：注释造成文字溢出与其位置有关。（可与第2点结合理解）
4、去除<div style="float:right;width:400px">中的“width:400px”，多余的“猪”字消失，页面正常显示

说明：注释造成文字溢出与文字区块的固定宽度有关（无论是绝对值还是相对值）。
5、增加注释的条数：当1条注释时，则多出来1个字；2条注释时，则多出来3个字；3条注释时，则多出来5个字……

我们会从上面的规律中得到这样一个公式：溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。
当溢出的文字字数大于文本的字数时，文字区块将会消失。

说明：溢出的字数与注释的条数有关。
由1和2的测试得知：注释不要放置于2个浮动的区块之间。
解决方法：
1、不放置注释。最简单、最快捷的解决方法，嘿嘿……

2、注释不要放置于2个浮动的区块之间。

3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。

4、去除文字区块的固定宽度，与3有相似之处。

—————————————————————– 后续讨论：

注释的格式如果是这样就没有问题了
<!–>Put your commentary in here…<!–>

后来有查阅到其他文章提到type=hidden的input以及display:none的div也会导致文字溢出的BUG

在IE7有DOCTYPE就不会出现益出哦,就是这句了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

发表评论

我原意是要学DIV+CSS，无奈现在转行学 hack ：再转录一篇笔记

目录学习笔记日期 2009.04.30

部分原文出处 zhaozy in 3user.com = zergine in 蓝色其他不详

一、CSS Hack

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务.

我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11).

在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一.

IE系列: 程序代码selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别.
selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别.
selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别.
* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
html >body selector { property:value; } 在选择器上运用继承法 html >body selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
selector { property:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
selector { property:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
select { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.
*+html selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

Firefox: 程序代码*:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

Safari: 程序代码selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

Opera: 程序代码@media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.
以上的Hack并不完整,大家一起补充.

对Hack的运用,最普遍的是CSS盒模型Hack,清除浮动Hack.

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X: 程序代码selctor { width:IE5.X宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度; }

清除浮动Hack,相信这个定义用的人很多: 程序代码selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

里只例举了几个可以单独使用或者单独屏蔽的Hack,真正的Hack数量庞大,使用方法各式各样…

————————————————————————————–

二、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
<style>
/* Clear Fix */.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

发表评论

CSS对HTML标签的默认值

目录学习笔记日期 2009.04.30

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre
{display block;}

li { display list-item;}

head { display none }

table { display table }

tr { display table-row }

thead { display table-header-group }

tbody { display table-row-group }

tfoot { display table-footer-group }

col { display table-column }

colgroup { display table-column-group }

td, th { display table-cell; }

caption { display table-caption }

th { font-weight bolder; text-align center }

caption { text-align center }

body { margin 8px; line-height 1.12 }

h1 { font-size 2em; margin .67em 0 }

h2 { font-size 1.5em; margin .75em 0 }

h3 { font-size 1.17em; margin .83em 0 }

h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu { margin 1.12em 0 }

h5 { font-size .83em; margin 1.5em 0 }

h6 { font-size .75em; margin 1.67em 0 }

h1,h2,h3,h4,h5,h6,b,strong { font-weight bolder }

blockquote { margin-left 40px; margin-right 40px }

i,cite,em,var,address { font-style italic }

pre, tt, code,kbd, samp { font-family monospace }

pre { white-space pre }

button,textarea,input,object,select { displayinline-block; }

big { font-size 1.17em }

small, sub, sup { font-size .83em }

sub { vertical-align sub }

sup { vertical-align super }

table { border-spacing 2px; }

thead,tbody,tfoot { vertical-align middle }

td, th { vertical-align inherit }

s, strike, del { text-decoration line-through }

hr { border 1px inset }

ol,ul,dir,menu,dd { margin-left 40px }

ol { list-style-type decimal }

ol ul, ul ol,ul ul, ol ol { margin-top 0; margin-bottom 0 }

u, ins { text-decoration underline }

brbefore { content A }

before, after { white-space pre-line }

center { text-align center }

abbr,acronym { font-variant small-caps; letter-spacing 0.1em }

link,visited { text-decoration underline }

focus { outline thin dotted invert }

Begin bidirectionality settings (do not change)
BDO[DIR=ltr] { direction ltr; unicode-bidi bidi-override }
BDO[DIR=rtl] { direction rtl; unicode-bidi bidi-override }
[DIR=ltr] { direction ltr; unicode-bidi embed }
[DIR=rtl] { direction rtl; unicode-bidi embed }

@media print
{
h1 { page-break-before always }
h1,h2,h3,h4,h5,h6 { page-break-after avoid }
ul, ol, dl { page-break-before avoid }
}

发表评论

永远休止的浏览器兼容探索— IE8 正式版 CSS hack ：\9

目录学习笔记日期 2009.04.30

———————–
IE8正式版hack
———————–

"\9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.

如：.a {color:#f00; color:#f60\9; +color:#00FF00; _color:#0000FF; }
ff IE8 IE7 IE6

———————–
以前的总结
———————–

只针对ie6，ie7和firefox的csshack
注意都要写在正常样式的后边，除!important方法在前边
—————针对样式名————
如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用*+html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .head{color:#000;}

如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效
如果只是不让ff、IE8看见用*body .head{color:#000;} 即对ff、IE8无效

body>.head{color:#000} IE7 8 ff 有效

————-针对具体属性————–
如果只让ie6看见用_     .head{_color:#000;}
如果只让ie7看见用+与_结合的方法:     .head{+color:#f00;!;_color:#000;}
如果只是不让ie6看见用 /**/   .head{color /**/:#000;}注意有空格,或者用!important,写法: width:20px!important; width:50px;

如果只对ff无效/9 >.head{color:#000\9}

发表评论

让你的页面在ie6也能玩position:fixed

目录学习笔记日期 2009.04.29

原文：ttp://blog.sina.com.cn/s/blog_4ade97120100bkjo.html~type=v5_one&label=rela_prevarticle

(测试通过ie6,ie7,ff2,Opera9,Safari3)

原理

在浏览器中固定位置(悬停),是不是很酷啊,可惜我们的ie6却不支持,怎么办?写hack?写js(如果我只是一个css代码工人呢)? 是不是太麻烦了呢?如果你这样想想…(为什么会悬停呢?在浏览器外面不就可以了吗?).那我们是不是把html,body元素隐藏掉了,再用div(比如<div id=body>)元素伪装成body元素,再把要悬停的元素(比如div)写在id=body元素的外层,是不是留可以了呢?^_^’

实例

我们可以先新建一个页面,命名为fixed.html,下面写开始写css

html,body{height:100%; width:100%; overflow:hidden; margin:0} div#body{ position:relative; width:100%; height:100%; overflow-x:auto; overflow-y:scroll; background:#fff; cursor:default } div#fixed{ position:absolute; z-index:10; right:100px; bottom:100px; width:400px; height:300px; background:#000; color:#fff; text-align:center; line-height:300px }

xhtml

<div id="fixed"> 讨厌,我怎么不会动了啊? </div> <!-div id=body 为body---> <div id="body"> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> <p>test1</p> </div>

标准的,实用的(实在找不到形容词了!)…

我们给写个小小的hack,使它兼容各个浏览器吧?好,请看下面

 html,body{height:100%; width:100%; _overflow:hidden}

给你一个思路,你会发现什么呢? ^_^!

发表评论

Css Hack 汇总

目录学习笔记日期 2009.04.29

转自：http://www.phpchina.com/html/05/29605-25061.html

前言

每次要找个东西都得慢慢去翻自己收集的一些东西,每次都是那么花时间,再加上有时存放时间久远就忘了当时是存在哪了,为了方便查询及阅读,决定把一些Css Hack 收集起来…

1.区别不同浏览器，CSS hack写法：

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green!important;background:blue;

区别IE7与FF：

background:orange;*background:green;

区别FF，IE7，IE6：

background:orange;*background:green!important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

另外再补充一个，下划线"_",IE6支持下划线，IE7和FF均不支持下划线。

于是大家还可以这样来区分IE6，IE7，FF: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是FF的写在前面，IE7的写在中间，IE6的写在最后面。

2.!important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

<style>

#wrapper

{

width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */

}

</style>

3.IE6/IE7对FF

1.*+html 与 *html 是IE特有的标签, firefox 暂不支持.

而*+html 又为 IE7特有标签.

<style>

#wrapper

{

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */

}

</style>

2.表达方式：+property:value

测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2

测试结果：

IE5，IE6 ，IE7浏览器识别；

FF2.0，Opera 9，Safari 2浏览器不识别。

结论：我们可以用"+"来实现只有IE识别的CSS Hack。

比如我们要实现在IE中500px的宽度，而在其他浏览器480px的宽度，就可以通过"+" Hack来完成，如下：

#hack {

width:500px;

+width:480px; /*only IE*/

}

3.用于内联css

##wrapper {

height:20px; /*For Firefox*/

*height:25px; /*For IE7 & IE6*/

_height:20px; /*For IE6*/

}

5.IE7的hack

>body

html*

*+html这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。

6.IE6 不能识别

html/* */ >body #box { color: red; }IE6 字体不会变成红色

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

*:lang(zh) select {font:12px !important;}/*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/select:empty {font:12px !important;}/*safari可见*/

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

8.仅IE7与IE5.0可以识别

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

9.仅IE7可以识别

*+html select {…!important;}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

10.IE6及IE6以下识别

* html select {…}这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。html/**/ >body select {…}这句与上一句的作用相同。

11.仅IE6不识别，屏蔽IE6

select { display /*屏蔽IE6*/:none;}这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

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

select/**/ { display /*IE6,IE5不识别*/:none;}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5

13.仅IE5不识别，屏蔽IE5

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

14.盒模型解决方法

select {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}盒模型的清除方法不是通过!important来处理的。这点要明确。

15.盒模型解决方法

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

16.只有Opera识别

@media all and (min-width: 0px){ select {……} }针对Opera浏览器做单独的设定。

17.IE5.x的过滤器，只有IE5.x可见

@media tty {

i{content:"\";/*" "*/}} @import ‘ie5win.css’; /*";}

}/* */

18.IE5/MAC的过滤器，一般用不着

@media all and (min-width: 0px){ select {……} }针对Opera浏览器做单独的设定。

———————– 整理补充 ————————-

其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，无非就是一些if判断啦，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，下面来介绍一下使用方法吧。

<!–[if XXX]>
这里是正常的html代码
<![endif]–>
这里XXX是一些特定的东东，在此列表几个出来，详细介绍各自的含义：
<!–[if IE]> / 如果浏览器是IE /
<!–[if IE 5]> / 如果浏览器是IE 5 的版本 /
<!–[if IE 6]> / 如果浏览器是IE 6 的版本 /
<!–[if IE 7]> / 如果浏览器是IE 7 的版本 /
……

上面是几个常用的判断IE浏览器版本的语法，下面再来介绍一下相对比较少用的逻辑判断的参数：
有几个参数：lte，lt，gte，gt及!
各自的详细解释如下：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同，^0^
也写几条例句吧：

<!–[if gt IE 5.5]> / 如果IE版本大于5.5 /
<!–[if lte IE 6]> / 如果IE版本小于等于6 /
<!–[if !IE]> / 如果浏览器不是IE /
……

看到这里相信大家都已经明白了条件注释的用法了，OK，那来举个例子吧：

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if !IE]>
<!– 非IE下调用1.css样式表 –>
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]–>
<!–[if lt IE 6]>
<!– 如果IE浏览器版本小于6,调用2.css样式表 –>
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]–>

详细使用方法已经介绍完了，不得不提的一点就是：
条件注释是在IE5.0/Win以后才被IE支持的，对于IE5以前的浏览器是无效的，不过，应该没什么人还在使用IE4的版本了吧。^0^

——————- 这里有个新 hack: \9 ——————–

9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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=utf-8" />
<title>区别IE6、IE7、IE8、FireFox的CSS hack – www.52css.com</title>
<style type="text/css">
<!–
#test,#note{
margin:0 auto;
text-align:center;
}
#test {
width:200px;
height:30px;
border: 1px solid #000000;
color:#fff;
line-height:30px;
}
.color{
background-color: #CC00FF;   /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF;   /*IE6、IE7会变为蓝色*/
_background-color: #009933;   /*IE6会变为绿色*/
}
–>
</style>
</head>

<body>
<div id="test" class="color">测试方块 www.52css.com</div>
<div id="note">
<strong style="color:#009933">IE6</strong>
<strong style="color:#0066FF">IE7</strong>
<strong style="color:#FF0000">IE8</strong>
<strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>

发表评论

CSS的@规则（At-Rules）

目录学习笔记日期 2009.04.29

@import 语法

语法：
@import url (url) sMedia ;
说明：
url : 使用绝对或相对地址指定导入的外部样式表文件。请参阅link对象
sMedia : 指定设备类型。请参阅附录：设备类型。目前IE5.5尚不支持此属性
指定导入的外部样式表及目标设备类型。
该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
用此规则导入的样式表，其owningElement特性是一个link对象或style对象。请参阅我的其他著作。
导入的外部样式表中的定义将被文当中的同名定义覆盖。
示例：
@import url("foo.css") screen, print;
@import "print.css"

@page 语法

语法：
@page label pseudo-class { sRules }
说明：
label : 页标
pseudo-class : 伪类。:first | :left | :right
sRules : 样式表定义
设置页面容器的版式，方向，边空等。
页面容器包括页面内容区域和内容区域外围的边空补白区域。
示例：
@page thin:first { size: 3in 8in }

@fontdef 语法

语法：
@fontdef { url( url ) }
说明：
url : 使用绝对或相对地址指定嵌入HTML文档的字体定义文件
设置嵌入HTML文档的字体。
示例：
@fontdef url("http://www.example.com/sample.pfr");

@font-face 语法

语法：
@font-face { font-family : name ; src : url( url ) ; sRules }
说明：
name : 字体名称
url : 使用绝对或相对地址指定OpenType字体
sRules : 样式表定义
设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。
示例：
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

@charset sCharacterSet 语法

语法：
@charset sCharacterSet
说明：
sCharacterSet : 字符集名称
在外部样式表文件内使用。指定该样式表使用的字符集。请参阅附录：字符集。
在外部样式表文件内，此规则只允许发生一次。且必须在样式表的最前面。
对于内部样式表来说，其字符集由HTML文档的字符集指定。请参阅meta对象的content属性（特性）。
示例：
@charset "Shift-JIS";

(阅读全文…)

发表评论

CSS样式表中@import指令的应用：多个样式表组合使用

目录学习笔记日期 2009.04.29

当一个样式表变得很强大，以至于难于查找和编辑样式时，肯能就要创建多个独立的样式表了，每一个样式表提供一种独立的功能。你可以把用来格式化表格的样式放在一个样式表中，用于布局的样式放在另一个样式表中，决定东西颜色的样式放在第三个样式表中，另一个样式表用来存放你的Internet Explorer 修复，等等；要控制独立文件的数目，因为假设有30个外部css文件要处理的话，可能根本就节省不了时间了。

乍看之下，似乎最终在每张网页中会有更多的代码，因为你将有更多的外部样式表要链接或者导入。啊哈，有一种更好的方法：用@import指令创建一个单一的外部样式表来包括多个样式表。

建立这类样式表的步骤：

1.创建外部样式表来格式化网站中不同类型的元素
例如一个color.css文件带有控制网站颜色的样式，一个forms.css文件控制表格样式，一个layout.css文件用于布局控制，而一个main.css文件则涵盖了其他所有的东西。

2.创建一个外部样式表，并导入你在第一步中创建的每一个样式表
你可以命名这个文件为base.css、global.css、site.css或者像这样比较通用的名字。这个CSS文件不包含任何规则，而是利用@import指令来附上其他的样式表，像这样：

     @import ulr(main.css)
     @import ulr(layout.css)
     @import ulr(color.css)
     @import ulr(forms.css)

这是这个文件里面需要的唯一的代码，虽然你可能添加一些版本号、网站名称等注释来帮助辨别这个文件。

3.最后，用<link>标签或者@import方法，把来自第二步的样式表添加到网站的HTML页面
例如，<link rel="stylesheet" href="base.css" type="text/css" />，现在，当网页加载时，网页浏览器就会加载base.css，它会告诉浏览器依次加载4个其他的样式表。

这肯能感觉就像有一整批的加载正在进行，但是一旦浏览器下载了那些文件，并把它们保存在它的调整缓存中，就不必再次从因特网上重新获取了。

应用单一外部样式表来加载几个其他样式表的另一个好处是：如果你稍后决定进一步把你的样式表分成其他的样式表，那么你不一定要去弄乱网站的HTML。反之，只要再添加一个@import指令给那个门卫式的样式表。如果你决定把有关类型的所有样式从main.css文件中取出来把它们放在它们自己的type.css文件中，那么你不必碰网站的网页，只要打开它里面所有带@import指令的样式表，并在添加一个@import url(type.css)。

这种安排也让你使暂时的设计变化在不同的样式表中交换，来从网站中获得一些乐趣。假设你决定改变网站的颜色一天、一个月或者一个季度。如果你已经把定义颜色的主要样式放进一个独立的color.css文件中，那么你可以用一个不同的颜色组创建另一个文件（比如summer_fun.css）。那么，在那个门卫式的文件中，改变color.css文件的@import指令，加载这个新的颜色样式文件（例如@import url(summer_fun.css)）就可以了。

发表评论

CSS技巧：用@import还是link引入样式表？

目录学习笔记日期 2009.04.29

我们知道在网页中引用外部CSS有两种方式，即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗?

link

link就是把外部CSS与网页连接起来,具体形式

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件,具体形式

为什么使用@import

大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.

使用以下代码可以使IE6及以下的浏览器无法解析该CSS(IE6以下的属于年久失修在这里略去方法)

@import url(../style.css) screen;另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

如不明白,请进入这个页面,然后在Firefox中点击”查看-页面风格”.

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

04-11更新: @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

详情请参考http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

发表评论

-moz-border-radius CSS属性演示源代码：FireFox下圆角矩形

目录学习笔记日期 2009.04.26

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> -moz-border-radius demo – http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
body, pre
{
font-size: 0.9em;
font-family: verdana;
}
.moz-border-radiu
{
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
border: 4px solid #006600;
padding: 30px;
}
</style>
</HEAD>
<BODY>
<h1> -moz-border-radius 演示请用mozilla firefox打开本页 </h1>
<h4> -moz-border-radius 是 mozilla的特有CSS属性，可运用于制作圆角矩形。在CSS3中，也会有radius之类圆角的属性，而mozilla的这个CSS属性也是基于CSS3的。</h4>
<div class="moz-border-radiu">
<pre>
.moz-border-radiu
{
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
border: 4px solid #006600;
padding: 30px;
}
</pre>
</div>
<br/>
<div style="-moz-border-radius:10px;border:4px solid #003399;padding:30px;">
<pre>
-moz-border-radius:10px;
border:4px solid #003399;
padding:30px;
</pre>
</div>
</BODY>
</HTML>

发表评论

CSS z-index定位详解

目录学习笔记日期 2009.04.24

终于彻底明白 position及z-index的用法

static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置,

z-index：其实从字面上已经可以解释；z是从x、y以后的第三个轴，从网页上表现就是除了上下左右外的前后。
规定这个属性，首先要求Div必须是浮动的，z值越大，Div越靠前；数值可以不连续。

例如

转自：http://blog.sina.com.cn/s/blog_59f63def0100b3n4.html

发表评论

如何用CSS使DIV层水平/垂直居中?如何使图片/文本居中？

目录学习笔记日期 2009.04.23

CSS如何使DIV层水平居中
今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.
如何使DIV居中
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使图片在DIV 中垂直居中
用背景的方法。举例：

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194×79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
如何使文本在DIV中垂直居中
果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>

说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码全局和区域垂直居中

另一方法:

————————————————

关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。margin-left:auto;
margin-right:auto;

其实等同于：

margin:0 auto;

于是可以使用这种方式，但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。

＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞

非常多的人犯过类似的错误！这种方法也可以说屡试不爽，但是在某些情况下还是行不通的。于是有了第二种方法。

margin-left:50%;
left: -width/2;

这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。很好，已经有两种方法了，可以说已经能够解决你可能遇到的问题了。

有时候你会发现，这两个还不行。不能兼容一些浏览器。于是发现有了第三种方法，这中方法主要是考虑IE，它是建立在第一种方法的基础之上。它需要设置body。

body {text-align: center;}

这样IE下也居中了，但是它带来一个新的问题，你发现你的页面中所有文字都是居中的，这样很不好看。这个就很容易解决了，只需要在你的DIV定义中加上 text-align: left; 之类调整的设置就行了。

发表评论

用Div+CSS做三栏液态网页的float用法

目录学习笔记日期 2009.04.23

基本方法：基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。

三栏布局的一个例子：请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。

XHTML代码：

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text…
</div>
<div id="right">
    Starboard side text…
</div>
<div id="middle">
    Middle column text…
</div>
<div id="footer">
    Footer text…
</div>
</body>

CSS代码：

body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}

代码说明

HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。

div#header和div#footer样式（style）中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间。div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。

div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过你也可以把它的宽度设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中，float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而，如果这些div被其它div包含，那么float将会把它们挤压到包含它们的div的边缘。

在div#middle样式中，clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。

这个例子非常粗糙和简单，但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。

发表评论

CSS透明特效

目录学习笔记日期 2009.04.12

应用PNG图片的透明或半透明的特性能做出非常漂亮的网页来。Firefox和Opera对PNG的支持非常的好，都是IE却无视PNG图片这一特性的“存在”，虽然IE7已经支持都是IE6还是不行。查了一些资料，基本解决了这一问题，准备应用到PJskin上。
虽然有让IE6支持PNG透明背景的JS程序，都是不是很方便，还是用CSS来实现的好。使用到的就是：
IE5.5+的AlphaImageLoader滤镜

引用内容

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

了解了以上的内容，可以写一段简单的CSS代码（还不是完全正确的代码）：

引用内容

#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"
}

这段简单的CSS代码就可以在IE中正常的显示PNG透明背景，但是会发现在FF下不会出现背景，分析原因：
AlphaImageLoader滤镜只能被IE支持，FF是不支持该滤镜的
有些初次写的时候很多人会这样：
在代码中添加这样一段： background-image: url(bj1.png);
添加这样一段代码虽然能解决FF下的问题，都是IE又出现问题：新的背景会覆盖在滤镜的背景之上，导致滤镜显示无效，这时候就用到IE和FF对CSS读取的区别特性了：
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。代码如下：

程序代码

html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}

同时，我们通过只有IE才识别的通配符（*），来定义IE浏览器中的滤镜。代码如下：

程序代码

* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}

而#div1 {}就放一些IE和FF共用的设置来减少代码文件的大小。最终就是这样：

程序代码

#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
}
html>body #div1 {
background-repeat: repeat;background-image: url(bj1.png);
}
* #div1 {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png")
}

需要注意的是：AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId

发表评论

CSS的一般技巧

目录学习笔记日期 2009.04.11

原文作者：Roger Johansson

作者简介：住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名

原文出处：www.456bereastreet.com

原文发表时间：2005年3月15日

一.使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

二.明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

三.区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如：

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

可以写成

#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。

五.默认值

通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：

* {
margin:0;
padding:0;
}

六.不需要重复定义可继承的值

CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

七.最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中，你已经定义了元素p，又定义了一个class"update"

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。

八.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代码

样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

十.不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

background:url("images/***.gif") #333;

可以写为

background:url(images/***.gif) #333;

如果你加了引号，反而会引起一些浏览器的错误。

十一.组选择器(Group selectors)

当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

例如：定义所有标题的字体、颜色和margin，你可以这样写：

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：

h1 { font-size:2em; }
h2 { font-size:1.6em; }

十二.用正确的顺序指定链接的样式

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

十三.清除浮动

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：（图略）

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url("main.css");

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import "main.css";

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法
- (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
  html>body p {
  /* 定义内容 */
  }
- (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
  * html p {
  /* declarations */
  }
- (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
  /* \*/
  * html p {
  declarations
  }
  /* */
2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

十七.调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：

selector1,
selector2 {
property:value;
}

当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。

我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。

最后，关闭的大括号}单独写一行。

空格和换行有助与阅读。

发表评论

CSS em – 页面缩放

目录学习笔记日期 2009.04.09

一般来讲，我们都使用12px作为网站的主体字体大小。10px太小，眼睛很容易疲劳，14px虽容易看清，却破坏页面的美感。唯独12px在审美和视力方面都恰到好处(懒得设计)。

但有一个问题，在IE浏览器，我们无法通过“查看”菜单里的调整“文字大小”选项来缩放页面文字的大小。

在国内，目前大部分网站都采用了px作为字体大小单位，包括新浪、网易、搜狐以及业内知名的蓝色理想、站长站等。但是像MSN，Google等网站，在IE里却是可调的。

原因是什么呢？

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

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作为单位就行了。

em的特点：

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

网站CSS重写：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是 1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

特殊的12px汉字

由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。解决办法是在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。
本现象只发生在12px的汉字，英文不存在此现象。

本文来源：Fufu’s BLOG

发表评论

CSS自定义属性 Expression ，行为 behavior 及 .htc文件

目录学习笔记日期 2009.04.07

CSS自定义属性Expression 行为behavior
================================

实例讲解css中的行为：expression和behavior(附DEMO下载)

本文将通过实例讲解CSS中的expression和behavior的用法。但是需要注意的是：较多的使用css中的行为，会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。

结构、表现、行为，分离和联系

网页三要素——结构、表现、行为。这个大家都很清楚（如果你对此不是很熟悉，这里可以这样狭义的理解——结构就是HTML，表现就是CSS，行为就是JavaScript）。为了能写出高内聚、低耦合、可以重复使用，符合web标准的网页，将这三层分离开来是必不可少的，所以在HTML结构中直接写“style="……"”的做法是不提倡的。但是分开并不表示“一刀两断”，作为一个网页的三个组成部分，他们之间还必须保持着联系。例如，结构和表现，用css选择符联系着，而结构和行为用事件联系着。那表现和行为用什么联系着呢？其实联系他们之间的纽带就是我们今天要讲的css中的行为。

表现和行为的联系

好像很多的朋友都感觉：CSS和JavaScript之间有什么关系呀？好像没有必要保持什么联系吧？的确，在很多情况下，他们直接很少联系，甚至在有必要联系的情况下，也可以间接的转化为结构和行为之间的联系。而且，随着最新的浏览器对css2甚至css3的支持不断完善，结构和行为之间的联系也在不断的在弱化。但是，表现和行为之间的联系，在一些特殊处理，特别是在对IE5-IE6的特效兼容性上，却有着非常大的应用。

下面让我们来看个简单的例子——

<ul >

<li>我是一个列表项，来自http://justinyoung.cnblogs.com/</li>

</ul>

很简单，就是一个列表而已。现在我们想在这些列表上，实现一个用户体验更好的改变：当鼠标移到每个列表项上，这个列表的背景颜色高亮显示。对，很实用的一个改变而已。如果我没有猜错的话，你第一想到的应该是下面的代码——

<ul >

<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/</li>

</ul>

没有必要感到害羞，这没有什么错，而且完全实现了效果。只是，当boss说：“麻烦把其他页面的所有列表都实现这个效果”的时候，你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签，并在里面复制上两句代码绝对不是一个令人舒服的工作。

为什么不试试css中的expression。在公用的css样式表文件中，加入下面的样式，即可立刻实现对所有li标签的效果——

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>YES!B/S!文章示例页面</title>

/*** 为了便于演示，故将样式放在前台页面上 ***/

li{

star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})

}

</style>

</head>

<body>

<ul >

<li>我是一个列表项，来自http://justinyoung.cnblogs.com/</li>

</ul>

</body>

</html>

对，就是一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果，而且没有对前台结构做任何改变。

这就是expression的作用，一个轻量级的关于样式的行为方式的实现。

见鬼！又变了！

上面的效果真的不错，鼠标浮上去背景高亮显示的效果受到了顾客的好评。以至于顾客说：“这个效果真的不错，能不能给所有的表格单元、引用标签、超链接全部加上这种效果。” 为了满足顾客的兽欲，没有办法，咱只能改呀。于是，你对有td 、blockquote和a标签都加上了这玩意。这是你还多了一个心眼，为了防止顾客对li、td、blockquote和a要不同的高亮显示背景，你把他们分开写了。于是样式表中，非常壮观的出现了下面的代码——

li{

star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})

}

td{

star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})

}

blockquote{

star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})

}

star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})

}

顾客对你的反应速度赶到很满意，但是可惜的是：这个顾客只是一个小角色，真正需要的并不是他，而是他的上级BOSS点头，项目才可以验收。好在，那个上级顾客没有提什么过分的要求，只是说：“我希望高亮显示的颜色变成绿色，高亮的文字最好能变成红色，而且鼠标的样子要变成手指的样子！”

虽然那个小角色顾客一开始拍着胸脯说：“绝对不会变了，这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以，没有办法，我们也只能改了。这时候为了系统的可扩展性和可维护性，我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。

CSS中的behavior行为

CSS中的behavior也是表现和行为相联系的纽带。只是behavior相比expression更善于解决一些重量级的任务（例如在IE6中实现对透明PNG的支持，我们将在以后的文章中讲到）。

所以上面的需求，如果用behavior来实现的话，将会非常轻松。

先建一个htc文件，名字虽然命名，这就命名为"changeColor.htc"吧，内容很简单，会JavaScript的都能看懂——

<public:attach event="onmouseover" onevent="befor()" />

<public:attach event="onmouseout" onevent="after()" />

function befor(){

this.style.backgroundColor="#7FFFAA";

this.style.color="red";

this.style.cursor="pointer";

}

function after(){

this.style.backgroundColor="";

this.style.color="";

this.style.cursor="";

}

</script>

然后在通用的css文件中加入下面的样式，来引入htc文件——

li, td, blockquote,a { behavior: url("changeColor.htc") }

这样，就将样式和行为完全的分离开来了。以后那该死的顾客再要改变什么，只要在通用css或者htc文件中进行相应的修改即可。

expression和behavior的重要说明

1：只有IE才可以使用

css中的行为,expression和behavior只有IE才有效，FireFox无效，而且IE也只有IE5以上的版本才支持。

2：不推荐使用expression和behavior

在页面渲染的过程中，expression和behavior需要大量的计算，会大量地耗费客户端资源。所以不到迫不得已，请不要使用expression和behavior。

3：expression和behavior的现实意义

上面两点，好像已经判了expression和behavior死刑。其实，并不是，它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题（IE5已经基本退出市场，可以不用考虑）。例如：IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片，但是IE6却不能支持。这是IE6天生的缺陷，但是为了能让IE6也能够兼容我们的设计效果，那么这时候behavior便有了用武之地。

总的来说，expression和behavior在逐渐的没落，但是只要IE6还是浏览器市场上占有一席之地，expression和behavior就依然有着旺盛的生命力。

资源和Demo下载

资源和Demo下载列表

· 一个完整的可以运行的实例页面

· 一个完整的可以运行的实例demo下载

· 更多css中expression知识

.htc文件
=======

从5.5版本开始，Internet Explorer（IE）开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Web 行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML 行为库栏目里提供了几个定制的Web行为。我会在本文中讨论一个比较新的Web 行为：WebService行为。

Web 服务是通过一个开放的简单对象访问协议（SOAP）来传递参数和接收返回值，以便在Web上提供接口无关的软件服务的方法。在Internet上有许多例子和文章帮助你创建Web 服务并从传统的基于窗口表单的应用程序或者在服务器端来使用这些Web 服务，但是也可以使用WebService 行为也可以在客户浏览器上使用Web 服务。

从客户浏览器调用一个Web 服务的好处包括能够得到服务器更快的响应时间，结果是生成交互能力更强的页面并让用户用起来更高兴。与传统的将表单发回服务器然后接收一个新的页面不同的是（这个过程包括重新下载图片和其它的内容），WebService行为使用XMLHTTP在后台只发送和接收与事务处理过程相关的内容，然后这些内容又可以通过DHTML和脚本进行显示。

我所知道的目前支持Web 行为的唯一一个浏览器是IE；开发者们知道避免使用只能在IE上使用的功能。但是W3C在工作草案里有这个CSS的扩展以作为未来的标准。

如果你决定现在就使用Web 行为，你可以使用下面的JavaScript函数来检测客户端是否支持这个功能：

function canUseBehaviors() {

var ua = window.navigator.userAgent;

var msiePos = ua.indexOf(’MSIE’);

var msieVer = 0;

var behaviorsAvailable = false;

var iHandle = 0;

if (msiePos >= 0) {

msieMajorVer = parseInt(ua.charAt(msiePos + 5));

msieMinorVer = parseInt(ua.charAt(msiePos + 7));

if (msieMajorVer >= 5) {

if (((msieMajorVer == 5) && (msieMinorVer >= 5)) ||

(msieMajorVer > 5)) {

behaviorsAvailable = true;

}

return behaviorsAvailable;

}

使用上面的函数，你可以在运行时确定是否能够使用WebService 行为来调用Web 服务并使用IE的DHTML功能来显示结果或者是把这个表单发送给服务器让服务器来完成必要的操作，然后再次生成一个完整的页面。使用CSS语法来为一个元素添加WebService行为不会影响不支持特定CSS属性的浏览器。

微软提供了一个很好的参考，程序员可以用它更好的熟悉从客户端访问Web 服务。开发者还可以在微软的站点上找到必要的HTML 组件（*.htc）文件。

有了客户端工具包中的WebService行为，开发者们可以为Web 消费者创建更丰富更具交互性的页面，它们与使用大型主机提供的Web 服务或者基于表单窗口的应用程序的企业用户的功能是一样的。这将帮助消除冗余的代码并能通过为服务提供的特定功能提高响应时间来增强用户体验的快感。

发表评论

javascript操作CSS函数集

目录学习笔记日期 2009.04.07

用js实现的对css的一些操作方法，集合，方便需要用js控制css的朋友
//获取元素的真实的，最终的CSS样式属性值的函数
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
//两个确定元素相对于整个文档的X和Y位置的辅助位置
function pageX(elem){
return elem.offsetParent?
elem.offsetLeft+pageX(elem.offsetParent):
elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?
elem.offsetTop+pageY(elem.offsetParent):
elem.offsetTop;
}
//确定元素相对于父亲的位置的两个函数
function parentX(elem){
return elem.parentNode == elem.offsetParent?
elem.offsetLeft:
pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?
elem.offsetTop:
pageY(elem)-pageY(elem.parentNode);
}
//确定元素相对于它的CSS容器的位置
function posX(elem){
return parseInt(getStyle(elem,"left"));
}
function posY(elem){
return parseInt(getStyle(elem,"top"));
}
//设置元素x和y位置(与当前位置无关)的函数
function setX(elem,pos){
elem.style.left = pos+"px";
}
function setY(elem,pos){
elem.style.top = pos+"px";
}
//调整元素相对于当前位置的距离的函数
function addX(elem,pos){
setX(posX(elem)+pos);
}
function addY(elem,pos){
setY(posY(elem)+pos);
}
//获取元素当前的高度和宽度
function getHeight(elem){
return parseInt(getStyle(elem,’height’));
}
function getWidth(elem){
return parseInt(getStyle(elem,’width’));
}
//即是元素隐藏，也能分别获取它潜在的完整高度和宽度的两个函数
function fullHeight(elem){
if(getStyle(elem,’display’)!=’none’){
return elem.offsetHeight||getHeight(elem);
}
var old = resetCSS(elem,{
display:”,
visibility:’hidden’,
position:’absolute’
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old);
return h;
}
function fullWidth(elem){
if(getStyle(elem,’display’)!=’none’){
return elem.offsetWidth || getWidth(elem);
}
var old = resetCSS(elem,{
display:”,
visibility:’hidden’,
position:’absolute’
});
var w = elem.clientWidth || getWidth(elem);
restoreCSS(elem,old);
return w;
}
function resetCSS(elem,prop){
var old = [];
for(var i in prop){
old = elem.style;
elem.style = prop;
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style = prop;
}
}
//使用CSS的display属性来切换元素可见性的一组函数
function hide(elem){
var curDisplay = getStyle(elem,’display’);
if(curDisplay != ‘none’){
elem.$oldDisplay= curDisplay;
}
elem.style.display = ‘none’;
}
function show(elem){
elem.style.display = elem.$oldDisplay ||”;
}
//设置元素的透明度
function setOpacity(elem,level){
if(elem.filters){
elem.style.filters = ‘alpha(opacity=’+level+’)';
}else{
elem.style.opacity = level/100;
}
}

发表评论

如何制作横向菜单?

目录学习笔记日期 2009.04.03

WPMU 过滤样式代码，请将下面内容复制到你机子中存为test.html文件学习。

—————————————————————————————————————

<div id="author">作者：阿捷 2005-4-11 16:54:52</div>
<style type="text/css">
.test2 ul{list-style:none;}
.test3 ul{list-style:none;}
.test4 ul{list-style:none;}
.test5 ul{list-style:none;width:300px;}
.test3 li{float:left;}
.test4 li{float:left;width:100px;}
.test5 li{float:left;width:100px;}
.test6 ul{list-style:none;}
.test6 li{float:left;width:100px;}
.test6 a:link{color:#666;background:#ccc;text-decoration:none;}
.test6 a:visited{color:#666;text-decoration:underline;}
.test6 a:hover{color:#fff; font-weight:bold;text-decoration:none;background:#f00;}
.test7 ul{list-style:none;}
.test7 li{float:left;width:100px;background:#ccc;margin-left:3px;line-height:30px;}
.test7 a{display:block;text-align:center;height:30px;}
.test7 a:link{color:#666;background:#ccc;text-decoration:none;}
.test7 a:visited{color:#666;text-decoration:underline;}
.test7 a:hover{color:#fff; font-weight:bold;text-decoration:underline;background:#f00;}
.test8 ul{list-style:none;}
.test8 li{float:left;width:100px;background:#ccc;margin-left:3px;line-height:30px;}
.test8 a{display:block;text-align:center;height:30px;}
.test8 a:link{color:#666;background:url(images/arrow_off.gif) #ccc no-repeat 5px
12px;text-decoration:none;}
.test8 a:visited{color:#666;text-decoration:underline;}
.test8 a:hover{color:#fff;
font-weight:bold;text-decoration:none;background:url(images/arrow_on.gif) #f00 no-repeat 5px
12px;}</style>

<p>尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。</p>

<p>我们先来看一个菜单的例子，最终效果是:</p>

<p>然后我们来详细讲解步骤</p>

<h4>第一步：建立一个无序列表</h4>

<p>我们先建立一个无序列表，来建立菜单的结构。代码是：</p>
<span class="code"><ul>
<br /><li><a href="1">首页</a></li>

<h4>第二步：隐藏li的默认样式</h4>

<p>因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。</p>

<p>当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成：</p>
<span class="code"><div class="test"> <ul>
<br /><li><a href="1">首页</a></li>

<p>CSS定义为：</p>
<span class="code">.test ul{list-style:none;} </span>

<p>说明：“.test ul”表示我要定义的样式将作用在test的层里的ul标签上。</p>

<p>现在的效果是没有圆点了：</p>

<h4>第三步：关键的浮动</h4>

<p>这里是菜单变成横向的关键，我们给li元素加上一个“float:left;”属性，让每个li浮动在前面一个li的左面。</p>

<p>CSS定义为：</p>
<span class="code">.test li{float:left;} </span>

<p>看，菜单变横向了。就这么简单！下面需要做的就是优化细节了。</p>

<p>菜单都挤在一起不好看怎么办？我们来调节li的宽度。</p>

<p>在CSS中添加定义width:100px指定一个li的宽度是100px，当然你可以根据你的需要调整数值：</p>
.test li{float:left;width:100px;}

<p>如果我们同时定义外面div的宽度，li就会根据div的宽度自动换行，例如定义了div宽350px，6个li的总宽度是600px，一行排不下就自动变成两行：</p>
.test{width:350px;}

<h4>第五步：设置基本链接效果</h4>

<p>接下来，我们通过CSS来设置链接的样式，分别定义:link、:visited、:hover的状态</p>
<span class="code">.test a:link{color:#666;background:#CCC;text-decoration:none;}
<br />.test a:visited{color:#666;text-decoration:underline;}

<br />.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}

<h4>第六步：将链接以块级元素显示</h4>

<p>有朋友问，菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示。</p>

<p>同时我们微调了如下细节：</p>

<ul>
<li>用text-align:center将菜单文字居中； </li>

<li>用height:30px增加背景的高度； </li>

<li>用margin-left:3px使每个菜单之间空3px距离； </li>

<li>用line-height:30px;定义行高，使链接文字纵向居中； </li>
</ul>

<p>CSS定义象这样：</p>
<span class="code">.test a{display:block；text-align:center;height:30px;}
<br />.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;} </span>

<p>这样就漂亮多了吧。</p>

<h4>第七步：定义背景图片</h4>

<p>我们通常都会在每个链接前加一个小图标，这样导航更清楚。CSS是采用定义li的背景图片来实现的：</p>
<span class="code">.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
<br />.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;} </span>

<p>说明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写，表示背景图片是arrow_off.gif；背景颜色是#CCC；背景图片不重复"no-repeat"，背景图片的位置是左边距5px、上边距12px；</p>

<p>默认状态下，图标为arrow.off.gif，当鼠标移动到链接上，图标变为arrow_on.gif</p>

<p>现在css的完整代码是：</p>
<span class="code">.test ul{list-style:none;}
<br />.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}

<br />.test a{display:block;text-align:center;height:30px;}

<br />.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}

<br />.test a:visited{color:#666;text-decoration:underline;}

<br />.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;} </span>

<p>页面的完整代码是：</p>
<span class="code"><div class="test">
<br /><ul>

<p>好了，主要步骤就是这7步，立刻拷贝和修改代码试试，你也可以用CSS做横向菜单了！</p>

发表评论

Div+CSS布局入门教程[转]

目录学习笔记日期 2009.03.31

1 页面布局与规划
2 写入整体层结构与CSS
3 页面顶部制作之一
4 页面顶部制作之二
5 页面制作-用好border和clear

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
2、内容部分又可分为侧边栏、主体内容；
3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：

<div id="container">[color=#aaaaaa]<!–页面层容器–>[/color]
<div id="Header">[color=#aaaaaa]<!–页面头部–>[/color]
</div>
<div id="PageBody">[color=#aaaaaa]<!–页面主体–>[/color]
<div id="Sidebar">[color=#aaaaaa]<!–侧边栏–>[/color]
</div>
<div id="MainBody">[color=#aaaaaa]<!–主体内容–>[/color]
</div>
</div>
<div id="Footer">[color=#aaaaaa]<!–页面底部–>[/color]
</div>
</div>

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:100%}

/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。

关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：

1、请养成良好的注释习惯，这是非常重要的；

2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；

3、讲解一些常用的CSS代码的含义：

font:12px Tahoma；
这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；

margin:0px；
也使用了缩写，完整的应该是：

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
或
margin:0px 0px 0px 0px

顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，

另外还有以下几种写法：
margin:0px auto；
说明上下边距为0px，左右为自动调整；
我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。

text-align:center
文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。

background:#FFF
设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
background:#ccc url(’bg.gif’) top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left
表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/bottom/left/center
用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用
background:url(’bg.gif’) 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

4、如何使页面居中？

大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。

5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。

当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。

在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}

样式说明：

a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover {}

这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。

#container {width:800px;margin:10px auto}

指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。

接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：

我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。

到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？
因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

* 接下来的Banner部分还能使用GIF格式吗？
答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。

* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：

为什么要这么写呢，因为对菜单使用列表<li>形式，可以在以后方便对菜单定制样式。

而为什么要添加以下代码呢？
<li class="menuDiv"></li>
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。

然后我们在css.css中再写入以下样式：

/*页面头部*/
#header {background:url(logo.gif) no-repeat}

样式说明：
#header {background:url(logo.gif) no-repeat}
给页面头部分加入一个背景图片LOGO，并且不作填充。

这里，我们没有指定header层的高度，为什么不指定呢？

因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。

使用列表<li>制作菜单

开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。

这一节我将告诉大家如何用列表<li>来制作菜单。

以上是这部分的结构，有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。

如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。

另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input…等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

按照上面的介绍，我们先在css.css中写入以下代码：

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

解释一下：

#menu ul {list-style:none;margin:0px;}
list-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。

#menu ul li {float:left;}
这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。

到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：

这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10px

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：

现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px}

这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？
别忘了，我们早就已经留好了一个空的<li class="menuDiv"></li>，要想加入竖线就使用它了。
按照上面说的方法，我们再添加以下代码：

.menuDiv {width:1px;height:28px;background:#999}

保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。

不过，菜单选项的文字却在顶部，我们再修改成以下代码：

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

关于display:block;line-height:28px大家可以去参阅一下手册，我就不多讲了。

效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

这个也不多说了，没什么好说的了，最后的效果如下：

这一节到这里就完毕了，顺便把素材提供给大家：

发表评论

栏目
- css (2)
- Drupal (22)
- ECMS (9)
- Google 相关 (28)
- Pligg (2)
- TiddlyWiki (13)
- WAP (2)
- Win & DOS (9)
- Win Office (1)
- WordPress μ (25)
- 事故日志 (12)
- 代理域名 (27)
- 学习笔记 (91)
- 建站相关 (42)
- 资源资讯 (26)
- 软件经验 (38)
- 铭点项目 (7)
标签
.cn域名 Accessibility Baidu CMS css DOS DreamWeaver Dropbox Drupal ECMS Google Google Adsense Google广告 IE IPv6 MD5 MySQL PHP Pligg SNS TiddlyWeb TiddlyWiki WLW WordPress WordPress μ WPMU2.71 中国域名主题博客域名域名解析安装广播电台建站开源手机批处理搜索引擎教程文件类型浏览器源码病毒短网址软件
评论
管理
主站
- 语文芳草地
友站
加入本站

WPMU,Drupal,Google,建站笔记,软件经验

标签: 〖css〗

7.3 line-height

二、万能 float 闭合

三、其他兼容技巧

原理

实例

标准的,实用的(实在找不到形容词了!)…

一.使用css缩写

二.明确定义单位，除非值为0

三.区分大小写

四.取消class和id前的元素限定

五.默认值

六.不需要重复定义可继承的值

七.最近优先原则

八.多重class定义

九.使用子选择器(descendant selectors)

十.不需要给背景图片路径加引号

十一.组选择器(Group selectors)

十二.用正确的顺序指定链接的样式

十三.清除浮动

十四.横向居中(centering)

十五.导入(Import)和隐藏CSS

十六.针对IE的优化

十七.调试技巧：层有多大？

十八.CSS代码书写样式

栏目

标签

评论

管理

主站

友站

加入本站