最近评论
正在载入评论列表...
教程：多个列的结构
Tutorial: Multiple Column Layouts
在本次教程中，你将创建一个多列、基于浮动的布局。在这个过程中，你将创建两列和三列的流式设计，以及一个固定宽度的设计。
开始之前，你需要到本书的配套网站www.sawmac.com/css/上下载教程文件。点击tutorial链接，下载文件。所有文件附在一个ZIP文档里面，因此你要先给它解压缩（详细的关于解压缩的说明也在该网站上）。用于本次教程的文件包含在名为chapter_11 → layoutl的文件夹里。
创建HTML架构
Structuring the HTML
创建一个基于CSS布局的第一步是辨别网页中的不同布局元素。你可以通过包围<div>标签里面的大块HTML来进行，它们中的每一个都代表了网页的不同部分。
1. 在文本编辑器中打开start.html文件，并点击HTML注释（<!--sidebar goes here-->）后面的空行。
你会看到，有些HTML的工作已经完成了：现在有了一个横幅和页脚。在你创建任何样式之前，需要给网页添加架构和内容。接下来要给左边工具条添加<div>标签。
2. 给这个工具条添加一个开始的<div>：<div id="sidebar">。然后按下Enter（Return）来创建一个新的空行。
如果你正从头创建一张网页，此时，你得给网页的工具条添加HTML，可能是网站上的一个文章列表、到相关网站的链接，等等。在这个例子中，HTML已经兼顾到了。链接的一个无序列表的代码正在另一个文件中等着你。你只需要把它复制并粘贴到这张网页上。
3. 打开文件sidebar.txt，复制所有内容，然后返回到start.html文件。把HTML粘贴到你在第2步中创建的<div>标签后面。
这个工具条的HTML差不多完成了。你只要关闭这个<div>标签。
4. 立即在你刚刚粘贴上的代码后面输入</div>。
你刚刚已经在网页中添加了第一个布局元素。你将给这个HTML一点样式，使它看起来像一个列。但是首先，需要再添加一些内容。
5. 把光标放在这个HTML注释（<!--main content goes here-->）后面的空行上，然后输入<div id="main">。
这个div放置网页的主内容。你也将从另一个文件中得到这个HTML。
6. 打开文件story.txt，复制所有内容，返回到start.html文件，然后把代码粘贴到刚创建的这个<div>标签后面。就像在第4步一样添加关闭的</div>标签。
这就是你创建设计时所需要的所有HTML。现在，把你的注意力放到创建CSS上。
创建布局样式
Creating the Layout Styles
如果现在预览网页，你会看到横幅、导航按钮和文本已经被定好了样式。这是因为这张网页附着了一个带有一些基本格式的外部样式表。接下来，将创建样式来格式化网页的列。
1. 在文本编辑器中，直接点击靠近文件顶部的关闭的</head>标签前面的空白处。输入<style type="text/css">，然后敲击Enter（Return）键。
这个代码是一个外部样式表的开始标签。就像本书的其他教程一样，你将在一个外部样式表中创建你的样式，使创建和检查样式变得更容易。一旦完成，应该把样式移到一个外部样式表里面，如第31页所述。
2. 给工具条元素添加一个样式，像这样：
#sidebar {
float: left;
width: 160px;
margin-top: 10px;
}
这个类样式把工具条div浮动到网页的左边，给了它一个160px的宽度，并增加了一点空间来把工具条与上方的横幅分离开来。width属性在这个样式中很重要：除非你正在浮动一个带有固定宽度的图片，否则应该始终给浮动元素设定一个宽度。浏览器会根据浮动内部的内容来设定宽度，导致不一致的结果。
3. 按下Enter（Return）键，然后输入</style>来完成外部样式表。在网页浏览器上预览网页。
现在这个工具条形成了一种左手边的列。当主列里面的文本碰到工具条的底部时，会包围工具条的底部，如图11-18所示。虽然这是浮动正常进行的方式，但它不是你在本例中所要的效果。为了使主体文本像它自身的列一样显示，得添加足够的左边距来缩进超出工具条右边沿的主文本。
4. 给第2列创建一个样式：
#main {
margin-left: 180px;
}
由于工具条为160px宽，一个180px的边距把主内容额外缩进了20px，在两列之间产生了一个槽。这个额外的白色空间不仅使文本更易于阅读，而且还使网页更美观。
现在预览网页，你会看到已经有了一个两列的布局。
添加另一列
Adding Another Column
如你所见，一个两列的设计并不难。添加第3列以便给访问者提供更多信息也不会更难。实际上，步骤十分类似于本章的前一部分。
1. 打开文件secondary.txt。从文件中复制所有HTML，然后返回到start.html文件。
下一列的HTML处在网页的两个div之间。
2. 就在工具条元素关闭的</div>之后点击（正好在HTML注释<!--main content goes here-->之前）。然后按下Enter（Return）键来创建一个空行。
当你使用很多个div来构造一张网页时，通常很难找到正确的方法关闭</div>。这就是为什么HTML注释——就像这样——可以真正帮助你识别和跟踪网页中的HTML。
3. 输入<div id="secondary">，按下Enter（Return），然后粘贴在第1步中复制的HTML。再次敲击Enter（Return）键，然后输入</div>。
当你关闭这个<div>标签时，就已经完成了网页第三列的HTML。接下来开始定义样式。
4. 在第309页第4步中创建过的#main样式下面，给外部样式表添加一个新样式：
#secondary {
float: right;
width: 180px;
}
你正把这个列浮动到网页的右边，用两边的工具条在两侧包围主内容。第一列的问题（见图11-18）也显示在这了——主内容包围了这个新工具条的下方。为了修正它，得给#main样式添加一个右边距。
5. 编辑#main样式，使它看起来像这样：
#main {
margin-left: 180px;
margin-right: 200px;
}
现在这张网页就是一个完整的3列布局了。在浏览器上测试网页。当你调整窗口尺寸时，会看到网页也调整到适合浏览器窗口的尺寸。
提示：在这个设计中，左右工具条都是固定宽度，因此即使当你使浏览器窗口更大时，它们也会保持相同的尺寸。你可以使那些列也改变宽度，简单地通过设定它们的宽度为百分比值，并改变#main样式的左右边距也为百分比。
你刚添加的新列看起来不太好看，因此在下一节中把它装饰一下。
添加一个“Faux列”
Adding a “Faux Column”
右手边的工具条在视觉上不够突出。你将用一个深色背景颜色和一些文本格式来修正它。
1. 通过添加一种深色背景颜色来编辑你在前面创建的#secondary样式。这个完整的样式应该看起来像这样：
#secondary {
float: right;
width: 180px;
background-color: #294E56;
}
现在右工具条的背景颜色真的很突出了，但是文本还是很暗，显得不突出。
2. 在内部样式表的底部添加另一个样式，使这个工具条里面的所有文本都为白色：
#secondary * {
color: #FFF;
}
这个样式利用了“通配选择器”（见第54页）。它等于说“把#secondary里面每个标签的文本颜色都设置成白色。”这是通常创建非常长的群选择器的一种快捷方式：#secondary h1、#secondary h2、#secondary p、#secondary a，等等。
接下来，你将创建一些样式来帮助调整字号、边距以及其他文本显示属性。
3. 添加下列样式到内部样式表中：
#secondary h3 {
font-size: 1.5em;
background: #73AFB7;
padding: 3px 5px 3px 10px;
}
#secondary h4 {
font-size: 1.2em;
margin: 10px 10px 5px 10px;
}
#secondary p {
font-size: 1.2em;
margin: 3px 10px 10px 10px;
line-height: 110%;
}
这些样式中的每一个都调整了用在工具条中的不同文本标签的字号。此外，你已经给工具条中介绍每个部分的标题添加了一种背景颜色。如果你现在于网页浏览器上预览网页，它应该看起来就像图11-19。
注意：#secondary样式——定义了工具条布局的那个——没有添加padding。但是文本没有提高到工具条的边沿，因为其他样式在工具条边沿和内部文本之间添加了空间。很清楚，在h3样式里面的padding和在h4和p样式里面的margin添加了所需的空间，这有两个好处。第一，避免了IE 5的盒模型问题，因此工具条的宽度在该浏览器上与在其他浏览器上相同（见第150页）；第二，工具条上也没有padding，可以使工具条里面主标题（“In the News”和“Around the Web”）的背景颜色跨越工具条的整个宽度。
这个工具条又出现了另一个问题——它的背景颜色达不到网页的底部。如果深色一直延伸到窗口的右边沿看起来效果就会更好些。
4. 在#secondary样式中，去除背景声明background-color: #294E56;。
你要右边工具条背后的颜色，但是用background-color属性不是个好办法。你要在网页背景上放一张图片并将它垂直平铺，因此无论网页有多高，背景图片都保持可见。
5. 给内部样式表的顶部添加一个body标签样式：
body {
background: url(images/bg/bg_column.gif) repeat-y right top;
}
这个bg_column.gif文件是个简单的实心颜色的图片，与右边工具条的宽度相同。repeat-y属性使图片只是上下平铺，并且right值把图片放在了网页的右边。
固定宽度
Fixing the Width
目前，网页是个流式设计（见第280页），意味着它将扩大到填满浏览器窗口的整个宽度。但是假设你宁可让网页总是保持相同的宽度——因为你不喜欢在电影院监视器上显示的样子，或者你不喜欢当浏览器窗口被缩到太小时设计所发生的变化。把流式设计变成固定宽度的设计很容易。从多添加一些HTML开始。
1. 直接在开始的<body>标签（<body id="feature">）后面添加一个新的<div>标签：
<div id="wrapper">
你正把全部网页包围在一个div里面，用来控制网页宽度。你得确保这个标签是关闭的。
