1、摘要从 1990 年代初 HTML 被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着 HTML 的成长，为了满足设计师的要求， HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994 年哈坤利提出了 CSS 的最初建议。伯特波斯（ Bert Bos）当时正在设计一个叫做 Argo 的浏览器，他们决定一起合作设计 CSS。当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有
2、“层叠”的主意的。在CSS 中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 刚刚建立，W3C 对 CSS 的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。1997
3、年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。到2007 年为止，第三版还未完备关键词 css，div，css+div，发展，应用，css+div 发展 AbstractThis paper expatiate on KEY WORD one two目录第一章 概述 CSS+DIV .1第一节 DSS 发展历 史 1第二节 DIV+CSS 布局的优缺点 2第三节 DIV+CSS 与浏览器的兼容 2第四节 个人总结的关于 CSS+DIV 的八条学习方法 2第二章 详述 CSS+DI
4、V 网页布局 .2第一节 HTML 基础知识 .2第二节 CSS 基础知识 2第三章 CSS+DIV 应用（css 布局网站） .2第一节 准备 2第二节 操作 2结束语 3谢辞 4参考文献 51第一章 概述 CSS+DIV第一节 CSS 发展历史CSS 历史从 1990 年代初 HTML 被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着 HTML 的成长，为了满足设计师的要求， HTML 获得了很多显示功能。随着这些
5、功能的增加外来定义样式的语言越来越没有意义了。1994 年哈坤利提出了 CSS 的最初建议。伯特波斯（ Bert Bos）当时正在设计一个叫做 Argo 的浏览器，他们决定一起合作设计 CSS。当时已经有过一些样式表语言的建议了，但 CSS 是第一个含有 “层叠”的主意的。在CSS 中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈坤于 1994 年在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当
6、时 W3C 刚刚建立，W3C 对 CSS 的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996 年底，CSS 已经完成。1996 年 12 月 CSS 要求的第一版本被出版。1997 年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是 1998 年 5 月出版的第二版要求。到2007 年为止，第三版还未完备。 使用 CSS+DIV 的优点采用 CSS+DIV 进行网页重构相对与传统的 TABLE 网页布局而具有以下 3 个显著优势： 表现和内容相分离
7、将设计部分剥离出来放在一个独立样式文件中，HTML 文件中只存放文本信息。这样的页面对搜索引擎更加友好。 提高页面浏览速度 对于同一个页面视觉效果，采用 CSS+DIV 重构的页面容量要比TABLE 编码的页面文件容量小得多，前者一般只有后者的 1/2 大小。浏览器就不用去编译大量冗长的标签。 易于维护和改版 你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。 感性体验 CSS什么是 Cascading Style Sheets（层叠样式表） * CSS 是 Cascading Style Sheets(层叠样式表) 的简称 . * CSS 语言是一种标记语言 ,它不需要编译,可
8、以直接由浏览器解释执行(属于浏2览器解释型语言). * 在标准网页设计中 CSS 负责网页内容(XHTML)的表现. * CSS 文件也可以说是一个文本文件,它包含了一些 CSS 标记,CSS 文件必须使用 css 为文件名后缀. * 可以通过简单的更改 CSS 文件,改变网页的整体表现形式,可以减少我们的工作量 ,所以她是每一个网页设计人员的必修课. * CSS 是由 W3C 的 CSS 工作组产生和维护的. 如何将样式表加入到网页可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !importa
9、nt 声明。 链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css） ，然后使用 HTML 的 link 对象。示例如下：view plaincopy to clipboardprint?文档标题 文档标题 而在 XML 中，你应该如下例所示在声明区中加入： 定义内部样式块对象 (Embedding a Style Block) 你可以在你的 HTML 文档的 和标记之间插入一个.块对象。 定义方式请参阅样式表语法。示例如下：定义内部样式块对象 (Embedding a Style Block) 你可以在你的 HTML 文档的和标记之间
10、插入一个.块对象。 定义方式请参阅样式表语法。示例如下： view plaincopy to clipboardprint?文档标题 文档标题32第二节 CSS+DIV 布局的优缺点基于 WEB 标准的网站设计的核心在于如何使用众多 WEB 便准中的各项技术来达到表现与内容的分离，即网站的结构、表现和行为三者的分离。只有真正实现了结构分离的网页设计，才能真正意义上的符合 WEB 标准的网页设计。 一、传统表格布局的缺陷 传统表格布局方式实际上是利用表格元素具有无边框的特性。由于表格元素中可以显示表格的边框为 0，即不显示边框，因此可以在网页中的各个元素按版式划分放入表格的各个单元格中，从而实现
11、复杂的排版组合。 表格布局的代码最常见的是在 HTML 标签中间加入大量的设计代码，如width=100%，border=0 等，表格布局的混合代码就这样编写的。大量的样式设计代码混杂在表格和单元格中，使得可读性大大降低，维护成本也相对提高。尽管使用 DW 等网页制作工具进行可视化操作，但不可能帮助缩减代码或删除重复的代码。 复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。 二、CSS 布局 使用 CSS 布局可以从根本上解决表格布局带来的问题。 CSS 布局的重点不在
12、表格元素的设计上，而是采用另外一元素 DIV。DIV 可以理解为层或者是块。DIV 是一种比表格简单的元素，从语法上只有这样简单的定义。DIV 的功能仅仅是将一段信息标记出来用于后期样式的定义。通过使用DIV，可以将网页中的各个元素划分到各个 DIV 中，成为网页中的结构主体，而样式表现由 CSS 完成。 DIV 在使用时不再需要像表格一样通过单元格来组织版式，通过 CSS 强大的样式定义功能可以比表格更简单更自由地来控制页面版式和样式。 三、CSS 入门的几个误区 （一）不要用传统的表格思维来嵌套 DIV。CSS 布局就是将原来用 table 的地方用 DIV来替代，原来是表格嵌套，现在是
13、DIV 嵌套。这种观点是错误的。 使用 WEB 标准的目的是分离内容和表现。使用 CSS 布局，内容仅仅是一次罗列下来，只有结构，没有任何的样式。通过 CSS 样式定义每一块中的内容，才表现出来。这样制作的页面才是内容和表现分离，也就是说，当去掉 CSS 文件后，剩下的就只有内容。这样才能在手机、PDA 上阅读，才能随时修改 CSS 实现改版。 （二）不必为每块内容都建立 ID。我们知道内容都是有结构的，理解表现和结构相分离，相同的结构的内容我们可以用同一个样式来定义，比如相当级别的标题、正文和图片。对于多次引用的样式可以用 Class 来定义而不需要每个都用 ID；另外也不是说一定要用，也可
14、以使用 来代替，同样是块级元素，一样具有盒模型的 7 个参数，仅仅方便浮动。 3四、CSS 网页布局分类 1一列固定宽度。一列布局是所有布局的基础，也是最简单的布局形式，即一种固定宽度的布局样式。DIV 在默认状态下，宽度将占据整行的空间，因此当设置了宽度属性后，DIV 宽度将变为设置的宽度。 2一列自适应。自适应布局是网页设计中常见的布局形式。自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上 DIV 在默认状态下展区整行的空间，便是宽度 100%的自适应布局的表现形式。一列自适应布局
15、只需要将宽度由固定值改为百分比的形式即可完成。 CSS 的大部分数值作为参数的样式属性都提供百分比值。 Width（宽度）属性也不例外。如将宽度设置为 80%，则 DIV 的宽度就变为浏览器宽度的 80%，当浏览器窗口的大小调整时，其宽度还将维持在浏览器当前宽度比例的 80%。 3一列固定宽度居中。页面整体居中是网页设计中常见的形式，在传统表格布局中，我们可以使用表格的 align 属性来实现。DIV 本身也支持该属性，但在 CSS 布局中为了实现表格与内容分离，因此在设置居中属性时，通过 margin 属性来控制对象的上下左右四个方向的外边距。Margin 属性中可以直接使用数据，也支持“a
16、uto” ，即自动判断边距。如果将左右边距设置为 auto，浏览器就会将 DIV 左右边距设置为相同，从而实现居中效果。 4两列固定宽度。我们知道 DIV 用于对某一个区域的标识，两列的布局需要采用两个 DIV。两列固定宽度的实现需要新的属性 float。该属性用来控制对象浮动布局方式。 Float 是 CSS 布局非常强大的布局功能。也是理解 CSS 布局的关键问题所在。在 CSS中，包括 DIV 在内的任何元素都可以以浮动的方式进行显示。 浮动是一种非常先进的布局方式，它能够改变页面中对象的前后流动顺序，这样可以使内容的排版变得简单而且具有良好的伸缩性。 Float 属性有三个值，none
17、 表示对象不浮动。使用 left 时，表示右侧对象将流到当前对象左侧。使用 right 时，表示左侧对象将移动到当前对象的右侧。 要实现两列的布局的话，定义左栏和右栏中的 float 属性都为“left” 。这样右栏的内容将流入到左栏的右边，并根据左栏的宽度，自动流入并贴至左栏，而贴近的程度则由左栏的右边距和右栏的左边距来控制，不需要一栏对象本身的宽度值。 浮动式布局使得页面的大部分内容都可以由浏览器来自动调试之间的关系，使我们能够专注于样式设计而非其相互之间的浮动关系，我们只需要简单地设置浮动方向便可以完成对象的布局分布。 5三列浮动中间列宽度自适应。如果要求左栏和右栏固定宽度，中间栏需要在
18、左栏和右栏中间，并根据左右栏的宽度自动调整间距。需要实现这样的布局，就需要使用 position属性来定位。 将左栏的 position 设置为 absolute，并将 top 和 left 设置为 0px。将右栏的 position 设置为 absolute，并将 top 和 right 设置为 0px。将中间栏设置 margin 属性中 left 和 right 设置104px（该参数根据左右栏的宽度设置，只要略大于左右栏宽度即可） ，用于实现两边自适应宽度。第三节 CSS+DIV 与浏览器的兼容IE6、IE7、FF 与兼容性有关的特性4CSS HACK代码:所有浏览器 通用height:
19、 100px;IE6 专用_height: 100px;powered by IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7、FF 共用height: 100px !important（优先级）;一、CSS HACK以下两种方法几乎能解决现今所有 HACK.1, !important (不是很推荐，用下面的一种感觉最安全)随着 IE7 对!important 的支持, !important 方法现在只针对 IE6 的 HACK.(注意写法.记得该声明位置需要提前.)代码:#wrapper width: 100px!important; /* IE7
20、+FF */width: 80px; /* IE6 */2, IE6/IE77 对 FireFox *+html 与 *html 是 IE 特有的标签 , firefox 暂不支持.而*+html 又为 IE7 特有标签.代码:#wrapper width: 120px; /* FireFox */*html #wrapper width: 80px; /* ie6 fixed */*+html #wrapper width: 60px; /* ie7 fixed, 注意顺序 */注意:5*+html 对 IE7 的 HACK 必须保证 HTML 顶部有如下声明：代码:二、万能 float 闭
21、合(非常重要!) 可以用这个解决多个 div 对齐时的间距不对，关于 clear float 的原理可参见 How To Clear Floats Without Structural Markup将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class=”clearfix” 即可,屡试不爽.代码:/* Clear Fix */.clearfix:after content:“.“;display:block;height:0;clear:both;visibility:hidden;.clearfix display:inline-block;/* Hide from
22、 IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */三、其他兼容技巧(相当有用 )1, FF 下给 div 设置 padding 后会导致 width 和 height 增加, 但 IE 不会.(可用!important解决)2, 居中问题.1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容
23、加上 样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适6应.7, 关于手形光标. cursor: pointer. 而 hand 只适用于 IE.贴上代码 :兼容代码:hac
24、k 最推荐的模式。/* FF */.submitbutton float:left;width: 40px;height: 57px;margin-top: 24px;margin-right: 12px;/* IE6 */*html .submitbutton margin-top: 21px;/* IE7 */*+html .submitbutton margin-top: 21px;什么是浏览器 HACK：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写 CSS 的时候会很恼火
25、，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而 HACK 就是一种办法，能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！最近微软发布的 IE7 浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然 IE7 已经走向标准化，但还是有许多和 FF 不同的地方，所以需要用到 IE7 的HACK，有许多朋友问过 IE7 的 HACK 是什么，其实我也不知道。暂时还没找到 IE7 专用的 HACK。除了前面那片文章， 针对 firefox ie6 ie7 的 css 样式中的 hack 方式也是很好用的。有一点逻辑思想的人都会知道可以用 IE 和 F
26、F 的 HACK 结合起来使用，下面介绍三个HACK，例如：（适合新手，呵呵，高手就在这里路过吧。 ）程序代码第一个 HACK，IE FF 所有浏览器 公用（其实也不算是 HACK）height:100px;7第二个 HACK IE6 专用_height:100px;第三个 HACK IE6 IE7 公用*height:100px;介绍完了这三个 HACK 了，下面我们再来看看如何在一个样式里分别给一个属性定义 IE6 IE7 FF 专用的 HACK，看下面的代码，顺序不能错哦：程序代码height:100px;*height:120px;_height:150px;下面我简单解释一下各浏览器
27、怎样理解这三个属性：在 FF 下，第 2、3 个属性 FF 不认识，所以它读的是 height:100px;在 IE7 下，第三个属性 IE7 不认识，所以它读第 1、2 个属性，又因为第二个属性覆盖了第一个属性，所以 IE7 最终读出的是第 2 个属性 *height:120px;在 IE6 下，三个属性 IE6 都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2 个属性，所以 IE6 最终读取的是第三个属性。1 针对 firefox ie6 ie7 的 css 样式现在大部分都是用!important 来 hack，对于 ie6 和 firefox 测试可以正常显示，但是 ie7对
28、!important 可以正确解释，会导致页面没按要求显示！找到一个针对 IE7 不错的 hack 方式就是使用“*+html ”，现在用 IE7 浏览一下，应该没有问题了现在写一个 CSS 可以这样：#1 color: #333; /* Moz */* html #1 color: #666; /* IE6 */*+html #1 color: #999; /* IE7 */那么在 firefox 下字体颜色显示为#333，IE6 下字体颜色显示为#666，IE7 下字体颜色显示为#999。2 css 布局中的居中问题8主要的样式定义如下：body TEXT-ALIGN: center;#c
29、enter 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; 就
30、可以了。3 盒模型不同解释.#boxwidth:600px;/for ie6.0- width:500px;/for ff+ie6.0#boxwidth:600px!important/for ffwidth:600px;/for ff+ie6.0width /*/:500px;/for ie6.0-4 浮动 ie 产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下 IE 会产生 200px 的距离 display:inline; /使浮动忽略这里细说一下 block,inline 两个元素 ,Block 元素的特点
31、是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素 );Inline 元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的的效9果 diplay:table;5 IE 与宽度和高度的问题IE 不认得 min-这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度
32、。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;6 页面的最小宽度min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个 放到 标签下，然后为 div 指定一个类：然后 CSS 这样设计：#con
33、tainermin-width: 600px;width:e?xpression(document.body.clientWidth 9 属性选择器(这个不能算是兼容 ,是隐藏 css 的一个 bug)piddividpiddivid这个对于 IE6.0 和 IE6.0 以下的版本都隐藏,FF 和 OPera 作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如 pid中,所有 p 标签中有 id 的都是同样式的.10 IE 捉迷藏的问题11当 div 应用复杂的时候每个栏中又有一些链接， DIV 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，
34、当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout 使用 line-height 属性 或者给#layout 使用固定高和宽。页面结构尽量简单。11 高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或 paddign 时。例：p 对象中的内容CSS：#box background-color:#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; 解决方法：在 P 对象上下各加 2 个空的 div 对象 CSS 代码：.1height:
35、0px;overflow:hidden;或者为 DIV 加上 border 属性。屏蔽 IE 浏览器（也就是 IE 下不显示）*:lang(zh) select font:12px !important; /*FF,OP 可见*/select:empty font:12px !important; /*safari 可见*/这里 select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。仅 IE7 识别*+html 当面临需要只针对 IE7 做样式的时候就可以采用这个 HACK。IE6 及 IE6 以下识别* html 这个地方要特别注意很多地主都写了是 IE6
36、的 HACK 其实 IE5.x 同样可以识别这个HACK。其它浏览器不识别。html/*/ body select 这句与上一句的作用相同。仅 IE6 不识别12select display /*IE6 不识别*/:none;这里主要是通过 CSS 注释分开一个属性与值，流释在冒号前。仅 IE6 与 IE5 不识别select/*/ display /*IE6,IE5 不识别*/:none;这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。仅 IE5 不识别select/*IE5 不识别 */ display:none;这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别
37、盒模型解决方法selct width:IE5.x 宽度; voice-family :“; voice-family:inherit; width:正确宽度;盒模型的清除方法不是通过!important 来处理的。这点要明确。清除浮动select:after content:“.“; display:block; height:0; clear:both; visibility:hidden;在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的 HACK 来对父级做一次定义，那么就可以解决这个问题 。截字省略号select -o-text-
38、overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前 Firefox 并不支持。只有 Opera 识别media all and (min-width: 0px) select 针对 Opera 浏览器做单独的设定。以上都是写 CSS 中的一些 HACK，建议遵循正确的标签嵌套(div ul li 嵌套结构关系) ，这样可以减少你使用 Hack 的频率，不要进入理解误区，并不是一个页面就需要很多的 ha
39、ck来保持多浏览器兼容)，很多情况下也许一个 Hack 都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。IE5.x 的过滤器，只有 IE5.x 可见media tty icontent:“;/*“ “*/ import ie5win.css; /*“;/* */IE5/MAC 的过滤器，一般用不着/*/*/import “ie5mac.css“;13/*/下面是 IE 的条件注释，个人觉得用
40、条件注释调用相应 Hack 是比较完美的多浏览器兼容的解决办法。把需要 hack 的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被 Hack 的样式，这样不仅使用起来非常方便，而且对于制作这个 CSS 本身来讲，可以更严格的观察到是否有必要使用 hack，很多情况下，当我本人写 CSS 如果把全部代码包括 Hack 都写到一个 CSS 文件的时候的时候会很随意，想怎么 Hack 就怎么 Hack，而你独立出来写的时候，你就会不自觉的考虑是否有必要 Hack，是先 Hack CSS？还是先把主CSS 里面的东西调整到尽可能的不需要 Hack？当你仅用很少的 Hack 就让很多浏
41、览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选择了吧呵呵IE 的 if 条件 Hack 自己可以灵活使用参看这篇 IE 条件注释Only IE 所有的 IE 可识别只有 IE5.0 可以识别Only IE 5.0+ IE5.0 包换 IE5.5 都可以识别仅 IE6 可识别Only IE 7/- IE6 以及 IE6 以下的 IE5.x 都可识别Only IE 7/- 仅 IE7 可识别Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的hack，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的 CSS
42、让 IE6,Ie7,Firefox,甚至 Safari,Opera 运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的 Hack 少得可怜。其实你要知道 IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了hack 的办法，你就掌握了一切，我们并不是 Hack 的奴隶。div ul li 的嵌套顺序今天只讲一个规则。就是的三角关系。我的经验就是在最外面，里面是，然后再是，当然里面又可以嵌套 什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是 里面放 ，而不用的
43、时候，你会发现你的间隙十分难控制，一般情况下，IE6 和 IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变 IE 的 Margin，然后调整 Firefox 下面的14Padding，以便使得两者显示起来得效果很相似，但是你得 CSS 将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来 Hack 它们，但是你会烦得要命。具体嵌套写法遵循上面得嵌套方式， 然后在 CSS 里面告诉 ul Margin:0px;Padding:0px;list-style:none;，其中 list-style:no
44、ne 是不让 标记的最前方显示圆点或者数字等目录类型的标记，因为 IE 和 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的 IE6、和 IE7、Firefox 显示出来的东西 (外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完美了，不需要你通过调整大片的 CSS 来控制它们的显示了，你愿意，你可以仅仅hack 一两个地方，而且通常这种 hack 可以适应各种地方，不需要你重复在不同的地方调试不同的 Hack 方式减轻你的烦恼。你可以 ul.class1, ul.class2, ul.class3 xxx:xx
45、xx的方式方便的整理出你要 hack 的地方，而统一 Hack。尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS 的方式下你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！ 第四节 个人总结的关于 CSS+DIV 布局的八条学习方法CSS 网页布局，说难，其实很简单。说它容易，往往有很多问题困扰着新手，介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候，我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧，这些技巧显得很有用。一、若有疑问立即检测在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C 对于 XHTML 与CSS
46、都有检测工具可用，请见 http:/validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。二、使用浮动功能时记得适当清除指令浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。三、边界重合时利用 padding 或 border 来避免您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到 margin，那么很容易产生边界的重合。四、尝试避免同时对元素指定 pa
47、dding/border 以及高度或宽度15Windows 版 IE 经常导致 width 与 height 的计算问题。有些方法可以解决此问题，但如果母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用 margin,或者当子元素需要指定高度与宽度时，在母元素套用 padding 以达效果。五、不要依赖 min-width/min-heightWindows 版 IE 并不支援两种语法。但是在某种程度下， windows 版 IE 可以达到相当于 min-width/min-height 的效果，所以只要对 IE 做点过滤功能，即可达到您想要的结果。六、若有疑问，先减少百分比有时候某
48、些错误会使 50%+50%成为 100.1%，使网页出现问题。这时请尝试将这些值改为 49%，甚至 49.9%。七、记住“TRBL”写法border，margin 与 padding 的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left. 所以 margin:0 1px 3px 5px;的结果是上方无边界，右边 1 像素，以此类推。记住“TRBL” ，您就不会弄错次序了。八、只要不是零的值，都要指定单位第二章详述 CSS+DIV 网页布局第一节 HTML CSS 基础知识文档类型 语言编码 html 标签 css 样式 css 优先级 css 盒模型组成
49、1）文档类型当我们用 dreamweaver 新建一下 html 格式文档时，查看源代码，会发现代码最上部有如下这句话：这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对 XHTML 的解析比较宽松，允许使用 HTML4.01 中的标签，但必须符合XHTML 的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。2）语言编码接下来我们还会发现这样一句话：它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的 gb2312 告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是 UTF-8 编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的 css 样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。3）html 标签html 标签在页面中都必须结束。成对的标签
