“1-3-1”布局可以产生很多不同的变化方式,如下: ● 三列都按比例来适应宽度; ● 一列固定,其他两列按比例适应宽度; ● 两列固定,其他一列适应宽度。 对于后两种情况,又可以根据特殊的一列与另外两列的不同位置,产生出若干种变化。这就像武侠小说中的武功,武林秘籍中的招数总是有限的.而实战中的变化则是无穷的。关键在于是否真正把其中的原理吃透了。最高的武功是所谓“大象无形”的境界,招数已经不重要了。 一、“1-3-1”三列宽度等比例布局 对于“1-3-1”布局的第一种情况,即三列按固定比例伸缩适应总宽度,和前面介绍的“1-2-1”的布局完全一样,只要分配好每一列的百分比就可以了。这里就不再介绍具体的制作过程了。 二、“1-3-1"单侧列宽度固定的变宽布局 对于一列固定,其他两列按比例适应宽度的情况,如果这个固定的列在左边或右边,那么只需要在两个变宽列的外面套一个div,并且这个div宽度是变宽的。它与旁边的固定宽度列构成了一个单列固定的“1-2-1”布局,就可以使用“绝对定位”的方法或者“改进浮动”法进行布局,然后再将变宽列中的两个变宽列按比例并排,就很容易实现了。lodidance.com 绝对定位法的制作过程就不再介绍了,这里仅给出使用浮动法的制作过程。假设现在希望side列宽度固定为200像素,而navi列和content列按照2:3的比例分配剩下的宽度。 请读者思考,如果按照图1所示的结构建立HTML结构,能否实现所需的效果? 图1 结构示意图 答案是否定的。wrap这个容器内部如果只有一个活动列,就像前面的“1-2-1”布局那样,这个活动列以标准流方式放置,它的宽度是自然形成的.这样显示效果是没有问题的。而当wrap容器中有两个浮动的活动列时,就需要分别设置宽度,分别为40%和60%(为了避免四舍五入误差,这里设置59.9%)。请特别注意,这时wrap列的宽度等于container的宽度,因此这里的40%并不是总宽度减去side的宽度以后的40%.而是总宽度的40%,这显然是不对的。 解决的方法就是在容器里面再套一个div.即由原来的一个wrap变为两层,分别叫做outcrWrap和innefWrap,结构如图2所示。 图2 修正后的结构示意图 这样,outerWrap就相当于上面错误方法中的wrap容器。新增加的innerWrap是以标准流方式存在的,宽度会自然伸展,由于设置了200像素的左侧margin,因此它的宽度就是总宽度减去200像素了,这样,innerWrap里面的navi和content就会都以这个新宽度为宽度基准。 CSS代码如下所示。本案例的文件位于网页学习网CSS教程资源的“第14章\1-3-1\一个固定列\1-(l-l-f)-1.htm”。 折叠展开CSS 代码复制内容到剪贴板 - #header,#pagefooter,#container{
- margin:0 auto;
- width:85%;
- }
-
- #outerWrap{
- float:left;
- width:100%;
- margin-left:-200px;
- }
-
- #innerWrap{
- margin-left:200px;
- }
-
-
- #navi{
- float:left;
- width:40%;
- }
-
-
- #content{
- float:right;
- width:59.5%;
- }
-
- #content img{
- float:right;
- }
-
-
- #side{
- float:right;
- width:200px;
- }
-
- #pagefooter{
- clear:both;
- }
HTML部分的关键代码如下。 折叠展开XML/HTML 代码复制内容到剪贴板 - <body>
- <div id="header">
- <div class="rounded">
- <h2>Page Header</h2>
- <div class="main">
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- <div id="container">
- <div id="outerWrap">
- <div id="innerWrap">
- <div id="navi">
- <div class="rounded">
- <h2>Navi Bar 1</h2>
- <div class="main">
- <p>
- 对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
-
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- <div id="content">
- <div class="rounded">
- <h2>Page Content</h2>
- <div class="main">
- <img src="images/cup.gif" width="128" height="128" />
- <p>
- 对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发,介绍CSS语言的特点。</p>
-
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="side">
- <div class="rounded">
- <h2>Side Bar 1</h2>
- <div class="main">
- <p>
- 对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。</p>
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- </div>
-
- <div id="pagefooter">
- <div class="rounded">
- <h2>Page Footer</h2>
- <div class="main">
- <p>
- 这是一行文本,这里作为样例,显示在布局框中。
- </p>
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- </body>
二、“1-3-1”中间列宽度固定的变宽布局 本小节将要介绍的布局形式是,固定列被放在中间,它的左右各有一列,并按比例适应总宽度。这是一种很少见的布局形式(最常见的是两侧的列固定宽度,中间列变化宽度)。在中文网站中几乎看不到对这种方式的讨论,英文网站中对这种布局的讨论也大都是作为对CSS的一种练习和研究。这里可以假设要做一个博客网站的页面,可设计为中间列放置链接、导航等内容,左边列放置各篇文章,右边列放置照片。当浏览器窗口变化时,左右两列会自动变化。这个博客页面的结构是很不错的。 如果读者已经充分理解了前面介绍的“改进浮动”法制作单列宽度固定的“1-2-1”布局,就可以把“负margin”的思路继续深化,实现这种不多见的布局。 假设,现在希望页而中间列的宽度是300像素,两边列等宽(不等宽的道理是一样的),即总宽度减去300像素后剩余宽度的50%。此时制作的关键是如何实现“(100%-300px)/2”的宽度。 注意:这里所讲的案倒是基于荷兰设计师Cerben提出来的方法实理的。该设计师的网站的网址是http://algemeenbekend.nl/misc/challenge_gerben_v2.html。遗憾的是他的网站不是英文的。 下面就来讲解“固定单列居中,两侧列适应”的布局方法。 这里以固定的“1-3-1”布局为基础。现在需要在navi和side两个div外面分别套一层div,把它们“包裹”起来,如图3所示。 图3 结构示意图 在“改进浮动”法中已经了解这样做的原因,就是依靠嵌套的两个div,实现相对宽度和绝对宽度的结合。 首先设置好HTML结构,代码如下。奉案例的文件位于网页学习网CSS教程资源的“第14章\1-3-1\一个固定列\1-(l-f-l)-1.htm”。 折叠展开XML/HTML 代码复制内容到剪贴板 - <body>
- <div id="header">
- <div class="rounded">
- <h2>Page Header</h2>
- <div class="main">
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- <div id="container">
- <div id="naviWrap">
- <div id="navi">
- <div class="rounded">
- <h2>Navi Bar</h2>
- <div class="main">
- <p>
- 对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。</p>
-
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- </div>
- <div id="content">
- <div class="rounded">
- <h2>Page Content</h2>
- <div class="main">
- <img src="images/cup.gif" width="128" height="128" />
- <p>
- 对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发,介绍CSS语言的特点。</p>
-
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- <div id="sideWrap">
- <div id="side">
- <div class="rounded">
- <h2>Side Bar</h2>
- <div class="main">
- <p>
- 但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。这是一行文本,这里作为样例,显示在布局框中。这是一行文本,这里作为样例,显示在布局框中。
- </p>
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="pagefooter">
- <div class="rounded">
- <h2>Page Footer</h2>
- <div class="main">
- <p>
- 这是一行文本,这里作为样例,显示在布局框中。
- </p>
- </div>
- <div class="footer">
- <p>
- 查看详细信息>>
- </p>
- </div>
- </div>
- </div>
-
- </body>
设置好HTML代码之后,CSS的相美部分代码如下所示。 折叠展开CSS 代码复制内容到剪贴板 - #header,#pagefooter,#container{
- margin:0 auto;
- width:85%;
- }
-
- #naviWrap{
- width:50%;
- float:left;
- margin-left:-150px;
- }
-
- #navi{
- margin-left:150px;
- }
-
-
- #content{
- float:left;
- width:300px;
- }
-
- #content img{
- float:right;
- }
-
- #sideWrap{
- width:49.9%;
- float:right;
- margin-right:-150px;
-
- }
-
- #side{
- margin-right:150px;
- }
-
- #pagefooter{
- clear:both;
- }
将左侧的naviWrap设置为50%宽度,向左浮动,并通过将左侧margin设置为-150像素,向左平移了150像素。然后在里面的navi中,左侧margin设置为-150像素,补偿回来这150像素。 接着,将content设置为固定宽度,先做浮动,这样就紧贴着navi的右边界。 最后将sideWrap做与navi部分相似的处理,设置为50%宽度,向左浮动。这时本来宽度已经超过100%.会被挤到下一行,但是将右侧margin设置为-150像素后,就不会超过总宽度了。 注意:在实际代码中,并不是将两个活动列宽度都设置为50%。而是将其中一个设置为49.9%。这是为了避免浏览器在计算数值时因四舍五入而导致总宽度大于100%,因此稍微窄一点点,就可保证最右边的列不会被挤到下一行。 这时的效果可以看到,浏览器宽度变化后,中间列的宽度保持不变,而两侧的列宽度发生了变化。 |