14.1 “1-2-1”变宽度网页布局
2020-12-13 15:52
在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解。在本章中,将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定。因此.必须使用一些技巧来完成。
这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳。希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法。lodidance.com
“1-1-1”布局过于简单,因此这里就不再介绍了。我们从“1-2-1”布局开始,逐步向读者展示更为复杂的布局结构,并逐步归纳出普遍的通用解决方案。
对于变宽度的布局.首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此,中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况。这两列是按照一定的比例同时变化,还是一列固定,另一列变化。这两种情况都是很常用的布局方式。下面先从等比例方式讲起。
注意:在分列情况下,某一列有可能是固定宽度的,也可能是变化宽度的。因此为了方便区分,这里再修订一下布局的表达方法,这样对于网页学习网CSS教程资源中的文件命名也会比较方便。规定为,对于并列的若干列,如果某一列是固定列,就用字母“f”(英文单词fixed的第一个字母)表示;如果某一列是变宽的列,就用字母“l”(英文革词“liquid”的第一个字母)表示。
例如,如果某一个“1-2-1”布局中两列并排,左边的是固定宽度列,右边的是变化宽度的列,那么这种布局记作“1-(f-l)-1”。
再例如,如果某一个“1-3-1”布局中3列并排,左右两边的是固定宽度列,中间的是变化宽度的列,那么这种布局记作“1-(f-l-f)-1”。
本教程CSS资源中的案例采用了这种方法命名,读者一看就可以知道是如何布局的了。
一、“1-2-1”等比例变宽布局
首先实现按比例的适应方式,如图1所示。在这个页面中,网页内容的宽度为浏览器窗口宽度的85%.页面中左侧的边栏的宽度和右侧的内容栏的宽度保持1:2的比例,可以看到无论浏览器窗口宽度如何变化,它们都等比例变化。
本案例的文件位于网页学习网CSS教程资源的“第14章\1-2-1\1-(l+l)-1-absolute.htm”和“第14章\1-2-1\1-(l+l)-1-float.htm”。翦者使用“绝对定位法”制作,后者使用“浮动法”制作。
图1 “1-2-1”等比例布局
我们将在前面制作的“1-2-1”浮动布局的基础上完成本案例。原来的“1-2-1”浮动布局中的宽度都是用像素数值确定的固定宽度,下面就来对它进行改造,使它能够自动调整各个模块的宽度。
实际上只需要修改3处宽度就可以了。代码如下。
- #content{
- float:rightright;
- width:760px; /*删除原来的固定宽度*/
- width:85%; /*改为比例宽度*/
- }
- #content img{
- float:rightright;
- width:500px; /*删除原来的固定宽度*/
- width:66%; /*改为比例宽度*/
- }
- #side{
- float:left;
- width:300px; /*删除原来的固定宽度*/
- width:33%; /*改为比例宽度*/
- }
经验:container等外层div的宽度设置为83%是相对浏览器窗口而盲的比例;而后面content和side这两个内层div的比例是相对于外层div而言的。这里分别设置为66%和33%,二者相加为99%.而不是l00%。这是为了避免由舍入误差造成总宽度大于它们的容器的宽度,而使某个div被挤到下一行中。如果洗完精确,写成99.9%也可以。
这样就实现了各个diV的宽度都会等比例适应浏览器窗口。这里需要注意两点。
(1) 确保不要使一列或多个列的宽度太大,以至于其内部的文字行宽太宽.造成阅读困难。
(2) 我们制作的每一个圆角框都是使用前面介绍的方法制作的,由于用这种方法制作的圆角框的最宽宽度有限制,因此如果超过此限度就会出现裂缝。
针对上述第2点,解决的办法是,如果确实希望某一个分栏要这么宽,就修改背景图片。只需要修改5个图像中的left-top.gif,使它的覆盖范围更大就可以了。
如果并不需要这么宽,就可以对最大宽度进行限制。也就是说,当浏览器口超过一定宽度时,即使变得再宽,其内容也不再继续扩展。这需要用到前面制作“魔术布局”时介绍的max-width属性。同理.如果一个分栏过窄,视觉效果也会不好,因此也可以通过min-width属性限制最窄宽度。代码如下。
- #header,#pagefooter,#container{
- margin:0 auto;
- width:85%;
- min-width:500px;
- max-width:800px;
- }
前面在讲解“魔术布局”的时候提到过,这个方法存在一个问题,即IE 6不支持min-width和max-width这两个属性。同时给出了解决方法,即使用一个JavaScript小程序即可。在HTML的head部分加入如下语句,并将minmax.js文件保存到和页面同一个文件夹中即可。
上一篇:关于java的数组