现在的位置: 主页 > 企业简介 > 文章列表

web页面布局

作者:成都金海力科技有限公司 来源:www.scjinhaili.com 未知发布时间:2017-09-03 12:45:08
web页面布局

\

随着Web上不同布局技术的数量激增,似乎每个CSS都用自己的技术创建多列的布局,而且新的CSS开发人员常常使用一种技术却不真正了解它的工作原理。这种进行css布局的“黑盒”方式可能给会迅速地得到想要的结果,但是最终会阻碍开发人员理解这种语言。 所有css布局技术都依赖于三个基本概念:定位、浮动和空白边操纵。不同的技术其实没有本质的差异,而且如果理解了核心概念,那么创建自己的布局是相当容易的。 接下来,列举以下几点: 1、让设计在页面中水平居中; 2、创建两列和三列的基于浮动的布局; 3、创建固定宽度、流体和弹性布局; 4、将列拉长到整个可用空间的高度。
7.1 让设计居中 长文本行难以阅读。随着现代显示器的尺寸越来越大,屏幕可读性问题变得越来越重要。缓解这个问题的一种方法是让设计居中。居中的设计只占据屏幕的一部分,而不是横跨屏幕的整个宽度,这样就会创建比较短的容易阅读的行。 居中的设计目前非常时髦,所以如何在css中让设计居中是大多数开发人员首先要学习的主题之一。让设计居中有两个基本方法:一个方法使用自动空白边,另一个方法使用定位和负值的空白边。
7.1.1 使用自动空白边让设计居中 假设有一个典型的布局,希望让其中的容器div在屏幕上水平居中: 为此,只需定义容器div的宽度,然后将水平空白边设置为auto: #wrapper{ width: 720px; margin: 0 auto; } 在这个示例中,我决定以像素为单位指定容器div的宽度,让它适合800*600分辨率的屏幕。但是,也可以将宽度设置为主体的百分数,或者使用em相对于文本字号设置宽度。 这在所有现代浏览器中都是有效的。但是,怪异模式中的IE5.X和IE6不支持自动空白边。幸运的是,IE将text-align:center误解为让所有东西居中,而不只是文本。可以利用这一点,方法是让主体标签中的所有东西居中,包括容器div,然后将容器的内容重新对准左边: body{ text-align: center; } #wrapper{ width: 720px; margin:0 auto; text-align: left; } 以这种方式使用text-align属性是一种招数,但是这个招数是无害的,对代码美欧严重的影响。容器现在在IE以及比较符合标准的浏览器中都会居中。 为了让这个方法在所有浏览器中都能够顺利的工作,需要做最后一件事情。在Netscape 6 中,当浏览器窗口的宽度减少到小于容器的宽度时,容器的左边会跑到屏幕的外边,就无法访问它了。为了防止这种现象,需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度: body { text-align: center; min-width: 760px; } #wrapper { width: 720px; margin:0 auto; text-align: left; }

\


图7-1 使用自动空白边让设计居中 现在,如果试图将窗口的宽度减少到小于容器div的宽度,就会出现滚动条,使用户能够访问所有内容。
7.1.2 使用定位和负值空白边让设计居中
到目前为止,使用自动空白边进行居中的方法是最常用的,但是它需要用一个招数来满足IE5.X的要求。它还要求对两个元素而不只是一个元素应用样式。因此,有些人喜欢使用定位和负值空白边来代替这种方法。 与前面一样,首先定义容器的宽度。然后将容器的position属性设置为relative,将left属性设置为50%。这会把容器的左边缘定位在页面的中间。 #wrapper{ width: 720px; position: relative; left: 50%; } 但是,并不希望让容器的左边缘居中,而是希望让容器的中间居中。实现的方法是对容器的左边应用一个负值的空白边,宽度等于容器宽度的一半儿,这会把容器向左边移动它的宽度的一半,从而让它在屏幕上居中: #wrapper{ width: 720px; position: relative; left: 50%; margin-left: -360px; } 选择使用哪种居中技术是个人喜好问题。但是,同时掌握多种技术总是有好处的,因为不知道什么时候某种技术正好合适。 7.2 基于浮动的布局 用css进行布局有几种不同的方式,包括绝对定位和使用负值空白边。我发现基于浮动的布局是最容易使用的方法。顾名思义,在基于浮动的布局中,只需设置希望定位的元素的宽度,然后将他们向左或向右浮动。 因为浮动的元素不再占据文档流中的任何空间,他们就不再对包围他们的块框产生任何影响。为了解决这个问题,需要对布局中各个点上的浮动元素进行清理。非常常见的做法是,不对元素进行连续地浮动和清理,采集软件,而是浮动几乎所有东西,然后在整个文档的“战略点”(比如页脚)上进行一次或两次清理。
7.2.1 两列的浮动布局 要想使用浮动创建简单的两列布局,首先需要有一个基本的(X)HTML框架。在下面的示例中,(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器div中,这个div使用前面介绍的方法之一进行水平居中:

...

...

...

...

这个设计的主导航区域将位于页面的左边,内容位于右边。但是,为了易用性和可访问性,在源代码中将内容区域放在导航的前面。首先,主内容是页面上最重要的东西,所以在文档中应该先出现。其次,这样可以方便屏幕阅读器用户,他们用不着经过可能很长的链接列表才找到内容部分。 在创建基于浮动的布局时,一般将两列都向左浮动,然后使用空白边或填充在两列之间创建一个隔离带。在使用这种方法时,列在可用空间内包得很紧,没有喘息的空间。如果浏览器表现良好的话,那么这不是问题:但是差劲的浏览器会打乱紧密的布局,迫使一列退到另一列的下面。 在IE上就会发生这种情况,因为IE/Win考虑元素内容的尺寸,而不是元素本身的尺寸。在符合标准的浏览器中,如果元素的内容太大,它只会超出框之外。但是,在IE/Win上,如果元素的内容太大,整个元素就会扩展。如果这发生在非常紧密的布局中,那么就没有足够的空间可以让元素并排出现,浮动元素之一就会退到下面去。其他IE bug(比如3像素文本偏移bug和双空白边浮动bug)也会导致浮动元素下降。 为了防止发生这种情况,需要避免浮动布局在包含它们的元素中太挤。可以不使用水平空白边或填充来建立隔离带,而是将一个元素向左浮动,另一个元素向右浮动,从而创建视觉上的隔离。如果一个元素的尺寸意外地增加了几个像素,那么它不会立刻占满水平空间并下降,而只是扩展到视觉隔离带中。

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:襄阳SEO http://xiangyang.raoyu.net

上一篇:HDOJ 5358 First One 暴力 下一篇:最后一页