DIVCSS基础教程.doc

DIV+CSS基础教程之CSS背景属性背景颜色属性(background-color)这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。body background-color:#99FF00;上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。背景图片属性(background-image)这个属性为HTML元素设定背景图片，相当于HTML中background属性。上面的代码为Body这个HTML元素设定了一个背景图片。背景重复属性(background-repeat)这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复 body background-image:url(./images/css_tutorials/background.jpg); background-repeat:repeat-y上面的代码表示图片竖向重复。背景附着属性(background-attachment)这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。body background-image:url(./images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed上面的代码表示图片固定不动，不随内容滚动而动。背景位置属性(background-position)这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。body background-image:url(./images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。背景属性(background)这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。body background:#99FF00 url(./images/css_tutorials/background.jpg) no-repeat fixed 40px 100px上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。DIV+CSS基础教程之CSS常用文本属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下：.p2 text-align:right文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值：none (无，缺省值) underline(下划线) overline (上划线) line-through (当中划线) 示例代码如下：.p2 text-decoration: underline文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法：length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象宽度的百分比) 示例代码如下：.p1 text-indent: 8mm行高属性(line-height)这个属性设定每行之间的距离。其值有以下设定方法：normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px) percentage (百分比，相当于父对象高度的百分比) 示例代码如下：.p1 line-height:1cm字间距属性(letter-spacing)这个属性用来设定字符之间的距离。normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px) 示例代码如下：.p1 letter-spacing: 3mm颜色属性(color)用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下：.p1color:grayDIV+CSS基础教程之CSS字体属性字体名称属性(font-family)这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：.s1 font-family:Arial字体大小属性(font-size)这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：.s2 font-size:16pt字体风格属性(font-style)这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：.s1 font-sytle:italic字体浓淡属性(font-weight)这个属性常用值是normal和bold，normal是缺省值。例句如下：这段文字字体的浓淡属性(font-weight)值是bold。字体变量属性(font-variant)这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：.s1 font-variant:small-caps字体属性(font)这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：.s1 font:italic normal bold 11pt arial字体颜色(color)字体颜色用CSS中的color属性来表示。参见CSS常用文本属性。DIV+CSS基础教程之CSS语法基本语法一个样式(Style)的语法由三部分构成：Selector(中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。selector property: value举个例子，下面的代码p就是selector，color就是属性，blue就是属性值。p color:blueHTML中所有的Tag都可以作为selector。注：如果你想为Style加多个属性，在两个属性之间要用分号加以分隔。下面的Style就包含2个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。p text-align:center;color:red 为了提高Style代码的可读性，你也可以分行写：ptext-align: center;color: black;font-family: arial 组合(Grouping)你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。h1,h2,h3,h4,h5,h6 color: red上面的例子是将所有正文标题(到)的字体颜色都变成红色。Class Selector利用Class Selector，你可以用同样的HTML Tag构成不同的样式。比如说，你希望段落有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：p.right text-align:rightp.center text-align:center其中right和center就是两个class。然后你就可以引用这两个class，示例代码如下：这一段居中显示。这一段是居右显示。你也可以不用HTML Tag，直接用.加上Class名称作为一个Selector。示例代码如下：.center text-align: center 这种通用的Class Selector就没有Tag的局限性，可以用于不同的Tag。比如：这个标题居中显示。这个段落居中显示。Contextual Selector你可以为嵌入其它Tag的Tag定义样式，示例代码如下：pemcolor: redEm这个Tag嵌套在P里面。p em就叫做Contextual Selector，定义嵌套于P里的Em的样式。这个例子表示，在P里面的用Em这个Tag标记的字体颜色是红色。CSS注释为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。/*段落样式 */ptext-align: center;/*居中显示 */color: black;font-family: arial DIV+CSS基础教程之CSS(Cascading Style Sheets)简介CSS(Cascading Style Sheets)简介当初一帮技术人员想出HTML，主要侧重于定义内容，比如表示一个段落，表示标题，而并没有过多设计HTML的排版和界面效果。随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet) 内嵌样式(Inline Style)Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。这个Style定义里面的文字是20pt字体，字体颜色是红色。显示示例内部样式表(Internal Style Sheet)内部样式表是写在HTML的里面的。内部样式表只对所在的网页有效。H1.mylayout border-width:1; border:solid; text-align:center; color:red 这个标题使用了Style。这个标题没有使用Style。显示示例内部样式表(Internal Sytle Sheet)要用到Style这个Tag，写法如下：.外部样式表(External Style Sheet)如果很多网页需要用到同样的样式(Styles)，用什么方法呢？将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。比如可以用文本编辑器(NotePad)建立一个叫home的文件，文件后缀不要用.txt，改成.css。文件内容如下：H1.mylayout border-width: 1; border: solid; text-align: center;color:red然后你建立一个网页，代码如下： 这个标题使用了Style。这个标题没有使用Style。显示示例使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点：样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。 串联(Cascading)CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。Cascading的顺序是：浏览器缺省(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内嵌样式表(Inline Style)(优先级最高) 样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt，那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。CSS教程：弄懂闭合浮动元素按照CSS规范，浮动元素(floats)会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的(而且通常是无语义的)标签，所以我个人不大喜欢。 后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。 再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理(具体就是触发layout)，不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。 在使用 overflow 之前还有过一种使用 float 的方法，就是让父容器也浮动，这利用到了浮动元素的一个特性浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素，但原理却是不同的，IE/Win 中 float 触发了 layout 因而闭合了浮动，而在标准兼容浏览器中，float 其实和上一种方法中的 overflow 原理一样，产生了一个“块级格式化范围”这是CSS 规范中提到的一种现象，它往往具有某种独立性，特性之一就是会自动闭合内部的浮动元素。 按照规范，以下类型的元素会产生一个块级格式化范围： 浮动元素，left 或者 right 皆可。 绝对定位的元素。 inline-block 元素，不过这个 gecko目前不支持。 table-cell 类型元素，其实 table, table-head-group, table-row 什么的也都可以，还有inline-table(gecko不支持)也同样，因为他们都会间接产生一个匿名的 table-cell。 overflow 取值非 visible 的元素。 所以，原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素，而且只需要 CSS，无需其他。顺带说一下以上除了overflow，其余都有一个附加效果就是自动收缩父容器宽度。 而对于 IE/Win，它有一套自己的体系，就是 layout，具有 layout 的元素会自动闭合浮动元素，再来看看触发 layout 的 CSS 属性，会发现和上面的块级格式化范围有很多类似之处： 浮动元素 绝对定位元素 display:inline-block zoom width/height overflow/overflow-x/overflow-y IE7 新增 max/min-width/height IE7 新增 以上来看 IE 中闭合浮动元素的方法也不少，自然也都有其局限性，要么有附带效果，要么使用的是非标准属性(无法通过验证)。 还要提一点的是 display:inline-block，这个属性对 IE 而言本身没什么用，实际效果只是给一个元素暗地添加了 layout，但是标准兼容浏览器是认得这个属性的，所以要不影响这些浏览器，需要将 display 设回默认。这里 IE 有一个 bug，如果先定义了 display:inline-block，然后再将 display 设回 block(这两个 display 要先后放在两个 CSS 声明中才有效果)，那么 layout 不会消失，同时也不会影响其他浏览器，所以目前来说，这也算一个不错的触发 layout 的方法： .gainlayoutdisplay:inline-block; .gainlayoutdisplay:block; 所以要跨浏览器闭合浮动元素，可以选择的方式还是很多的，如何搭配使用这些 CSS 属性就要具体情况具体分析了，灵活应用条件注释也很有必要，要是实在不行我们回过头来还有 clear 可以用嘛。 根据分辨率不同调用不同的css文件 =1) var IE1024=; var IE800=; var IE1152=; var IEother=; ScreenWidth(IE1024,IE800,IE1152,IEother) else if (window.navigator.userAgent.indexOf(Firefox)=1) file:/如果浏览器为Firefox var Firefox1024=; var Firefox800=; var Firefox1152=; var Firefoxother=; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) else file:/如果浏览器为其他 var Other1024=; var Other800=; var Other1152=; var Otherother=; ScreenWidth(Other1024,Other800,Other1152,Otherother) function ScreenWidth(CSS1,CSS2,CSS3,CSS4) if (screen.width = 1024) & (screen.height = 768) setActiveStyleSheet(CSS1); else if (screen.width = 800) & (screen.height = 600) setActiveStyleSheet(CSS2); else if (screen.width = 1152) & (screen.height = 864) setActiveStyleSheet(CSS3); else setActiveStyleSheet(CSS4); function setActiveStyleSheet(title) document.getElementsByTagName(link)0.href=style/+title; file:/- 【解 释】：var IE1024=;var IE800=;var IE1152=;var IEother=;引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。var Firefox1024=;var Firefox800=;var Firefox1152=;var Firefoxother=;引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。var Other1024=;var Other800=;var Other1152=;var Otherother=;引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。不判断分辨率，只判断浏览器应E.Qiang提议，编如下代码。实现根据浏览器类型自动调用不同CSS。代码： =1) file:/如果浏览器为IE setActiveStyleSheet(default.css); else if (window.navigator.userAgent.indexOf(Firefox)=1) file:/如果浏览器为Firefox setActiveStyleSheet(default2.css); else file:/如果浏览器为其他 setActiveStyleSheet(newsky.css); function setActiveStyleSheet(title) document.getElementsByTagName(link)0.href=style/+title; file:/- 解 释：如果浏览器为IE，则调用default.css如果浏览器为Firefox，则调用default2.css如果浏览器为其他，则调用newsky.css用法：放在中即可。Dreamweaver编写CSS应该学会的技巧在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于可视化和操作简便,使用的朋友依然很多，今天罗列一些“最佳习惯”，希望对这些朋友有所帮助。 CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求，Macromedia DW 8引进了一些新的及改善过的CSS相关的特性。有了这些新的特性，你可以为未来的更新作好计划，开发与W3C标准更加兼容的站点。本文讨论在DW 8中使用CSS以及突出某一特定CSS特性时的一些建议。 一般地讲，样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS： 代码式(Inline)：写入到代码中的一次性的样式。 内嵌式(Embedded)：可控制一个页面中所有元素的样式表 外联式(External)：可控制许多页面中的元素的样式表 事实上，许多站点都根据需要把这三种方式结合起来使用。 在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器，基于电视的浏览器以及Palm pilot和TTY(teletypewriter，远程打字机)一类的手持设备。 最佳习惯是指什么？ 大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于： 1：增加站点的寿命 不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。 2：让你的站点对所有的用户以及浏览器都适用。 有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。 3：让站点更新和维护更加轻松。 使用方式得当的话，CSS可让你在一个页面中的调整快速应用到所有页面中去。 你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时，对不同样式表的分析如下： Inline CSS：简单地说，你应该尽量避免使用。除了一些其他的缺点之外，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”)，或者为了使用某个DHTML特效，它需要使用Inline 样式的#106avascript来改变一个对象的属性。 Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响。在更新的过程中，如果某一个页面丢失，将会使站点的风格不一致；另外，当用户浏览你的站点时，每一页都要下载一次样式表信息。 External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格；提纲挈领，更改一次，轻松更新所有相关页面；让你的页面体积更小，浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。 在DW 中创建CSS样式表 在DW MX中创建CSS样式表时(Text CSS Style New style sheet)，在弹出的对话框中，你有两个选择：新样式表文档(New Style Sheet File) 和只用于当前页(This Document Only)。选中“New Style Sheet File ”你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置；另外一个选项，This Document Only，则会直接把相关代码写入到页面的部分。 你也可以在“新样式(New style)”对话框中选择一个现存的样式表来编辑或添加新的定义。 应该连接到External CSS还是导入？ 创建外部样式表以后，你需要把它附加在每个页面上(或是模板)。要这样做，可以在CSS面板上淡季“附加样式表(Attach Style Sheet)”按纽，此时会弹出连接外部样式表 (Link External Style Sheet)对话框，在上面可以浏览到你的目标样式表的名字，找到以后，你可以选择连接(link) 或者导入(import )此外部样式表。 连接是最常用的方式，选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记： 所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape 4.x)也能“看到”这个样式表的话，就要采用下面的方法。 如果你选择“导入”选项，所用的标记为： NetSscape4会完全忽略导入的CSS，而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能，不必担心浏览器的兼容性问题了。 CSS属性检查器 在DW MX的属性检查器中可以轻易切换到CSS模式。缺省情况下，属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”，你就可以看到目前可用的CSS样式表，而不是字体标签列表。 同时，你也可以轻松切回到HTML模式。 现成的CSS样式表 DW MX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File New，在弹出的新文档对话框中选择选中CSS style sheets，在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯，选择一个标记为“Accessible”的。 将文档保存在站点文件夹内，然后就可以用上述的方法来把CSS附加在你的文档中了。 设计时间样式表(Design Time style sheets) DW MX的这一特性可以让你在设计视图下工作时将样式表应用到页面，让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲，这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述)，附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时，你可以轻松更改为另一个样式表。 对于要将CSS应用于服务器端(比如ASP, PHP, or ColdFusion)或是要在客户端通过#106avascript来存取的开发者来说，设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中，这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果，所以你可在DW MX中以可视界面工作。另外一个好处就是当你上传站点文件时，你不必再检查整个站点寻找冗余的样式表了。 验证 无论你是自己创建样式表还是编辑现有的样式表，验证可以确保你不会误用不标准的标签或错误的代码。DW MX本身不包含CSS验证程序，你可以使用W3C站点提供的验证服务。在DW MX内你可以验证HTML 或DHTML标签( File Check Page Validate Markup (for HTML) 或 File Check Page Validate as XML for XHTML.)。在开发基于CSS的站点时，DW MX提供了很多辅助工具。有了MW MX的帮助，再加上对CSS良好的理解，你就可以开发出能经受时间考验的站点了。CSS技巧！像table一样布局div下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。其实有个简单的方法，使用display:table, display:table-row and display:table-cell 就可以实现，而且高度小的容器会自适应那些高度相对较高的，但是IE不支持这个属性，我们先不用去责备IE，相信以后会有所改善的。这里我制作了一个模型。先看看xhtml的结构： 很简单不用解释就能看懂，但是这里给出一个table的结构，是不是很相似 下来是css： .equal display:table; border-collapse:separate; .row display:table-row; .row div display:table-cell; .row .one width:200px; .row .two width:200px; .row .three 解释：1.dispaly:table;让层.equal作为块级元素的表格table显示，也就是将他作为一个表格2.border-collapse:separate;边框独立，就像表格没有合并单元格以前3.display:table-row;将.row作为表格行tr显示4.display:table-cell;将.row的下级div作为表格单元格td显示5.然后定义宽度这里还使用了 border-spacing:10px;来区别几个盒子，正如上面所陈述的，IE下不能正常显示，但是在：Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.上面的问题就是，这个模型对IE来说等同于垃圾，所以基本只能是做来玩玩而已，没有什么实际的用处，现在我要做的就是，让它也能在IE下更好的显示,所以我又做了第二个模型xhtml结构类似第一个模型 的只是增加一个新的div给IE 给xhtml增加一个判断，判断是否为IE，然后给IE一个特殊待遇，在IE显示和别的浏览器不同的代码，对于这个判断IEMAC优先选择显示其间的内容。然后在CSS中也增加一个判断，配合xhtml,用浮动对齐（浮动对齐就不用解释了）的方式来实现容器的等高并排放置，但是还是无法真实的实现等高，你可以采用添加背景颜色的视觉错觉来实现视觉上的等高，或者采用别的方法，这里就不进行说明了。下面是CSS中的代码 .equal, .row display:block;.row padding:10px;.row div display:block; float:left; margin:0;.row .two margin-left:10px;.row .three width:160px; float:right;.ieclearer float:none; clear:both; height:0; padding:0; font-size: 2px; line-height:0; 到此，整个设计真正的完成了，虽然不够完美，对非IE而做出努力显得有点多余，现在要么IE支持第一个模型，要么我们可能会想出更好的方案来。但是这次尝试是有价值的。高手传授十八般CSS技巧一、使用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 */ 这