RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站
 当前位置:主页 >> 网页制作 >> CSS >> 文章内容
div+css:tab风格导航
[收藏此页[打印本页]   
来源:  作者:  发布时间:2007-12-27

网上比较流行的导航风格
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"> phperz~com
<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>

www.phperz.com


<div style="clear:both"></div>
</ul>
</div>
[Last Modified By Admin, at 2007-10-14 16:08:24]

 
 相关文章
 
发表评论
全部评论(0条)
 
 站内搜索
 热门搜索 mysql  基础  adodb  url
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长