温州网美科技有限公司-专注于温州网站建设,温州网站制作,温州网站优化

客服电话
seo推广,百度推广,google推广,yahoo推广
您所在的位置:主页 > > >网站推广>>百度优化

关于DIV+CSS布局的技巧

发布时间:2015-1-10 10:15:04 阅读次数:4331 信息来源:温州网美科技有限公司

办公自动化杂志在网页制作中,TABLE 布局在所谓的WEB2.0 盛行前是比较流行的布局方式,甚至现在对于网页制作初学者来说, TABLE 布局依然是一种很好的方式。基于TABLE 布局具有搭建速度快、容易控制的特点,所以现在很多网络公司给客户制作网站(当然是在客户没有要求使用DIV+CSS 的情况下)还在使用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、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用 DIV+CSS 布局的代码如下: 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 代码,使得其在搜索引擎方面显得有些无能为力,而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS 对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点DIV+CSS 布局的技巧。


  wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});  
 


 - 2 -
4、二列固定宽度在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用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; } 
5、二列固定宽度居中从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的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 在不同浏览器中存在兼容性问题,所以在使用 DIV+CSS 布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS 某些属性的用法提出相应的一些解决办法。 
1、页面居中问题在IE 浏览器下,可以通过定义CSS 样式body {text- align: center;}来实现页面居中,但在FireFox(以下简写为FF)浏览器下此属性就失效了。解决办法:使用"margin- left: auto; margin- right : auto; " 
2、padding 属性在不同浏览器的显示问题当给DIV 设置padding 属性后,在FF 浏览器中会导致 width 和height 增加(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: 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
则是0;解决办法:css 中首先都使用这样的样式ul,form{margin: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 运用的更好,我觉得这需要通过不断的实践和体验,积累丰富的设计经验,才能很好的掌握这门技术。

本文地址:http://www.7777web.com/based_info.aspx?id=346


>>相关网站建设观点

上一篇:修复 IE 下 PNG 图片不能透明显示的问题

下一篇:404错误是什么意思?为什么是404

在线客服

在线客户咨询客服1
在线客户咨询客服2
在线客户咨询客服3

在线热线

137-777-66457

工作时间

周一至周日:9:00~18:00