利用CSS创建垂直导航系统
在列表中具有垂直导航系统的基本页面
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<style type="text/css">
body{
font: 12pt Verdana, Arial, Georgia,sans-serif;
}
nav{
width: 150px;
float: left;
margin-top: 12px;
margin-right: 18px;
}
section{
width: 550px;
float: left;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Executive</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section>
<header>
<h1>About US</h1>
</header>
<p>111</p>
<ul>
<li><a href="#">Mission</a>:222</li>
<li><a href="#">History</a>:333</li>
<li><a href="#">Executive</a>:444</li>
<li><a href="#">Contact Us</a>:555</li>
</ul>
</section>
</body>
</html>
这个页面的内容建立在两个区域中：一个<nav>和一个<section>，前者包括导航系统，后者包含页面的主要文本。