在網(wǎng)上看了一個(gè)效果不錯(cuò)的面包屑鏈接效果，先看看效果:
鏈接的效果還不錯(cuò)，引起了我的興趣。把代碼分析了一下。
需要一張圖片 7*56 ，這張圖片上半部分是>里面內(nèi)容透明，下半部分是>外面內(nèi)容透明。
這種面包屑效果的難點(diǎn)在于不規(guī)則的hover相應(yīng)區(qū)域。兩個(gè)相鄰鏈接標(biāo)簽A有重疊部分，鏈接通過(guò)A標(biāo)簽相應(yīng)hover效果。
重疊部分使用I標(biāo)簽，這樣在響應(yīng)當(dāng)前鏈接時(shí)I標(biāo)簽?zāi)苡凶筮?gt;效果。相鄰的鏈接響應(yīng)時(shí)使用A標(biāo)簽重疊部分顯示出右邊>標(biāo)簽。第一個(gè)鏈接沒(méi)有i標(biāo)簽，不需要左邊的>效果。
HTML代碼：
<div id="breadcrumbs">
<a class="crumbs-item" href="###"><strong>首頁(yè)</strong></a>
<a class="crumbs-item" href="###"><i></i>板塊1</a>
<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://m.tkk7.com/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://m.tkk7.com/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使用絕對(duì)定位7*28*/}
#breadcrumbs .crumbs-item:hover i{ background:url(http://m.tkk7.com/images/blogjava_net/hafeyang/breadcrumbs-item.gif) right bottom no-repeat;}
#breadcrumbs .crumbs-item:hover{ background-color: #fa9558;text-decoration:none;/*由于breadcrumbs-item.gif背景部分透明，設(shè)置背景色即hover背景色*/}