相关资料：
1。选择符
http://www.w3.org/TR/REC-CSS2/selector.html
2。典型实例
http://www.mozilla.org/
3。代码
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可伸缩的导航条</title>
<style type="text/css" media="screen">
body{font:Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0}
#nav{
padding:6px 0 0 40px;
width:100%;
float:left;/*保证里面的li也会显示在此背景中*/
background:#FFCB2D url(chapter2/img/nav_bg.gif) repeat-x bottom left;
margin:0;/*除去ul默认的上下间距,FF会显示出来，IE默认不会？*/
}
#nav li{
font-family:"黑体"; font-size:18px;
float:left;
list-style:none;/*除去默认的
项目圆点标示*/
}
#nav a{
float:left; display:block;
margin:0 6px 0 0; padding:4px 8px;
color:#333; text-decoration:none;
border:1px solid #9B8748; border-bottom:none;
background:#F9E9A9 url(chapter2/img/off_bg.gif) repeat-x left top;
}
#nav a:hover, #home a{/*默认首页选中*/
color:#333;
padding-bottom:5px; /*从4改为5以覆盖底边*/
border-color:#727377;
background:#FFF url(chapter2/img/on_bg.gif) repeat-x top left;}
</style>
</head>
<body id="dd">
<ul id="nav">
<li id="home"><a href="#">首页</a></li>
<li id="bbs"><a href="http://club.youshang.com/ysbbs/">论坛</a></li>
<li id="blog"><a href="http://club.youshang.com/action-blog">博客</a></li>
<li id="group"><a href="http://club.youshang.com/action-group">圈子</a></li>
<li id="image"><a href="http://club.youshang.com/action-image">相册</a></li>
</ul>
</body>
</html>
[/code]
