当前位置：首页> 正文

Dreamweaver CC教程：关于 CSS 页面布局结构

了解 CSS 布局的基本结构以及如何在 Dreamweaver 中使用 CSS 设计页面和内容。
关于 CSS 页面布局
CSS 页面布局使用层叠样式表格式（而不是传统的 HTML 表格或框架），用于组织网页上的内容。CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，在大多数情况下用作文本、图像或其他页面元素的容器。当您创建 CSS 布局时，会将 div 标签放在页面上，向这些标签中添加内容，然后将它们放在不同的位置上。与表格单元格（被限制在表格行和列中的某个现有位置）不同，div 标签可以出现在网页上的任何位置。可以以绝对方式（通过指定 x 和 Y 坐标）或以相对方式（通过指定其与当前位置的相对位置）定位 div 标签。还可通过指定浮动、填充和边距（当今 Web 标准的首选方法）放置 div 标签。
关于 CSS 页面布局结构
在开始本部分之前，您应当先熟悉基本的 CSS 概念。
CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，在大多数情况下用作文本、图像或其他页面元素的容器。下例显示了一个 HTML 页面，其中包含三个单独的 div 标签：一个大的“容器”标签和该容器标签内的另外两个标签（侧栏标签和主内容标签）。
CSS 页面布局结构
A. 容器 div B. 侧栏 div C. 主要内容 div
下面是 HTML 中全部三个 div 标签的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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 标签创建样式规则：

1
2
3
4
5
6
7

#container {
    width: 780px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
}

#container 规则将容器 div 标签的样式定义为 780 像素宽、白色背景、无边距（距离页面左侧）、有一个 1 像素宽的黑色实线边框、文本左对齐。将该规则应用于容器 div 标签的结果如下：
CSS 页面布局结构
容器 div 标签，780 像素，无边距

A. 文本左对齐 B. 白色背景 C. 1 像素宽黑色实线边框
下一个 CSS 规则为侧栏 div 标签创建样式规则：

1
2
3
4
5
6

#sidebar {
    float: left;
    width: 200px;
    background: #EBEBEB;
    padding: 15px 10px 15px 20px;
}

#sidebar 规则将侧栏 div 标签的样式定义为 200 像素宽、灰色背景、顶部和底部填充为 15 像素、右侧填充为 10 像素、左侧填充为 20 像素。（默认的填充顺序为顶部-右侧-底部-左侧。）另外，该规则使用“浮动: 左侧”属性定位侧栏 div 标签，该属性将侧栏 div 标签推到容器 div 标签的左侧。将该规则应用于侧栏 div 标签的结果如下：
侧栏 div，向左浮动
侧栏 div，向左浮动

A. 200 像素宽 B. 顶部和底部填充, 15 像素
最后，主容器 div 标签的 CSS 规则完成布局：

1
2
3
4

#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}

#mainContent 规则将主内容 div 的样式定义为左边距 250 像素，这意味着会在容器 div 左侧与主内容 div 左侧之间留出 250 像素的空间。另外，该规则在主内容 div 的右侧、底部和左侧各留出 20 像素的空间。将该规则应用于主内容 div 的结果如下：
完整代码如下所示：
主要内容 div，左边距 250 像素
主要内容 div，左边距 250 像素

A. 20 像素左侧填充 B. 20 像素右侧填充 C. 20 像素下方填充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<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>