第1步 - 从语义标记的代码开始
要将页面布置为两列，您需要从基本页面结构开始。在这种情况下，我们将使用一些虚拟内容来创建两列模板。页面已分为五个单独的div，每个div都有一个唯一的ID选择器。div被标记; “容器”（包裹整个页面的内容），“top”（用于顶部横幅），“leftnav”（用于较小的左列），“content”（用于主要内容）和“footer”（用于页面底部的页脚）。
在本教程中，使用了明显的名称来帮助说明这一点，但可以使用任何名称。但是，最好根据它们的含义来命名类和id，而不是它们的外观。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第2步 - 为容器添加宽度和边距
要使内容从浏览器窗口（或视口）的边缘进入，我们需要在包含内容的主div上设置宽度和边距。
在这种情况下，我们将使用90％的宽度，因此使用的CSS声明是：“width：90％”。可以使用任何宽度，包括100％，这将强制内容到视口的左边缘和右边缘。
要将div放在视口中心，我们将左侧和右侧的“自动”边距应用。要将div从视口的顶部和底部移开，我们使用10px的边距。这些可以组合成一个简写的CSS声明：“margin：10px auto”。这将在顶部和底部应用10px的边距，向左和向右应用自动边距。
某些浏览器（特别是Win / IE5和Win / IE5.5）不支持自动左右边距。但是，通过添加两个简单的规则，这些浏览器将正确地居中包含块。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {/*new codes*/
width:90%;
margin:10px auto;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第3步 - 添加颜色，背景颜色和边框
要为主div添加颜色和背景颜色，请使用“background-color：#fff;” 和“颜色：＃333;”。
要将边框应用于div，请使用“border：1px solid grey;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;/*new codes*/
color:#333;/*new codes*/
border:1px solid gray;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第4步 - 添加行高
要提高可读性，可以增加文本的整体行高。如果它应用于此主div，它将在下面的所有div中级联。规则可以写成“line-height：130％;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第5步 - 设置顶部横幅的样式
要设置顶部div的样式，我们将在底部设置背景颜色，填充和边框。这三个声明将是：“padding：.5em;” 添加填充到div，“background-color：#ddd;” 添加背景颜色和“border-bottom：1px solid grey”以将边框应用于div的底部。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;/*new codes*/
background-color:#ddd;/*new codes*/
border-bottom:1px solid gray;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第6步 - 从h1中删除边距和填充
在顶部横幅内有一个H1标签。我们希望单词从div的顶部和左边缘坐下.5em。浏览器在H1上方添加不同数量的填充，最简单的方法是从H1中移除所有填充和边距，并让div提供填充。这是通过使用后代选择器来实现的 - “＃top h1 {padding：0; margin：0;}”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;/*new codes*/
margin:0;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第7步 - 将“float”应用于leftnav
要浮动左侧导航，我们需要使用规则：“＃leftnav {float：left;}”。当div设置为float时，还必须包含宽度，因此我们可以添加另一个声明：“width：160px;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;/*new codes*/
width:160px;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第8步 - 向leftnav添加边距和填充
接下来，我们将边距设置为“0”，添加1em的填充（这将使文本远离div的边缘）。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;/*new codes*/
padding:1em;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第9步 - 将边距设置为“content”div
下一步是整个过程中最重要的一步。“leftnav”div已经浮动，因此来自“content”div的文本将沿其左边缘向下流动，然后在其下方环绕。为了使文本显示在新列中，我们将margin-left应用于“content”div，确保宽度大于“leftnav”div的总宽度。在这种情况下，我们将使用“margin-left：200px”，这将在leftnav和主要内容之间给出40px的余量。
我们还将在“content”div的左侧应用边框。如果“leftnav”div比主要内容长，这可能是一个问题。如果是这种情况，边框可以应用于“leftnav”div的右侧而不是“content”div。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;/*new codes*/
border-left:1px solid gray;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
步骤10 - 向“content”div添加填充
要向内容div添加填充，请使用“padding：1em;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第11步 - 设置页脚样式
要设置页脚样式，我们首先需要将其设置为“clear：both”。这很关键，因为它会将页脚强制置于上方任何浮动元素下方。然后我们添加“padding：.5em”和“margin：0”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
}
#footer {
clear:both;/*new codes*/
margin:0;/*new codes*/
padding:0.5em;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第12步 - 为页脚添加颜色和背景颜色
要向页脚添加颜色和背景颜色，请使用以下声明：“color：＃333;” 和“background-color：#ddd;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
}
#footer {
clear:both;
margin:0;
padding:0.5em;
color:#333;/*new codes*/
background-color:#ddd;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
步骤13 - 向页脚添加边框
要在页脚顶部添加边框，请使用“border-top：1px solid grey;”。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
}
#footer {
clear:both;
margin:0;
padding:0.5em;
color:#333;
background-color:#ddd;
border-top:1px solid gray;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
第14步 - 删除顶部边距
要删除“leftnav”和“content”div中内容上方的空格，请使用以下规则：“＃leftnav p {margin：0 0 1em 0;}”和“#content h2 {margin：0 0 .5em 0; }”。
浏览器在段落和标题之上使用不同数量的边距。删除所有顶部边距是安全的，只要有底部边距以保持段落和标题与它们下面的元素分开。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
}
#footer {
clear:both;
margin:0;
padding:0.5em;
color:#333;
background-color:#ddd;
border-top:1px solid gray;
}
#leftnav p {
margin:0 0 1em 0;/*new codes*/
}
#conteent h2 {
margin:0 0 0.5em 0;/*new codes*/
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
步骤15 - 设置最大行长度
如果要在主要内容上设置最大宽度，可以通过添加新规则来执行此操作：“＃content {max-width：36em;}”。
虽然IE浏览器会忽略此规则，但其他符合标准的浏览器将不允许内容区域扩展到36em - 将线条长度保持在舒适的宽度。
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width:90%;
margin:10px auto;
background-color:#fff;
color:#333;
border:1px solid gray;
line-height:130%;
}
#top {
padding:0.5em;
background-color:#ddd;
border-bottom:1px solid gray;
}
#top h1 {
padding: 0;
margin:0;
}
#leftnav {
float:left;
width:160px;
margin:0;
padding:1em;
}
#content {
margin-left:200px;
border-left:1px solid gray;
padding:1em;
max-width:36em;/*new codes*/
}
#footer {
clear:both;
margin:0;
padding:0.5em;
color:#333;
background-color:#ddd;
border-top:1px solid gray;
}
#leftnav p {
margin:0 0 1em 0;
}
#conteent h2 {
margin:0 0 0.5em 0;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>效果图如下：
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
