本文讲解用HTML5和CSS搭建网页，主要学习网页布局。
先看效果图：
可以看到，网页分为四个板块，
- 最上方的页眉
- 左侧的导航栏
- 右侧的正文
- 底部的页脚
我们需要先用HTML5进行分区，再用CSS进行装饰。
HTML5代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--title表示网页名称-->
<title>网页布局</title>
<!-- 连接到进度条.css文件 -->
<link rel="stylesheet" type="text/css" href="网页布局.css"/>
</head>
<body>
<!-- 定义文档或节的页眉 -->
<header>
<h1>City Gallery</h1>
</header>
<!-- 定义导航链接的容器 -->
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<!-- 定义文档中的节 -->
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<!-- 定义文档或节的页脚 -->
<footer>
Copyright W3School.com.cn
</footer>
</body>
</html>
CSS代码如下：
/* 定义文档或节的页眉 */
header {
background-color:black;
color:white;
/* 水平居中对齐 */
text-align:center;
padding:5px;
}
/* 定义导航链接的容器 */
nav {
/* 文本行高 */
line-height:30px;
background-color:#aaaaff;
height:300px;
width:100px;
/* 元素向左浮动,默认不浮动 */
float:left;
padding:5px;
}
/* 定义文档中的节 */
section {
width:350px;
/* 元素向左浮动,默认不浮动 */
float:left;
padding:10px;
}
/* 定义文档或节的页脚 */
footer {
/* 页脚背景色 */
background-color:black;
/* 页脚文本颜色 */
color:white;
/* 在左右两侧均不允许浮动元素，不然页脚会显示在网页上方*/
clear:both;
/* 文本水平居中 */
text-align:center;
padding:5px;
}这里比较关键的是，float和clear参数，不然各个板块的位置会错乱。
对于各个参数的详细解析，后续会尽快补充。