<ul></ul>和<li></li>标记是区块。
垂直导航栏
<!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" />
<style type="text/css">
body{margin:50px;}
ul{list-style-type:none;padding:0;width:160px;font-size:20px;}
li{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
</style>
<title>列表与导航</title>
</head>
<body>
<ul>
<li>么么哒</li>
<li>嗯嗯啊</li>
<li>哇咔咔</li>
<li>啦啦啦</li>
</ul>
</body>
</html>
注意,height属性是指区块的行高,line-height属性是指文字的行高,当两者一致,并将text-align属性设置为center时,就达到了将文字居于每个区块行中间的目的。同样的设置对<ul></ul>标记也有效。
水平导航栏
<!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" />
<style type="text/css">
body{margin:50px;}
#setting1{list-style-type:none;padding:0;width:160px;font-size:20px;}
#setting2{height:40px;line-height:40px;text-align:center;background:#ddd;margin:0;padding:2px 10px;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;}
#setting3{list-style-type:none;padding:0;width:800px;font-size:20px;line-height:30px;background:#ddd}
#setting4{float:left;background:#ddd;border-left:1px solid #fff;border-top:1px solid #fff;boder-right:1px solid #666;border-bottom:1px solid #aaa;padding:5px 20px;}
</style>
<title>列表与导航</title>
</head>
<body>
<ul ID="setting1">
<li ID="setting2">么么哒</li>
<li ID="setting2">嗯嗯啊</li>
<li ID="setting2">哇咔咔</li>
<li ID="setting2">啦啦啦</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/>
<ul ID="setting3">
<li ID="setting4">么么哒</li>
<li ID="setting4">嗯嗯啊</li>
<li ID="setting4">哇咔咔</li>
<li ID="setting4">啦啦啦</li>
</ul>
</body>
</html>