[浅谈Dreamwarever中的DIV+CSS网页布局]网页浏览器是什么
时间：2019-01-30 03:27:51 来源：雅意学习网 本文已影响 人 
摘要：CSS+DIV的设计方式也正逐步成为制作网站的主力军之一，CSS及DIV作为制作网页的重要组成部分，已经成为网页设计中必不可少的要素。使用CSS+DIV制作网页的方法比较简单易学，有很大优势。
关键词：DIV+CSS；网页布局；浏览器；兼容性
在网页制作中，TABLE布局在所谓的WEB2.0盛行前是比较流行的布局方式，甚至现在对于网页制作初学者来说TABLE布局依然是一种很好的方式。基于TABLE布局具有搭建速度快、容易控制的特点，所以现在很多网络公司给客户制作网站还在使用TABLE布局网页。但是如今的网页设计到了该考虑搜索引擎以及给用户带来更多便利的时代，用DIV+CSS进行网页布局比用TABLE布局将体现出更多的优势。但是又由于CSS对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS进行网页布局过程中可能会遇到各式各样的问题，在这里给大家探讨几点DIV+CSS布局的技巧。
一、DIV+CSS网页布局的分类
1.一列固定宽度
一列布局是所有布局的基础，也是最简单的布局方式，用
DIV+CSS布局的代码如下：
XHTML 代码：
一列固定宽度
CSS 代码：
#main1{
width: 400px;
height: 300px;
background- color: #EEEEEE;
border:1px solid #999999;
2.一列固定宽度居中
页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE的 align=“center”属性来实现，DIV+CSS布局中采用如下代码来实现：
XHTML 代码：
一列自适应宽度
CSS 代码：
#main3 {
width: 400px;
height: 300px;
background-color:#EEEEEE;
border:1pxsolid#999999;
margin: 0px auto;}
3.二列固定宽度
在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，DIV+CSS布局的代码如下：
用
XHTML 代码：
左侧
右侧
CSS 代码：
left {
width:150px;
height: 300px;
background- color: #EEEEEE;
border: 1px solid #999999;
float:left;
}
#right {
width: 400px;
height: 300px;
background- color: #EEEEEE;
border:1px solid #999999;
float:left;
}
4.二列固定宽度居中
从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV作为容器，将二列分栏的DIV放置在容器中，从而就实现二列的居中显示。
DIV+CSS的代码如下：
XHTML代码：
左侧
右侧
CSS代码：
#main{
width:554px;
margin:0px auto;
#left {
width:150px;
height:300px;
background- 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对不同浏览器的兼容性解决办法
为了解决CSS在不同浏览器中存在兼容性问题，属性的用法提出相应的一些解决办法。
1.页面居中问题
在IE浏览器下，可以通过定义CSS样式body{text- align: center；}但在FireFox来实现页面居中，此属性就失效了。
解决办法：使用“margin-left:auto；margin-right:auto；
2.padding属性在不同浏览器的显示问题
当给DIV设置padding属性后，在FF浏览器中会导致width 和height增加，但在IE浏览器中不会，这就导致相同的内容在不同浏览器中出现不同的显示效果。
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上 IE特有标记“*”号。例如：
#divwidth{
padding:5px;
width:100px;
*width:110px;
}
3.UL和FORM标签的padding与margin
UL标签在F中默认是有padding值的，而在IE中只有margin 默认有值。FORM标签在IE中，将会自动margin一些边距,而在FF中margin则是0；解决办法：首先都使用这样的样式ul，form {margin:0;csspadding:0;}
三、结束语
综合以上讨论的DIV+CSS网页布局的技巧，希望能给酷爱DIV+CSS网页布局的初学者带来一些启示，但在网站建设与网页设计中,我认为不可盲目跟风，用WEB2.0设计标准，这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体验，才能很好的掌握这门技术。
参考文献
［1］览众，张晓景.DIV+CSS网页布局商业案例精粹［M］.电子工业出版社，2007（12）.
［2］周宏敏.Dreamweaver MX 2004应用培训教程.电子工业出版社，2003：180.
［3］张学明.关于CSS你只需知道的下件事.http://edu.省略/200804/123916.htm.
［4］陈慧民，李咸龙.WEB标准的发展与应用［J］.计算机系统应用,2008（10）:125-127.
（作者单位 四川省职业技术学院）
