DIV+CSS网页布局方法探析

Ｄ　Ｉ　Ｖ＋ＣＳ　Ｓ网页布局方法探析　

李艳梅杨俊　

（云南爱因森软件职业学院　昆明６５１７０１）　

摘要如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的ＴＡＢＬＥ网页布局由于其庞大的ＨＴＭＬ代　

码，使得其在搜索引擎方面显得有些无能为力，而用ＤＩＶ＋ＣＳＳ进行网页布局具有代码精简的优点使得其在这方面又体现出更多　

的优势。但是又由于ＣＳＳ对不同浏览器存在兼容性问题，所以对于初学者来说，在使用ＤＩＶ＋ＣＳＳ进行网页布局过程中可能会遇到　

各种问题，本文就给大家探讨几点ＤＩＶ＋ＣＳＳ布局的技巧。　

关键词ＤＩＶ＋ＣＳＳ网页布局浏览器兼容性　

中图分类号ＴＰ３１１．５　文献标识码Ａ　文章编号１００３１７—５３１７　

Ｐｒｏｂｅ＆Ａｎａｌｙｓｉｓ　ｏｎ　ｔｈｅ　Ｍｅｔｈｏｄ　ｏｆ　ＤＩＶ＋ＣＳＳ　Ｐａｇｅ　Ｌａｙｏｕｔ　

Ｌｉ　Ｙａｎｍｅｉ　Ｙａｎｇ　Ｊｕｎ　

（Ｙｕｎｎａｎ　Ｅｉｎｓｕｎ　Ｓｏｆｔｗａｒｅ　Ｃｏｌｌｅｇｅ　Ｋｕｎｍｉｎｇ　６５　１　７０１）　

Ａｂｓｔｒａｃｔ　Ｎｏｗａｄａｙｓ，Ｗｅｂ　ｄｅｓｉｇｎ　ｉｓ　ｍｏｒｅ　ｃｏｎｓｉｄｅｒｅｄ　ｉｎ　ｔｈｅ　ｓｅａｒｃｈ　ｅｎｇｉｎｅｓ　ａｎｄ　ｂｒｏｕｇｈｔ　ｍｏｒｅ　ｃｏｎｖｅｎｉｅｎｃｅ　ｔｏ　ｔｈｅ　ｕｓｅｒｓ。　

ｏｗｉｎｇ　ｔｏ　ｉｔｓ　ｈｕｇｅ　ＨＴＭＬ　ｃｏｄｅ　ｏｆ　ｔｈｅ　ｔｒａｄｉｔｉｏｎａｌ　ＴＡＢＬＥ　ｐａｇｅ　ｌａｙｏｕｔ，ＳＯ　ａｓ　ｔｏ　ｍａｋｅ　ｉｔ　ｉｎ　ｔｈｅ　ｓｅａｒｃｈ　ｅｎｇｉｎｅｓ　ｗｈｉｃｈ　ｓｅｅｍｓ　

ｑｕｉｔｅ　ｈｅｌｐｌｅｓｓ，ｂｕｔ　ｉｔ　ｃａｒｒｉｅｄ　ｏｕｔ　ｗｉｔｈ　ｔｈｅ　ＤＩＶ＋ＣＳＳ　ｐａｇｅ　ｌａｙｏｕｔ　ｔｏ　ｐｏｓｓｅｓｓ　ｔｈｅ　ａｄｖａｎｔａｇｅ　ｏｆ　ｓｔｒｅａｍｌｉｎｅｄ　ｃｏｄｅ　ａｎｄ　ｍａｋｅｓ　

ｉｔ　ｉｎ　ｔｈｉｓ　ｃｏｎｔｅｘｔ　ｔｏ　ｒｅｆｌｅｃｔ　ｔｈｅ　ｍｏｒｅ　ａｄｖａｎｔａｇｅｓ　ａｓ　ｗｅｌ１．Ｈｏｗｅｖｅｒ．ｂｅｃａｕｓｅ　ｏｆ　ｄｉｆｅｒｅｎｔ　ｃｏｍｐａｔｉｂｉｌｉｔｙ　ｉｓｓｕｅｓ　ｏｆ　ｂｒｏｗｓｅｒｓ　

ＣＳＳ，ＳＯ，ｉｎ　ｔｈｅ　ｕｓｅ　ｏｆ　ＤＩＶ＋ＣＳＳ　ｆｏｒ　ｂｅｇｉｎｎｅｒｓ　ａｎｄ　ｐａｇｅ　ｌａｙｏｕｔ　ｐｒｏｃｅｓｓ　ｍａｙ　ｅｎｃｏｕｎｔｅｒ　ｖａｒｉｏｕｓ　ｐｒｏｂｌｅｍｓ，ｔｈｉｓ　ａｒｔｉｃｌｅ　ｗｉｌｌ　

ｐｏｉｎｔ　ｏｕｔ　ｔｏ　ｌｏｏｋ　ｓｏｍｅ　ｓｋｉｌｌｓ　ｉｎｔｏ　ＤＩＶ＋ＣＳＳ　ｌａｙｏｕｔ．　

Ｋｅｙｗｏｒｄｓ　ＤＩＶ＋ＣＳＳ　Ｐａｇｅ　ｌａｙｏｕｔ　Ｂｒｏｗｓｅｒ　Ｃｏｍｐａｔｉｂｉｌｉｔｙ　

在网页制作中，ＴＡＢＬＥ布局在所谓的ＷＥＢ２．０盛行前是比　

较流行的布局方式，甚至现在对于网页制作初学者来说，　

ＴＡＢＬＥ布局依然是一种很好的方式。基于ＴＡＢＬＥ布局具有搭　

建速度快、容易控制的特点，所以现在很多网络公司给客户制　

２、一列自适应宽度　

自适应的布局能够根据浏览器窗口的大小自动改变其宽　

作网站（当然是在客户没有要求使用ＤＩＶ＋ＣＳＳ的情况下）还在　度和高度值，是网页设计中一种非常灵活的布局形式，用　

使用ＴＡＢＬＥ布局网页。但是如今的网页设计到了该考虑搜索　

ＤＩＶ＋ＣＳＳ布局的代码如下：　

引擎以及给用户带来更多的便利的时代，用ＤＩＶ＋ＣＳＳ进行网　ＸＨＴＭＬ代码：　

页布局比用ＴＡＢＬＥ布局将体现出更多的优势。但是又由于　

＜ｄｉｖ　ｉｄ＝”ｍａｉｎ２”＞一列自适应宽度＜／ｄｉｖ＞　

ＣＳＳ对不同浏览器存在兼容性问题，所以对于初学者来说，在　

ＣＳＳ代码：　

使用ＤＩＶ＋ＣＳＳ进行网页布局过程中可能会遇到各式各样的问　

＃ｍａｉｎ２｛　

题，在这里给大家探讨几点ＤＩＶ＋ＣＳＳ布局的技巧。　

一

ｗｉｄｔｌ】：７０％：　

ｈｅｉｇｈｔ：３００ｐｘ；　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ｂｏｒｄｅｒ：．１ｐｘ　ｓｏｌｉｄ＃９９９９９９；　

、

ＤｌＶ＋ＣＳＳ网页布局的分类　

１、一列固定宽度　

一

列布局是所有布局的基础，也是最简单的布局方式，用　

｝　

ＤＩＶ＋ＣＳＳ布局的代码如下：　

ＸＨＴＭＬ代码：　

＜ｄｉｖ　ｉｄ＝”ｍａｉｎｌ”＞一列固定宽度＜／ｄｉｖ＞　

ＣＳＳ代码：　

＃ｍａｉｎ１｛　

ｗｉｄｔｈ：４００ｐｘ；　

３、一列固定宽度居中　

页面整体居中是网页布局中最常见到形式，在传统的表格　

布局中，使用ＴＡＢＬＥ的ａｌｉｇｎ＝”ｃｅｎｔｅｒ”属性来实现，在ＤＩＶ＋ＣＳＳ　

布局中采用如下代码来实现：　

ＸＨｒＩ’ＭＬ代码：　

＜ｄｉｖ　ｉｄ＝”ｍａｉｎ３”＞一列自适应宽度＜／ｄｉｖ＞　

ＣＳＳ代码：　

ｈｅｉｇｈｔ：３００ｐｘ；　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃９９９９９９；　

办公自动化杂志　‘４３　

总第１７６期　

＃ｍａｉｎ３（　

ｗｉｄｔｈ：４００ｐｘ；　

ｈｅｉｇｈｔ：３００ｐｘ；　

ｈｅｉｇｈｔ：３００ｐｘ；　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ｂｏｒｄｅｒ：１ｐｘ　ｓｏｌｉｄ＃９９９９９９；　

ｌｏａｔ：ｆｌｅｆｔ；　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃９９９９９９；　

ｍａｒｇｉｎ：Ｏｐｘ　ａｕｔｏ；　

｝　

ｊ　

这里仅列举了一列、二列的布局方式，实际上三列、四列等　

４、二列固定宽度　

多列的布局方式也和二列的布局方式的实现方法是一样的。事　

实上不管多么复杂的页面设计，在ＤＩＶ＋ＣＳＳ网页布局中，均是　

在有一列固定宽度布局的基础上，实现二列固定宽度也就　

以ＤＩＶ为基础，通过一列、二列、三列这些基础的布局方式的相　

很简单了，用ＤＩＶ＋ＣＳＳ布局的代码如下：　

互组合与嵌套来实现复杂的布局。　

ＸＨＴＭＬ代码：　

＜ｄｉｖ　ｉｄ＝”ｌｅｆｔ”＞左侧＜／ｄｉｖ＞　

二、ＣＳＳ对不同浏览器的兼容性解决办法　

＜ｄｉｖ　ｉｄ＝”￣ｉｈｇｔ”＞右侧＜／ｄｉｖ＞　

由于ＣＳＳ在不同浏览器中存在兼容性问题，所以在使用　

ＣＳＳ代码：　

ＤＩＶ＋ＣＳＳ布局中，可能导致相同的内容在不同浏览器中出现不　

蝌ｅｆｔ｛　

同的显示效果，为了解决这些方面的问题，以下针对ＣＳＳ某些　

ｗｉｄｔｈ：１５０ｐｘ；　

属性的用法提出相应的一些解决办法。　

ｈｅｉｇｈｔ：３００ｐｘ；　

１、页面居中问题　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

在ＩＥ浏览器下，可以通过定义ＣＳＳ样式ｂｏｄｙ　ｆｔｅｘｔ－ａｌｉｇｎ：　

ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃９９９９９９；　

ｃｅｎｔｅｒ；｝来实现页面居中，但在ＦｉｒｅＦｏｘ（以下简写为ＦＦ）浏览器　

ｌｆｏａｔ：ｌｅｆＩ：　

下此属性就失效了。　

｝　

解决办法：使用”ｍａｒｇｉｎ—ｌ幽：ａｕｔｏ；ｍａｒ￣ｎ—ｒｉｈｇｔ：ａｕｔｏ；”　

＃ｒｉｇｈｔ｛　

２、ｐａｄｄｉｎｇ属性在不同浏览器的显示问题　

ｗｉｄｔｈ：４００ｐｘ；　

当给ＤＩＶ设置ｐａｄｄｉｎｇ属性后，在ＦＦ浏览器中会导致　

ｈｅｉｈｇｔ：３００ｐｘ；　

ｗｉｄｔｈ和ｈｅｉｇｈｔ增加（ＤＩＶ的实际宽度＝ＤＩＶ宽＋Ｐａｄｄｉｎｇ），但在　

ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ＩＥ浏览器中ｗｉｄｔｈ和ｈｅｉｈｇｔ不会增加，这就导致相同的内容在　

ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃９９９９９９；　

不同浏览器中出现不同的显示效果。　

ｌｆｏａｔ：ｌｅｆｔ；　

解决办法：给ＤＩＶ设定ＩＥ、ＦＦ两个宽度，在ＩＥ的宽度前加　

）　

上ＩＥ特有标记”　”号。例如：　

＃ｄｉｖｗｉｄｔｈ｛　

，　５、二列固定宽度居中　

ｐａｄｄｉｎｇ：５ｐｘ；　

从一列固定宽度居中的布局方法中，我们就不难完成二列　

ｗｉｄｔｈ：ｌＯＯｐｘ；　

固定宽度居中了，可以使用一个居中的ＤＩＶ作为容器，将二列　

ｗｉｄｔｈ：１１Ｏｐｘ；　

分栏的ＤＩＶ放置在容器中，从而就实现二列的居中显示。　

｝　

ＤＩＶ＋ＣＳＳ的代码如下：　

ＸＨＴＭＬ代码：　

３、奇怪的间隙问题　

＜ｄｉｖ　ｉｄ＝”ｍａｉｎ’’＞　

有的时候我们明明设好了高度，可在ＩＥ６上却看见一些奇　

＜ｄｉｖ　ｉｄ＝”ｌｅｆｔ”＞左侧＜／ｄｉｖ＞　

怪的间隙。　

＜ｄｉｖ　ｉｄ＝”ｒｉｇｈｔ”＞右侧＜／ｄｉｖ＞　

解决办法：试试在有空隙的ＤＩＶ上加上”ｆｏｎｔ－ｓｉｚｅ：Ｏｐｘ；“　

＜／ｄｉｖ＞　

４、关于手形光标　

ＣＳＳ代码：　

要将页面内容的光标显示为手形，通常的做法是使ＣＳＳ属　

＃ｍａｉｎｆ　

性ｃｕｒｓｏｒ：ｈａｎｄ；但这于做法只适用于ＩＥ．　

ｗｉｄｔｈ：５５４ｐｘ；　

解决办法：ｃｕｒｓｏｒ：ｐｏｉｎｔｅｒ；　

ｍａｒｉｇｎ：Ｏｐｘ　ａｕｔｏ；　

５、浮动在）Ｅ６产生双倍距离问题　：　

甜ｅｆｔ｛　

例如：　　’

ｗｉｄｔｈ：１５０ｐｘ；　

＃ｂｏｘ｛　

ｈｅｉｇｈｔ：３００ｐｘ；　

ｌｆｏａｔ：ｌｅｆｔ；　

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；　

ｗｉｄｔｈ：１００ｐｘ；　

ｂｏｒｄｅｎ　ｌｐｘ　ｓｏｌｉｄ＃９９９９９９；　

ｍａｒｉｇｎ：Ｏ　０　０　ｌＯＯｐｘ；　

ｌｆｏａｔ：ｌｅｆｔ；　

｝　

Ｊ　

这种情况之下ＩＥ６会产生２００ｐｘ的距离。　

矧曲ｔ　ｆ　

解决办法：在以上属性的基础上，加上ｄｉｓｐｌａｙ：ｉｎｌｉｎｅ使浮　

ｗｉｄｔｈ：００ｐｘ；　

动忽略。　（下转第５８页）　

‘

４４’　办公自动化杂志　

总第１　７６期　

价学生是否达到教学目的的一种教学模式。我们可以将这三种　

教学方法有机组合，将课程学习可划分为欣赏、模拟、创意三个　

五、拓展课程教学资源　

除了教材之外，我们要充分利用网络平台，运用现代教育　

阶段：第一阶段采用案例教学法，让学生在欣赏优秀案例时，分　

技术和虚拟现实技术，建立虚拟社会、虚拟企业、虚拟车间、虚　

析案例中所应用到的知识，积累灵感，使学生具体初步的制作　

拟项目等仿真教学环境，优化教学过程，提高教学质量和效率，　

ａｓｈ学习论坛、Ｆｌａｓｈ学习ＱＱ群，进行师生远　

Ｆｌａｓｈ作品的能力；第二阶段采用任务教学法，让学生根据任务　

取得实效。建立Ｆｌ

学生之间的相互交流。　

清单，制作自己的作品，从而积累实践制作Ｆｌａｓｈ作品的知识，　

程在线答疑，

提高实践动手能力；第三阶段采用项目教学法，当欣赏与模拟　

达到一定程度后，学生会积累大量的创作灵感及实践制作作品　

六、通过校外实训基地。大力提高操作技能　

我们可以依靠招生就业处和学校的帮助，与动漫公司、影　

的经验，欣赏与模拟升华后学生具备创意作品的能力，创意作　

视基地、广告设计公司、电视台等建立校外实习基地。这些校外　

品是学生学习Ｆｌａｓｈ的最终目标。在Ｆｌａｓｈ教学过程中将三种方　产学合作基地，为课程的实践教学提供了真实的工作环境，可　

法有机的结合在一起，让学生最后达到能够制作出有自己创意　

用于安排学生开展工学交替教学活动。学生通过工学交替活　

的作品，为就业后从事Ｆｌａｓｈ动画制作打下良好的基础。　

四、改革课程考核方式　

课程考核是教学的最后一个环节，它是检验教学质量和教　

动，大大提高了他们的动画设计能力，养成了较好的职业素质　

并很好的体验了企业文化，为今后毕业的顺利就业和优质就业　

奠定了扎实的基础。　

总之，我们进行Ｆｌａｓｈ教学改革探讨的目的是为了提高　

Ｆ１ａｓｈ课程的教学效果。随着网络的日益普及，ｌａＦｓｈ动画制作技　

学效果的主要手段。在传统的教学中，考评都是以笔试为主。但　

笔试考试不能完全反映学生的真实成绩，反而制约了五年制高　

能应用越来越广泛。怎样让五年制高职学生制作出精美的　

职学生创作的积极性，限制了他们的思维发展。为了充分调动　

Ｆｌａｓｈ动画，并应用到网络中去，这是教学目的所在。因此，作为　

学生学习的积极性，我们改革了Ｆｌａｓｈ课程的评价制度。我将　

我们广大专业教师，只有不断学习，更新知识，更新观念，优化　

《兀ａｓｈ动画制作》课程的考核分成三部分：一是根据学习态度　

知识结构，积极开展教学研究与探讨，吸取最新的学科成果，及　

评定学生的平时成绩，态度决定一切，良好的学习态度是成功　

时对教学内容、教学方法、教学模式及考核方法进行改革，才能　

的基础。比如说学生的出勤情况，平时作业的完成情况等。二是　

使Ｆｌａｓｈ动画设计课程的教学质量得到更大的提高。　

对基础知识，采用闭卷笔试考核，主要考查基本概念、知识点的　

参考文献　

掌握。三是综合能力和创造能力的考核，主要考查学生对知识　

　‘

［１］邢江涛．对如何开展Ｆｌａｓｈ教学工作的探讨［Ｊ】．内蒙古电　

的灵活运用能力。在学期开始，即要求学生根据课程学习的情　大学刊，２００６，１７（６）；１０３￣１０４．　

［２］陈贵兰．谈ＦＬＡＳＨ教学中创新能力的培养【Ｊ］．农业网络　

况制作一个完整的Ｆ１ａ８ｈ作品，题材和内容不受限制，比如可以　

２００８，２２（９）：９１～９２，１　１６．　

制作一个Ｆｌａｓｈ　ＭＴＶ，考核所占比例分别为２０％、２０％、６０％。三　

信息，

【３］袁剑Ｆｌａｓｈ教学实践探索［Ｊ］．现代计算机（专业版）　

种考核方式相辅相成，有了扎实的基础知识和熟练基本操作技　

能才能做出优秀的Ｆｌａｓｈ作品，做综合的Ｆｌａｓｈ作品的过程既促　

２００９，９：８９－９１．　

进学习基础知识和更加熟练操作，又使学生得到更加系统的能　

作者简介　

张如云女计算机讲师，研究方向：多媒体技术。　

力方面的培养。　

（上接第４４页）　

６、ＵＬ和ＦＯＲＭ标签的ｐａｄｄｉｎｇ与ｍａｒｇｉｎ　

页设计过程中，我认为不可盲目跟风，如何更有效、更合理的运　

ｕｌ标签在ＦＦ中默认是有ｐａｄｄｉｎｇ值的，而在ＩＥ中只有　

用ＷＥＢ２．０设计标准，这需要很长时间的学习和锻炼。而如何　

ｍ￣ｇｉｎ默认有值。ＦＯＲＭ标签在ＩＥ中，将会自动ｍａｒｇｉｎ一些边　

将ＤＩＶ＋ＣＳＳ运用的更好，我觉得这需要通过不断的实践和体　

距，而在ＦＦ中ｍ￣ｇｉｎ则是Ｏ；　

验，积累丰富的设计经验，才能很好的掌握这门技术。　

解决办法：ＣＳＳ中首先都使用这样的样式ｕｌ，ｆｏｒｍｆｍａｒｇｉｎ：Ｏ；　

ｐａｄｄｉｎｇ：Ｏ；｝　

参考文献　

【１】览众，张晓景著．ＤＩＶ＋ＣＳＳ网页布局商业案例精粹嗍．电　

子工业出版社，２００７．１２　

．

７、截字省略号　

ｈｈ　ｆ　

－

［２］Ｊｅｆｆｒｅｙ　Ｚｅｌｄｍａｎ著．傅捷，王宗义，祝军译．网站重构——　

应用Ｗｅｂ标准进行设计［Ｍ】．电子工业出版社，２００５．４．　

ｏ－ｔｅｘｔ－ｏｖｅｒｆｌｏｗ：ｅｌｌｉｐｓｉｓ；　

ｔｅｘｔ－ｏｖｅｒｆｌｏ￣ｖ：ｅｌｌｉｐｓｉｓ；　

ｗｈｉｔｅ－ｓｐａｃｅ：ｎｏｗｒａｐ；　

ｏｖｅｒｌｏｗ：ｆｈｉｄｄｅｎ；　

【３】李烨著．别具光芒——ｃｓｓ属性、浏览器兼容与网页布　

局【Ｍ】．人民邮电出版社，２００８．１０．　

作者简介　

李艳梅（１９７２￣）女云南昆明人，大学本科，主要从事ＷＥＢ　

｝　

这个ＣＳＳ是定义当内容溢出宽度后会自行的截掉超出部　

分的文字，并以省略号结尾，但注意Ｆｉｒｅｆｏｘ并不支持。　

三、结束语　

综合以上讨论的ＤＩＶ＋ＣＳＳ网页布局的技巧，希望能给酷爱　

ＤＩＶ＋ＣＳＳ网页布局的初学者带来一些启示，但在网站建设与网　

页面设计制作和研究．　

杨俊（１９７５　）男云南昆明人，大学本科，主要从事ＷＥＢ　

程序设计开发和研究。　

・

５８　办公自动化杂志