首页 > 代码库 > 14.1 “1-2-1”变宽度网页布局

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

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

这里将介绍一些国外的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 “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 代码复制内容到剪贴板
  1. <!--[if lte IE 6]>  
  2.      <script type="text/javascript" src="minmax.js"></script>  
  3. <![endif]-->

二、“1-2-1”单列变宽布局

在上面的例子中,当宽度变化时,各个部分的宽度都会变化,且它们之间的比例保持不变。实际上,只有单列宽度变化,而其他保持周定的布局可能会更实用。一般在存在多个列的页面中,通常比较宽的一个列是用来放置内容的,而窄列放置链接、导航等内容,这些内容一般宽度是固定的,不需要扩大。因此如果能把内容列设置为可以变化,而其他列固定,会是一个很好的方式。

例如在图2中,右侧的Side Bar的宽度固定,当总宽度变化时,Page Content部分就会自动变化。

图2 “1-2-1”单列变宽布局
图2 “1-2-1”单列变宽布局

如果仍然使用简单的浮动布局,是无法实现这个效果的,如果把某一列的宽度设置为固定值,例如200像素,那么另一列(即活动列)的宽度就无法设置了。因为总宽度未知,活动列的宽度也无法确定,那么怎么解决呢?

这里仍然给出两种方法,首先介绍比较容易理解的“绝对定位”法,然后再对“浮动”法进行改造。

1.“绝对定位”法

在前面讲解固定的“1-2-1”布局时,我们除了使用浮动之外,还使用绝对定位实现过的“1-2-1”布局,现在就以该方案为基础来实现单列适应宽度的制作方法,代码如下。

本案例的文件位于网页学习网CSS教程资源的“第14章\1-2-1\1-(l+f)-1-absolute.htm“。

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  }    
  5.   
  6. #container{   
  7.   position:relative; }   
  8.   
  9. #content{   
  10.     margin:0 300px 0 0;   
  11.     }   
  12.   
  13. #content img{   
  14.     float:right;   
  15.     }   
  16.   
  17. #side{   
  18.     position:absolute;   
  19.     top:0;   
  20.     right:0;   
  21.     width:300px;       
  22.     }

对上面的代码原理进行分析如下。

(1) 总宽度还是设置为85%,这样总宽度会随浏览器窗口变化。

(2) 将container的position属性设置为relative,使它成为container里面的列的定位基准。

(3) 使side列成为绝对定位,并紧贴container的右侧,宽度设为固定值300像素。

(4) 设置conient列的右侧margin,使它不会与side列重叠。

这样,就实现了单列固定的布局样式。但是前面提到过这种方法有一个同有的缺陷,也就是绝对定位的列将脱离标准流,从而它的高度将不会影响container的高度。这样页脚部分的位置只由content列的高度确定,而当窗口在变化宽度的时候,有可能会使固定宽度列的高度大于活动宽度列的高度,这时就会使固定宽度列与页脚部分重叠。

因此,使用这种方法的时候,要注意保证变宽度列的高度是最高的,就不会发生重叠的现象了。由于HTML代码没有变化,因此这里就不再罗列HTML代码了。

2.“改进浮动”法

现在考虑,使用浮动的方法,实现的困难在哪里。核心问题就是浮动列的宽度应该等于“100%-300px”,而CSS显然不支持这种带有加减法远算的宽度表达方法。但是通过margin可以变通地实现这个宽度。实现的原理是在content的外面再套一个div,使它的宽度为l00%.也就是等于container的宽度。然后通过将左侧的margin设置为负的300像素,就使它向左平移了300像素。再将content的左侧margin设置为正的300像素,就实现了“100%-300px”这个本来无法表达的宽度。

CSS样式代码如下,本案例的文件位于本书光盘的“第14章\1-2-1\1-(l+l)-1-float.htm”。

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  min-width:500px;   
  5.     max-width:800px;   
  6.   
  7.  }    
  8.   
  9.   
  10. #content{   
  11.     float:right;   
  12.     width:66%;     
  13.     }   
  14.   
  15. #content img{   
  16.     float:right;   
  17.     }   
  18.   
  19. #side{   
  20.     float:left;   
  21.     width:33%;   
  22.     }   
  23.   
  24. #pagefooter{   
  25.     clear:both;   
  26. }

注意,最核心的一点是在活动宽度列(即这里的content)外面又套了一层div.其id设置为contentWrap。中文的意思是content的“包装”,即它把content包裹起来。lodidance.com

contentWrap的宽度设置为100%宽度.同时将右侧的margin设置为“-300px”。注意这里是负值,即向左平移了300像素,并设置为向左浮动。content在它的里面,以标准流方式存在,将它的左侧margin设置为300像素,这样就可以保证里面的内容不会溢出到布局的外面。

这种方法的本质就是实现了content列的“100%-300像素”的宽度,确实非常巧妙。

这种方法的最大好处就是可以不用考虑各列的高度,通过设置页脚的clear属性,就可以保证不会发生重叠的现象。代码如下。

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2. <div id="header">  
  3.     <div class="rounded">  
  4.         <h2>Page Header</h2>  
  5.         <div class="main">  
  6.         </div>  
  7.         <div class="footer">  
  8.         <p>  
  9.         查看详细信息>>  
  10.         </p>    
  11.         </div>  
  12.     </div>  
  13. </div>  
  14. <div id="container">  
  15. <div id="content">  
  16.     <div class="rounded">  
  17.         <h2>Page Content 1</h2>  
  18.         <div class="main">  
  19.         <p>  
  20.         对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>  
  21.   
  22.         </div>  
  23.         <div class="footer">  
  24.         <p>  
  25.         查看详细信息>>  
  26.         </p>    
  27.         </div>  
  28.     </div>  
  29.     <div class="rounded">  
  30.         <h2>Page Content 2</h2>  
  31.         <div class="main">  
  32.         <img src="images/cup.gif" width="128" height="128" />  
  33.         <p>  
  34.         对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发,介绍CSS语言的特点,以及如何在网页中引入CSS,并对CSS进行初步的体验。</p>  
  35.   
  36.         </div>  
  37.         <div class="footer">  
  38.         <p>  
  39.         查看详细信息>>  
  40.         </p>    
  41.         </div>  
  42.     </div>  
  43. </div>  
  44. <div id="side">  
  45.     <div class="rounded">  
  46.         <h2>Side Bar 1</h2>  
  47.         <div class="main">  
  48.         <p>  
  49.         对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。CSS的功能十分强大而又灵活。</p>  
  50.         </div>  
  51.         <div class="footer">  
  52.         <p>  
  53.         查看详细信息>>  
  54.         </p>    
  55.         </div>  
  56.     </div>  
  57. </div>  
  58. </div>  
  59. <div id="pagefooter">  
  60.     <div class="rounded">  
  61.         <h2>Page Footer</h2>  
  62.         <div class="main">  
  63.         <p>  
  64.         这是一行文本,这里作为样例,显示在布局框中。   
  65.         </p>  
  66.         </div>  
  67.         <div class="footer">  
  68.         <p>  
  69.         查看详细信息>>  
  70.         </p>    
  71.         </div>  
  72.     </div>  
  73. </div>  
  74.   
  75. </body>

CSS布局中的很多方法都是一些非常杰出的设计帅的研究成果,正是他们不断地探索,才想出了很多非常好的方法,这里列举几篇非常重要的文章题目,这些设计师和他们的文章都极大地影响了Web设计和开发技术的发展。

● Ryan Brill:《Negative margins technique》

● Alex Robinson:<Any Order Columns)

● Eric Meyer:《Multi-unit Any Order Colums》

如果读者有兴趣,可以到互联网上找到这些文章,仔细研究。

前面介绍了按比例的宽度适应方法,以及单列宽度适应的制作方法。它们都是基于“1-2-1”布局来做的,制作3列布局或者更为复杂布局的页面的方法也是一样的。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/946.html