<html>
<head>
<style type="text/css">
* {
margin:0 auto;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#09f;
}
ul li {list-style:none;}
.nav {width:900px;height:auto;}
.nav ul {
margin:10px;
list-style:none;
width:900px;
}
.nav ul li {float:left;}
.nav ul li a:link,a:visited {
padding:10px 20px;
background:#000;
color:#fff;
text-decoration:none;
text-transform:capitalize;
}
.nav ul li a:hover {
background:#ccc;
color:#fff;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">news</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">clients</a></li>
<li><a href="#">blog</a></li>
</ul>
</div>
</body>
</HTML>
我把头部加上
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text ml; charset=gbk" />
<title>竖导航条</title>
然后内容就变了·导航的大小变了
