div+css实现的导航栏

89 阅读 0 评论 59 点赞

我是靠谱客的博主粗心柠檬，最近开发中收集的这篇文章主要介绍div+css实现的导航栏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

css文件：

.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul { list-style:none; margin:0px;}
.channel li { float:left; padding-left:8px; }
.channel a { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

页面文件：

<div class="channel">
<ul>
<li><a title="首页" target="none;" href="<%=request.getContextPath()%>/df.jsp">首页</a></li>
<li><a title="相册" href="#">相册</a></li>
<li><a title="好友" href="#">好友</a></li>
<li><a title="留言" href="#">留言</a></li>
</ul>
</div>

页面效果：

src="http://album.hi.csdn.net/app_uploads/suncheng_hong/20090108/120218965.p.png?d=20090108120259059" align="center" width="1275px" frameborder="no" height="110px">