我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

面包屑效果分析

在网上看了一个效果不错的面包屑链接效果,先看看效果:

 

链接的效果还不错,引起了我的兴趣。把代码分析了一下。

需要一张图片 7*56 ,这张图片上半部分是>里面内容透明,下半部分是>外面内容透明。


这种面包屑效果的难点在于不规则的hover相应区域。两个相邻链接标签A有重叠部分,链接通过A标签相应hover效果。

重叠部分使用I标签,这样在响应当前链接时I标签能有左边>效果。相邻的链接响应时使用A标签重叠部分显示出右边>标签。第一个链接没有i标签,不需要左边的>效果。

HTML代码:
<div id="breadcrumbs">
        
<class="crumbs-item" href="###"><strong>首页</strong></a>
        
<class="crumbs-item" href="###"><i></i>板块1</a> 
        
<class="crumbs-item" href="###"><i></i>子板块1</a>
        
<span class="crumbs-item current"><i></i><strong>议题1</strong> 
</span>
</div>
CSS代码:
#breadcrumbs{ margin-top:8px;overflow:hidden;border:1px solid #FFC3A5; height:28px; padding:0 1em 0 0;background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/menubg.gif) repeat-x #fa9558;line-height:27px;*line-height:26px;text-align:left;}
#breadcrumbs .crumbs-item
{ overflow:hidden; height:28px; padding:0 1.3em 0 1.3em;background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/breadcrumbs-item.gif) right top no-repeat; float:left; position:relative ; margin-right:-7px;/* margin-right:-7px;重叠效果*/}
#breadcrumbs .crumbs-item .strong
{color:#60afe6;*line-height:29px;_line-height:29px;}
#breadcrumbs .crumbs-item  i 
{ position:absolute; height:28px; width:7px; left:0px; top:0;/*i使用绝对定位7*28*/}
#breadcrumbs .crumbs-item:hover i
{ background:url(http://www.blogjava.net/images/blogjava_net/hafeyang/breadcrumbs-item.gif) right bottom no-repeat;}
#breadcrumbs .crumbs-item:hover
{ background-color: #fa9558;text-decoration:none;/*由于breadcrumbs-item.gif背景部分透明,设置背景色即hover背景色*/}


posted on 2011-03-10 11:34 衡锋 阅读(439) 评论(0)  编辑  收藏 所属分类: Web开发


只有注册用户登录后才能发表评论。


网站导航: