用DIV+CSS布局实现网页上中下版面先显示中间主体部分的方法
一鸣原创 [2012/2/20]
网页用DIV+CSS布局的好处在此就不多说了，除了能减少代码堆积、更好的符合W3C网页标准外，更大的优点在于用DIV+CSS布局能突出重点，优先布局网页主体部分，从而更利于百度等搜索引擎抓取网页。下面一鸣就来谈谈如何用DIV+CSS布局实现网页上中下三栏版面先显示中间主体部分？
列举一最常见的上中下三栏式网页设计版面：设网页整个宽度为980px；
1、最上面即网页顶部（header）包含LOGO、菜单、BANNER等功能，整个高度固定为200px；
2、中间（middle）分为两列，左边为侧导航栏（side_left），右边为网页主体部分（main_right），整个高度不固定；
3、最下方即网页底部（footer）主要放版权和联系资料等信息。
现在我们需要用DIV+CSS先显示网页中间右边的主体部分main_right，然后再依次显示左边导航条、顶部和底部内容。东莞网页设计师总结试验有以下两种方法：
方法一、CSS绝对定位网页顶部
1、中间部分middle用"padding-top:200px"来定位，用"margin:0 auto"实现居中，"width:980px"设置宽度；
2、网页中间右边主体部分main_right用"float:right"设置右边浮动，"width:7760px"设置主体宽度；
3、左边导航栏side_left则用"float:left"设置左边浮动，"width:200px"设置宽度；
4、顶部header用"position:absolute;top:0px"绝对定位于最上方，然后想法居中即可，试验因要兼容IE和Firefox，所以此处先增加一层嵌套，外层加上"left:0px;width:100%"固定，内层再用"margin:0 auto;width:980px"设宽度和居中；
5、底部footer则用"clear:both;margin:0 auto;width:980px"即可。
方法二、CSS绝对定位网页中间部分和底部
1、网页中间middle用"position:absolute;top:200px;left:0px;width:100%"来绝对定位，再嵌套一层用"margin:0 auto;width:980px"来设置宽并居中；
2、同法一；
3、同上；
4、顶部header用"margin:0 auto;width:980px;height:100px"置宽高并居中；
5、底部footer用"position:absolute;left:0px;width:100%;clear:both"绝对定位，但其top值是顶部的高度和中间部分的高度之和，并不固定，所以我们只能用JS计算出来后再设置其top值，从而固定其位置，同理，为尽量使IE和火狐FF等浏览器能兼容，此处亦须加嵌套层来居中。
本文由一鸣网络http://www.10dg.com原创，转载请标明出处，不胜感谢！
关键字索引：DIV+CSS布局,优先显示网页中间主体部分的方法
上一篇文章：企业网站建设中英文版制作的若干建议
下一篇文章：营销型网站运营之道在于要经常更新自己网站的内容
|
|
|
|
东莞网站建设 
