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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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不设高度

 



以上是关于PHP.5-DIV+CSS布局网站首页实例的主要内容,如果未能解决你的问题,请参考以下文章

CSS实例教程:十步学会用CSS建站

css入门

Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页,含有table表格,js表单验证还有首页视频。以及列表页。浮动布局。div+css+js

熟悉HTML CSS布局模型

在哪有div css 微博模板

2019.12.04-首页布局实例代码