div+css实现的导航栏

最新推荐文章于 2021-08-03 22:50:18 发布

suncheng_hong

最新推荐文章于 2021-08-03 22:50:18 发布

阅读量998

点赞数

分类专栏： div+css 文章标签： css div url 相册 float c

本文链接：https://blog.csdn.net/suncheng_hong/article/details/3733528

版权

div+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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">