DIV+CSS布局网站首页实例

网站页面布局

http://www.sj33.cn/digital/wyll/201501/42379.html【页头、页脚、侧边栏和内容区域】

#避免各浏览器对CSS的解析差异，需对其进行测试

不同浏览器的区别【http://www.wenkuxiazai.com/doc/5fd3b2774afe04a1b171de3e.html】

 

1、IE和FF居中不一样

 

text-align:center  #包中所有文本居中

 

2、IE指定的最小高度为18px，FF都可以

定义小于18px的，默认18px

3、IE会自动调整块高度，而FF不会，指定多高就是多高【高度不随内容高度增高而增高】

 

 

#把原背景高度去掉

 

 

4、FF如果使用浮动则是正常的显示，脱离文本流

5、IE和FF在列表不区别

内外边距清零，无需列表（清除样式）

6、H不一样

7、Border IE=内容+框，FF边框另算

 

 

实例实现

#命名需遵循命名规范

0、定义文件

在css文件中定义实现各功能的不同的样式【分辨率设置：1024*768px】

 

1、初步编辑【定义标签、主体（分布）、css】｛浏览器差异问题1：居中｝

id:只调用一次的时候使用，调用多次的时候使用类

#定义类（nav），分割条

clear:both;   //清除浮动区块     overflow:hidden;  //超出部分隐藏

 

2、页头、菜单

#header分为三部分logo、banner（广告位：动图等）、tool（快捷操作）【全部脱离文本流进行操作，页面可更美观】｛浏览器差异问题2、3、4｝

float:脱离文本流操作   #margin-left:10px  //浮动框右边留10px空位

 

 

#menu菜单栏｛浏览器差异问题5｝

 

3、主体（body）

先分成左右两边，中间为广告位，栏目块为图片【选项高度以图片高度为准】

#浏览器差异问题6

#

##IE与火狐的边界界定有几个像素差异

#!important   #优先级，为火狐等浏览器优先识别标志

 

4、内容区域

#通常为列表，在content里面

###成果展示

遗留问题：

当content定义高度时，在IE中则会页面被撑大叠加

##暂时解决方法：content不设高度