首页 > 代码库 > 13.2 单列布局

13.2 单列布局

这显然是最筒单的一种布局形式。通过这个例子,希望读者能够顺便复习前面圆角框的制作方法。实现的效果如图1所示。本案例文件位于网页学习网CSS教程资源中“第13章\1-1-1.htm”。

图1 单列固定宽度的页面布局
图1 单列固定宽度的页面布局

一、放置第一个圆角框

先在页面中放置第一个圆角框,HTML代码如下。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2. <div id="header">  
  3.     <div class="rounded">  
  4.         <h2>Page Header</h2>  
  5.         <div class="main">  
  6.         <p>  
  7.         这是一行文本,这里作为样例,显示在布局框中。<br/>  
  8. 这是一行文本,这里作为样例,显示在布局框中。 </p>  
  9.         </div>  
  10.         <div class="footer">  
  11.         <p>  
  12.         查看详细信息>>  
  13.         </p>    
  14.         </div>  
  15.     </div>  
  16. </div>  
  17. </body>  

这组<div>……</div>之间的内容是固定结构的,其作用就是实现一个可以变化宽度的圆角框。要修改内容,只需要修改相应的文字内容或者增加其他图片内容即可。

注意:不要修改这组代码的结构。当需要多个圆角框时,直接复制并修改其中相应内容即可。

二、设置圆角框的CSS样式

为了实现圆角框效果,相应的CSS样式代码如下:

折叠CSS 代码复制内容到剪贴板
  1. body {   
  2. background#FFF;   
  3. font13px/1.5 Arial;   
  4. margin:0;   
  5. padding:0;   
  6. }   
  7.   
  8. .rounded {   
  9.   backgroundurl(images/left-top.gif)   top left no-repeat;   
  10.   width:100%;   
  11.   }   
  12. .rounded h2 {   
  13.   background:    
  14.     url(images/rightright-top.gif)    
  15.   top rightright no-repeat;   
  16.   padding:20px 20px 10px;   
  17.   margin:0;   
  18.      
  19.   }   
  20. .rounded .main {   
  21.   background:    
  22.     url(images/rightright.gif)    
  23.   top rightright repeat-y;   
  24.   padding:10px 20px;   
  25.     margin:-2em 0 0 0;   
  26.       }   
  27. .rounded .footer {   
  28.   background:    
  29.     url(images/left-bottombottom.gif)    
  30.   bottombottom left no-repeat;   
  31.   }   
  32. .rounded .footer p {   
  33.   color:#888;   
  34.   text-align:rightright;   
  35.   background:url(images/rightright-bottombottom.gif) bottombottom rightright no-repeat;   
  36.   display:block;   
  37.   padding:10px 20px 20px;   
  38.   margin:-2em 0 0 0;   
  39.   font:0/0;   
  40.   }

上面代码中的第一段是对整个页面的样式定义,例如文字大小等,其后的5段以.rounded开头的CSS样式都是为实现圆角框进行的设置。

注意:背景图片的路径不要弄错,否则将无法显示背景图片。

以上CSS代码在后面的制作中,都不需要调整,直接放置在<style></style>之间即可。此时网页的效果目前这个圆角框还没有设置宽度,因此它会自动伸展。

现在来给它设置固定的宽度。注意这个宽度不要设置在“.round”相关的CSS样式中,因为该样式会被页面中的各个部分公用,如果设置了固定宽度,其他部分就不能正确显示了。

因此,应该为该圆角框单独设置一个id,把针对它的CSS样式放到这个id的样式定义部分。设置margin实现在页面中居中,并用width属性确定固定宽度,代码如下:

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#content{   
  2. margin:0 auto;   
  3. width:760px;}

然后,在HTML部分的<div class="rounded">……</div>的外面套一个div,代码如下:

折叠XML/HTML 代码复制内容到剪贴板
  1. <div id="header">  
  2.     <div class="rounded">  
  3.         ……   
  4.     </div>  
  5. </div>

这时,在Firefox中的效果如图1所示,正确地实现了期望的效果。

但是在IE 6中的效果可以看到背景图像发生错误,这是由于IE 6本身的错误造成的,在IE 7中已经修正了这个错误。为了使背景图像在IE 6中也能正确显示,需要对圆角框设置增加对宽度的设置。实际上如果不设置为100%,也应该按照100%显示,但是人为设置lOO%后,会强制IE 6重新计算相关数值,从而正确显示背景图片。

折叠CSS 代码复制内容到剪贴板
  1. .rounded {   
  2.   backgroundurl(images/left-top.gif)   top left no-repeat;   
  3.   width:100%;   
  4.   }

修改后,在IE 6中的效果如图1所示。这是本章中最后一次修改关于“.rounded”部分的样式代码,以后就不会在涉及它的代码了,我们将把精力集中在如何制作出各种各样的完整页面布局上。

三、放置其他圆角框

接下来,将放置的圆角框再复制出两个,并分别设置id为“content”和“footer”,分别代表“内容”和“页脚”。相关代码如下:

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2. <div id="header">  
  3.     <div class="rounded">  
  4.         <h2>Page Header</h2>  
  5.         <div class="main">  
  6.         <p>  
  7.         这是一行文本,这里作为样例,显示在布局框中。<br/>  
  8. 这是一行文本,这里作为样例,显示在布局框中。 </p>  
  9.         </div>  
  10.         <div class="footer">  
  11.         <p>  
  12.         查看详细信息>>  
  13.         </p>    
  14.         </div>  
  15.     </div>  
  16. </div>  
  17. <div id="content">  
  18.     <div class="rounded">  
  19.         <h2>Page Content</h2>  
  20.         <div class="main">  
  21.         <p>  
  22.         这是一行文本,这里作为样例,显示在布局框中。<br />  
  23.         这是一行文本,这里作为样例,显示在布局框中。   
  24.         </p>  
  25.         <p>  
  26.         这是一行文本,这里作为样例,显示在布局框中。<br />  
  27.         这是一行文本,这里作为样例,显示在布局框中。   
  28.         </p>  
  29.         </div>  
  30.         <div class="footer">  
  31.         <p>  
  32.         查看详细信息>>  
  33.         </p>    
  34.         </div>  
  35.     </div>  
  36. </div>  
  37. <div id="pagefooter">  
  38.     <div class="rounded">  
  39.         <h2>Page Footer</h2>  
  40.         <div class="main">  
  41.         <p>  
  42.         这是一行文本,这里作为样例,显示在布局框中。   
  43.         </p>  
  44.         </div>  
  45.         <div class="footer">  
  46.         <p>  
  47.         查看详细信息>>  
  48.         </p>    
  49.         </div>  
  50.     </div>  
  51. </div>  
  52.   
  53. </body>

本章以后的代码都采用这种省略的写法,以省略号代替重复部分。如果读者阅读到这里,不理解省略了哪些代码.请务必复习前面章节的内容,以保证能够顺利地继续学习。lodidance.com

每一个部分中的内容可以随意修改,例如更改每一个部分的标题,以及相应的内容,也可以把段落文字彻底删掉。

从CSS代码中可以看到,3个div的宽度都设置为固定值760像素,并且通过设置margin的值来实现居中放置,即左右margin都设置为auto,就像左右两边各有一个弹簧一样,把内容挤在页面中央。

此外还需要注意,在每个圆角框的下部都有一行文字,即图中用灰色文字写作“查看详细信息”,这段文字是不能直接删除的,因为它承担着放置背景图像的任务。如果不希望看到这行文字,可以把这几个字删除,但是<p>和</p>这对标记不能删除。

然而即使删除了这几个字,只要保留了p标记,就会有一定的高度,这样会使每个部分的下部留有较大的一段空白。如果要减小这段空白,可以用CSS将这个p标记的文字高度和行高设置为0。

至此,最简单的一种布局就完成了。

如果希望3个div都紧靠页面的左侧或者右侧,又该怎么办呢?方法很简单,只需要修改3个div的margin值即可,具体的步骤如下。

如果要使它们紧贴浏览器窗口左侧,可以将margin设置为“0 auto 0 0”,即只保留右侧的一根“弹簧”,就会把内容挤到最左边了;反之,如果要使它们紧贴浏览器窗口右侧,可以将margin设置为“0 0 0 auto”,即只保留左侧的一根“弹簧”,就会把内容挤到最右边了。

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

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