当前位置:主页 > 网页教程 > 网页制作 > div css > 内容欢迎大家投稿

CSS页面绝对居中,任意排版,兼容所有浏览器

时间:2009-11-01 08:26来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

 一,前言

  这不是一篇css的入门教程,关于css的基本特性,请参考 WIKI:http://zh.wikipedia.org/wiki/CSS

  Css 的优点很多,首先可以使html代码清晰明了,不会有太多的<table>标签,然后css可以节省网络流量,因为你的css文件只需要下载一次就可以永久使用,以后用户请求你的网站的时候会直接从本地取css文件,不过这里也存在一个问题,那就是当你修改了css文件后,用户并察觉不到这种改变,需要手动刷新浏览器才能看到变化,一个解决办法就是每次更改css的时候都改一下css的文件名.css还有一个优点就是可以灵活控制布局,不像 table布局那样麻烦,只需要简单的代码就可以实现流动布局和任意布局.

  那 css的缺点在哪里呢,不用说,跟javascript的兼容性一样,ie和ff等浏览器对这二者的某些元素都有着不同的解释方法,事实上ff浏览器和 chrome浏览器是遵循的国际标准,而ie8虽然也改进了很多,但是大多数用户还停留在ie6阶段,在这个领域,不能图省事,在网页里提示"请用ie8 或者ff浏览器浏览本站"是对用户的一种极大伤害,本来我们就是为了用户而存在,如果还要用户来适应我们,那是很不明智的.

  二,绝对居中,任意排版?

  在css的所有问题中,最让人头疼的就是页面绝对居中问题,因为所有浏览器对position和left等属性的解释不同,造成在ff浏览器里调通的页面在ie6里严重变形,其中原理涉及到ie6对块的解释和其他浏览器不同,这里不详细解释,只说解决办法.

  直接上html,这是一段纯html代码,不包含任何布局的元素,标准的html都是这样编写的:

  HTML代码

 1<center>
 2        <body>
 3            <!-- 要再一个层里任意布局一个层,必须外嵌一个position为relative的层 -->
 4            <!-- 头部 -->
 5            <div id="head">
 6                <div id="headsideline">
 7                </div>
 8                <div id="logo">
 9                    <img src="images/logo.png" />
10                </div>
11                <div id="poster">
12                    <img src="images/poster.gif" />
13                </div>
14                <div id="nag1">
15                    <a href="#">我的点点</a>&nbsp;&nbsp;
16                    <a href="#">快速点餐通道</a>&nbsp;&nbsp;
17                    <a href="#">南京饮食</a>&nbsp;&nbsp;
18                    <a href="#">大厨课堂</a>
19                </div>
20            </div>
21            <!-- 中间的导航栏 -->
22            <div id="nag2">
23                <div id="nag21">
24                    您当前所在地为:<label class="bluetext">南京理工大学</label>,
25                    更改此项请<a href="#">点击这里</a>,或者直接
26                    <a href="Javascript:void(0);" id="expandlist">展开列表</a>
27                    以选择其他地区<a href="Javascript:void(0);" id="closelist">隐藏列表</a>
28                </div>
29                <div>
30                </div>
31            </div>
32            <!-- 正文 -->
33            <div id="content">
34            <!-- 
Flash展示位 -->
35                <div id="flashshow">
36                    <img src="images/flashshow.png" />
37                </div>
38                <div id="hot">
39                    <div id="hottitle">
40                        <img src="images/hot.png">
41                    </div>
42                    <div>
43                    </div>
44                </div>
45            </div>
46        </body>
47    </center>

 

 下面简单说明一下这些代码有何特点,使得能够兼容所有浏览器,绝对居中,而又可以任意布局.

  首先注意body标签外边潜逃的<center>标签,这个是必须的,也是大家所熟悉的,这段代码的特殊之处其实在于#head,#nag2,#content标签的css属性:position,注意: 要再一个层里任意布局一个层,必须外嵌一个position为relative的层 , 在此html页面中包含三个大的部分,分别是头部,导航和正文,每个部分都是独立的,所以都外嵌一个层,然后设置position为relative,这样这三个层就会以流动的方式自动布局,而里面得层则可以分别在各自的区域里面自由布局,自由布局的position要设置为:absolute,然后分别设置left和top属性就可以任意布局了,left和top指的是相对于外边嵌套的层的位置,而不是相对于整个页面的位置.

  至此其实就解决了所有问题,以后所有的层都写在外面的嵌套的层里面,这样写出来的html不仅清晰明了,而且布局简单,然后再说一个小问题:

  二.Padding问题

  在 ff和ie里面对有个属性的解释也有差别,那就是padding,在ff里padding的意思是向层里面压缩指定的像素,而在ie里却是向外压缩指定的像素,造成层的表现不一致,而这又是一个非常常用的属性,那如何解决这个问题呢,正如我在nag2层里所使用的那样,我在nag2层里嵌套了一个小层,设置这个层的padding为10像素,然后隐藏这个层的显示,之后不管这个层是膨胀还是收缩,他的总体积总是变大的,在用户看来最后的效果都是实现了 padding的效果,这是一个非常巧妙的办法,切实解决了此问题,其实还有一种类似hack的方法,那就是如果是单行的文字,可以通过设置 line- height来改变文字和层边界的距离,从而达到padding的效果.当时这个方法并不适合多行的情况.

 

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接