面包屑效果纯CSS实现导航标签
1、在不同的页面为<body>标签添加一个id。比如首页是<body id=”home”>,赛事报道页面则是<body id=”report”>,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):
#home .nav_home a:link,#report .nav_report a:link {background-position:0 -78px;color:#005ea5;}
2、你可以通过服务器端动态语言或者Javascript为导航标签动态添加类。<li class="<?php if(is_home()) { echo'current'; } ?>"><a href="<?php echo get_option('home'); ?>/">首页</a></li>
3、li添加class(ajart)补充
4、给所有的li都添加class
1.HTML代码:
<ul id="breadcrumb"><li><a href="http://hi.baidu.com/sandywk/"><img src="http://hiphotos.baidu.com/sandywk/pic/item/d3b01b863934bb18c65cc3b8.jpg" alt="Home" class="home" /></a></li>
<li><a href="http://hi.baidu.com/sandywk/" class="chinese">博客</a></li>
<li><a href="http://hi.baidu.com/sandywk/" class="chinese">日志分类</a></li>
<li><a href="http://hi.baidu.com/sandywk/">jQuery</a></li>
<li><a href="http://hi.baidu.com/sandywk/" target="_blank" title="订阅本日志"><img src="http://hiphotos.baidu.com/sandywk/pic/item/a2758daec7ba2dfe7cd92abb.jpg" alt="订阅本日志" class="home" /></a></li>
<li>Search Result</li>
<li style="float:right;">
<form action="http://hi.baidu.com/sandywk/">
<div>
<input type="text" name="" size="31" />
<input class="srch" src="http://hiphotos.baidu.com/sandywk/pic/item/3c21a4341fb7692390ef3986.jpg" type="image">
</div>
</form>
</li>
</ul>
上面的HTML代码没什么特别之处,只是些HTML列表(list)而已。值得注意的是: 当列表内容是图片,使用了CLASS ('home');当列表内容是中文,使用CLASS ('chinese')。此外,因为搜索栏是靠右的,所以其列表使用了CSS 'float:right'。
2. CSS代码
<style type="text/css">body{font: 12px Arial, Helvetica, sans-serif;}
h1{font-size:22px;}
#breadcrumb{
background:url('http://hiphotos.baidu.com/sandywk/pic/item/557d903412980cb9a61e12bd.jpg') repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a{
height:30px;
display:inline;
float:left;
background-image:url('http://hiphotos.baidu.com/sandywk/pic/item/bcb893faea7be3104f4aea81.jpg') no-repeat right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
#breadcrumb a:hover{color:#35acc5;}
.home{border:none;margin: 8px 0px;}
.srch{display:inline; padding:5px 10px 0 0;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.srch{display:inline; padding:7px 10px 0 0;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
.chinese{ margin-top:2px;}
</style>
<![endif]-->
#breadcrumb a, 加入了float:left,这解决了导航条在IE6下的显示问题,另外使用GIF替代PNG,还有一些小调整。最后要提醒注意的是:为IE6和IE专门定制了CSS,用来解决本文开头提到的浏览器兼容问题。