13.5 ＂1-((1-2)+1)-1＂固定宽度布局

下面再来实现一个"1-((1-2)+1)-1"的布局。如果读者还不清楚这种布局方式的表示方法，请阅读本章的13 .1节。本案例的最终效果如图1所示。

图1 “1-((1-2)+1)-1”布局效果

案例文件位于网页学习网CSS教程资源中“第13章\1-((1-2)+1)-1.html”。

这个案例的HTML结构比较复杂，在写代码的时候，应尽可能缩进排列代码，并加上易于理解的注释。特别是每个</div>是和哪个<div>相互对应的，应该通过注释的方式写清楚。请注意下面代码中粗体字的注释语句，这样就不容易混乱了。HTML的关键代码如下。lodidance.com

折叠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="content">
<div id="banner">
<div class="rounded">
<h2>Banner</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="colums">
<div id="col-a">
<div class="rounded">
<h2>Colum A</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="col-b">
<div class="rounded">
<h2>Colum B</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语言一定不会感到陌生，因为它是所有网页制作的基础。对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
<div class="rounded">
<h2>Side Bar 2</h2>
<div class="main">
<p>
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
</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>

相应的CSS样式代码如下所示，可以看到是非常简洁的。

折叠CSS 代码复制内容到剪贴板

#header,#pagefooter,#container{
margin:0 auto;
width:760px;
}
#container #content{
float:left;
width:560px;
}
#container #content #col-b,
#container #content #col-a {
float:left;
width:280px;
}
#container #content #col-a img{
float:left;
}
#container #content #col-b img{
float:right;
}
#container #side{
float:left;
width:200px;
}
#pagefooter{
clear:both;
}

上面一共有7段CSS样式代码，其中：

● 第1段是设置最外层的3个div的宽度和居中样式；

● 第2段设置container中的content向左浮动，并设置固定宽度560像素；

● 第3段设置content的columns中的左右两个分栏向左浮动，并均设置为280像素宽；

● 第4段和第5段分别设置columns中两个分栏中的图像的文字环绕方式；

● 第6段设置container中右侧边栏向左浮动，并设置它的宽度为200像素；

● 第7段设置最底下的pagefooter，清除上面的浮动对它的影响。

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

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/944.html