14.1 “1-2-1”变宽度网页布局

2020-12-13 15:52

阅读:393

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解。在本章中,将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定。因此.必须使用一些技巧来完成。

这里将介绍一些国外的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”。翦者使用“绝对定位法”制作,后者使用“浮动法”制作。

soscw.com,搜素材
图1 “1-2-1”等比例布局

我们将在前面制作的“1-2-1”浮动布局的基础上完成本案例。原来的“1-2-1”浮动布局中的宽度都是用像素数值确定的固定宽度,下面就来对它进行改造,使它能够自动调整各个模块的宽度。

实际上只需要修改3处宽度就可以了。代码如下。

折叠展开CSS 代码复制内容到剪贴板
  1. #content{   
  2.     float:rightright;   
  3.     width:760px/*删除原来的固定宽度*/  
  4.     width:85%; /*改为比例宽度*/      
  5.     }   
  6.   
  7. #content img{   
  8.     float:rightright;   
  9.     width:500px/*删除原来的固定宽度*/  
  10.     width:66%; /*改为比例宽度*/      
  11.     }   
  12.   
  13. #side{   
  14.     float:left;   
  15.     width:300px/*删除原来的固定宽度*/  
  16.     width:33%; /*改为比例宽度*/      
  17.     }  

经验: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属性限制最窄宽度。代码如下。

折叠展开CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  min-width:500px;   
  5.  max-width:800px;   
  6.  }

前面在讲解“魔术布局”的时候提到过,这个方法存在一个问题,即IE 6不支持min-width和max-width这两个属性。同时给出了解决方法,即使用一个JavaScript小程序即可。在HTML的head部分加入如下语句,并将minmax.js文件保存到和页面同一个文件夹中即可。

折叠展开XML/HTML 代码复制内容到剪贴板


评论


亲,登录后才可以留言!