本节将用一个简单的示例演示如何综合应用前面三节所学的知识构建一个静态网页.
如果你对如何综合运用我们之前讲述的知识完成一个实际的网页设计还感到无从下手，相信仔细研读这个例子后会有所帮助，并可以学到一些未提到的知识和技巧。
综合示例
例子中的代码并不一定是最佳的写法, 在写代码的路上, 没有最好, 只有更好!
例子中没有使用任何图片，所使用的颜色也只是黑、白、灰三色，一切力求精简。
最终效果如下图：
以下是 HTML文档代码
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS布局示例</title>
<link type="text/css" rel="stylesheet" href="example.css"/>
</head>
<body>
<div id="m-body">
<div id="title">DIV + CSS布局示例</div>
<div id="nav">
<ul>
<li>首页</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
<li>导航菜单</li>
</ul>
</div>
<div>
<div id="side">
<div class="item">
<p class="title">侧边栏标题</p>
<ul>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
</ul>
</div>
<div class="item">
<p class="title">侧边栏标题</p>
<ul>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
<li>菜单名称</li>
</ul>
</div>
</div>
<div id="content">
<div class="item">
<p class="title">栏目标题</p>
<ul>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
</ul>
</div>
<div class="item">
<p class="title">栏目标题</p>
<ul>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
</ul>
</div>
<div class="item">
<p class="title">栏目标题</p>
<ul>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
</ul>
</div>
<div class="item">
<p class="title">栏目标题</p>
<ul>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
<li><a href="#">栏目中文章的标题</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">版权声明 2013.6</div>
</div>
</body>
</html>
|
样式统一写在一个外联样式表文件中，文件名为 example.css，与HTML文档放置于同一文件夹下：
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
| * {font-size:12px; margin:0px; padding:0px;}
body {margin:0px;}
li {list-style:none;}
a {color:black;text-decoration:none;}
a:hover {color:#C00; text-decoration:underline;}
.clear {clear:both;}
#m-body {width:960px; margin:0px auto; border:1px dashed silver; border-width:0px 1px; background-color:#EEE;}
#title {height:100px; font-size:32px; font-family:黑体,sans-serif; line-height:100px; padding-left:50px;
background-color:#CCC;}
#nav {height:30px; line-height:30px; background-color:#333; color:#FFF; margin:5px 0px;}
#nav ul {margin-left:20px;}
#nav li {float:left; margin:0px 10px;}
#side {float:left; width:200px; padding:0px 5px;}
#side .item {border:1px solid #CCC; margin-bottom:20px;}
#side .item .title {height:30px; line-height:30px; background-color:#CCC; font-size:14px; padding-left:10px;}
#side .item ul {margin-left:15px;}
#side .item li {margin:10px 0px;}
#content {float:left; width:720px; margin-left:10px; padding-left:10px; border-left:1px dotted #CCC; min-height:500px;}
#content .item {width:320px; margin:7px; padding:10px; float:left; background-color:#FFF;}
#content .item .title {line-height:16px; font-size:16px; padding-left:8px; margin-bottom:10px; font-family:黑体,sans-serif;}
#content .item ul {margin-left:10px;}
#content .item li {line-height:22px;}
#footer {height:20px; line-height:20px; padding:5px 15px; margin:5px 0px; background-color:#333; color:#FFF; text-align:right; }
|
建议使用 Chrome 浏览器, 打开”开发者工具”，一边查看效果, 一边研究代码.
好了，就到这里.