网上比较流行的导航风格
css代码：
body, form{font-family: Verdana, Tahoma, '宋体', 'MS Sans Serif'; font-size:12px; margin:0;}
#header{margin-left:auto;margin-right:auto;width:100%;}
a:link, a:visited{text-decoration:none;color:#1F3A87}
a:hover{text-decoration:underline;color:#BC2931}
#header{height: 60px; background:#E1EEF6; border-bottom:1px solid #CCC}
#product{float:left;margin:12px 0 0 13px;}
#product h1{font-size:16px;font-weight:bold}
#nav{float:rightright;margin:10px 6px;font-size:12px;font-weight:bold;}
#menu{clear:both;margin:0;list-style:none;position:absolute;top:36px;rightright:5px;}
#menu li{float:rightright;margin:0 0px;padding:1px 12px;line-height:25px;border-bottom:0px;background:url(/attachments/date_200706/96cd523c157466b7f17cf8e1722bc166.gif) no-repeat}
#menu #selected{background:#fff;background:url(/attachments/date_200706/a5fb45a87ea911fb87e5f206b859f02d.gif) no-repeat}
html代码：
<div id="header">
<div id="product"><h1>足迹点滴</h1></div>
<div id="nav">欢迎您 moufer [<a href="http://www.wa666.cn/">注销身份</a>] [<a href="http://www.wa666.cn/">站点首页</a>]</div>
<ul id="menu">
<div style="float:right;width:5px;"></div>
<li><a href="http://www.wa666.cn/">数据管理</a></li>
<li><a href="http://www.wa666.cn/">模板管理</a></li>
<li><a href="http://www.wa666.cn/">用户管理</a></li>
<li><a href="http://www.wa666.cn/">分类管理</a></li>
<li><a href="http://www.wa666.cn/">系统设置</a></li>
<li id="selected"><a href="http://www.wa666.cn/">后台首页</a></li>
<div style="clear:both"></div>
</ul>
</div>
[Last Modified By Admin, at 2007-10-14 16:08:24]
