关于DIV+CSS布局的技巧的论文.pdf

《关于DIV+CSS布局的技巧的论文.pdf》由会员分享，可在线阅读，更多相关《关于DIV+CSS布局的技巧的论文.pdf（3页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、-1-关于 DIV+CSS 布局的技巧css课程设计论文一、引言办公自动化杂志在网页制作中，TABLE 布局在所谓的WEB2.0 盛行前是比较流行的布局方式，甚至现在对于网页制作初学者来说，TABLE 布局依然是一种很好的方式。基于 TABLE 布局具有搭建速度快、容易控制的特点，所以现在很多网络公司给客户制作网站（当然是在客户没有要求使用DIV+CSS 的情况下）还在使用TABLE 布局网页。但是如今的网页设计到了该考虑搜索引擎以及给用户带来更多的便利的时代，用 DIV+CSS 进行网页布局比用TABLE 布局将体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来

2、说，在使用 DIV+CSS 进行网页布局过程中可能会遇到各式各样的问题，在这里给讨论几点DIV+CSS 布局的技巧。二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用DIV+CSS 布局的代码如下：XHTML 代码：一列固定宽度CSS 代码：#main1 width:400px;height:300px;background-color:#EEEEEE;border:1px solid#999999;2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用DIV+CSS 布局的代码如下

3、：XHTML 代码：一列自适应宽度CSS 代码：#main2 width:70%;height:300px;background-color:#EEEEEE;border:1px solid#999999;3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用 TABLE 的 align=center 属性来实现，在DIV+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码：DIV+CSS 网页布局方法探析。如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎

4、方面显得有些无能为力，而用 DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用 DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点 DIV+CSS 布局的技巧。-2-4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码：#left width:150px;height:300px;background-color:#EEEEEE;border:1px solid#999999

5、;float:left;#right width:400px;height:300px;background-color:#EEEEEE;border:1px solid#999999;float:left;5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV 作为容器，将二列分栏的DIV 放置在容器中，从而就实现二列的居中显示。DIV+CSS 的代码如下：XHTML 代码：左侧右侧CSS 代码：#main width:554px;margin:0px auto;#left width:150px;height:300px;backgr

6、ound-color:#EEEEEE;border:1px solid#999999;float:left;#right width:400px;height:300px;background-color:#EEEEEE;border:1px solid#999999;float:left;这里仅列举了一列、二列的布局方式，实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计，在 DIV+CSS 网页布局中，均是以DIV 为基础，通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。三、CSS 对不同浏览器的兼容性解决办法由于 C

7、SS 在不同浏览器中存在兼容性问题，所以在使用DIV+CSS 布局中，可能导致相同的内容在不同浏览器中出现不同的显示效果，为了解决这些方面的问题，以下针对CSS 某些属性的用法提出相应的一些解决办法。1、页面居中问题在IE 浏览器下，可以通过定义CSS 样式 body text-align:center;来实现页面居中，但在 FireFox（以下简写为FF）浏览器下此属性就失效了。解决办法：使用 margin-left:auto;margin-right:auto;2、padding 属性在不同浏览器的显示问题当给DIV 设置 padding 属性后，在FF 浏览器中会导致width 和 he

8、ight 增加(DIV 的实际宽度=DIV 宽+Padding),但在IE 浏览器中width 和 height 不会增加，这就导致相同的内容在不同浏览器中出现不同的显示效果。解决办法：给DIV 设定IE、FF 两个宽度，在IE 的宽度前加上IE 特有标记*号。例如：#divwidth padding:5px;width:100px;*width:110px;3、奇怪的间隙问题有的时候我们明明设好了高度，可在IE6 上却看见一些奇怪的间隙。解决办法：试试在有空隙的DIV 上加上 font-size:0px;4、关于手形光标要将页面内容的光标显示为手形，通常的做法是使CSS 属性 cursor:

9、hand;但这于做法只适用于IE.解决办法：cursor:pointer;5、浮动在IE6 产生双倍距离问题例如：#box float:left;width:100px;margin:0 0 0 100px;这种情况之下IE6 会产生200px 的距离。解决办法：在以上属性的基础上，加上display:inline，使浮动忽略。6、UL 和 FORM 标签的 padding 与 margin ul 标签在 FF 中默认是有padding 值的,而在 IE 中只有margin 默认有值。FORM 标签在 IE 中,将会自动 margin 一些边距,而在 FF 中 margin-3-则是 0；解决

10、办法：css 中首先都使用这样的样式ul,formmargin:0;padding:0;。7、截字省略号.hh -o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;这个 CSS 是定义当内容溢出宽度后会自行的截掉超出部分的文字，并以省略号结尾，但注意Firefox 并不支持。四、总结以上讨论的DIV+CSS 网页布局的技巧，有所不足，但在网站建设与网页设计过程中,我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0 设计标准，这需要很长时间的学习和锻炼。而如何将DIV+CSS 运用的更好，我觉得这需要通过不断的实践和体验，积累丰富的设计经验，才能很好的掌握这门技术。