PHP.5-DIV+CSS布局网站首页实例

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不设高度