CSS 布局的基本构造块是 div 标签

七彩课堂[网页设计CSS教程系列]

在开始本部分之前，您应当先熟悉基本的 CSS 概念。
CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，在大多数情况下用作文本、图像或其它页面元素的容器。下例显示了一个 HTML 页面，其中包含三个单独的 div 标签：一个大的“容器”标签和该容器标签内的另外两个标签（侧栏标签和主内容标签）。
查看完全大小图形
A. 容器 div
B. 侧栏 div
C. 主要内容 div
下面是 HTML 中全部三个 div 标签的代码：

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
在上例中，任何 div 标签都没有附加“式样”。如果未定义 CSS 规则，每个 div 标签及其内容将位于页面上的默认位置。不过，如果每个 div 标签都有唯一的 ID（如上例所示），那么您就可以使用这些 ID 来创建在应用时更改 div 标签的样式和位置的 CSS 规则。
下面的 CSS 规则可以驻留在文档头或外部 CSS 文件中，用于为页面上的第一个 div 标签或“容器”div 标签创建样式规则：
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#container 规则将容器 div 标签的样式定义为 780 像素宽、白色背景、无边距（距离页面左侧）、有一个 1 像素宽的黑色实线边框、文本左对齐。将该规则应用于容器 div 标签的结果如下：
查看完全大小图形
容器 div 标签, 780 像素, 无边距
A. 文本左对齐
B. 白色背景
C. 1 像素宽黑色实线边框
下一个 CSS 规则为侧栏 div 标签创建样式规则：
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#sidebar 规则将侧栏 div 标签的样式定义为 200 像素宽、灰色背景、顶部和底部填充为 15 像素、右侧填充为 10 像素、左侧填充为 20 像素。另外，该规则使用“浮动: 左侧”属性定位侧栏 div 标签，该属性将侧栏 div 标签推到容器 div 标签的左侧。将该规则应用于侧栏 div 标签的结果如下：
查看完全大小图形
侧栏 div, 向左浮动
A. 200 像素宽
B. 顶部和底部填充, 15 像素
最后，主容器 div 标签的 CSS 规则完成布局：
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
#mainContent 规则将主内容 div 的样式定义为左边距 250 像素，这意味着会在容器 div 左侧与主内容 div 左侧之间留出 250 像素的空间。另外，该规则在主内容 div 的右侧、底部和左侧各留出 20 像素的空间。将该规则应用于主内容 div 的结果如下：
查看完全大小图形
主要内容 div, 左边距 250 像素
A. 20 像素左侧填充
B. 20 像素右侧填充
C. 20 像素下方填充
完整代码如下所示：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>

<div id="container">

<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>

<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
注：上面的示例代码是当您在使用随 Dreamweaver 提供的预设计布局创建新文档时创建两列固定左侧栏布局的代码的简化版本。。