TAB式導(dǎo)航欄的快捷實(shí)現(xiàn)(IE & FF)
系統(tǒng)
1528 0
應(yīng)同事要求做了一個(gè)，效果如下：
?
當(dāng)鼠標(biāo)移上時(shí)變色。
沒(méi)有使用腳本，純粹通過(guò)css實(shí)現(xiàn)。同時(shí)通過(guò)調(diào)整背景圖片位置的方式解決圖片的閃動(dòng)，主要代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TRS -- 導(dǎo)航</title>
<script type="text/javascript">
</script>
<style type="text/css">
#sys_menu a {width:106px;height:34px;display:block;float:left;background:url(btn.gif) 0px 0px no-repeat;font-family:"宋體";text-align:center;color:#fff;font-size:14px;font-weight:600;text-decoration:none;}
#sys_menu a:hover, #sys_menu a.on {background:url(btn.gif) -106px 0px no-repeat;}
#sys_menu a span {line-height:34px;}
</style>
</head>
<body style="position:relative;overflow:hidden;">
<div id="sys_menu">
<a href="#" class="on"><span>首頁(yè)</span></a><a href="#"><span>公司介紹</span></a><a href="#"><span>主要產(chǎn)品</span></a><a href="#"><span>奧運(yùn)專(zhuān)題</span></a>
</div>
</body>
</html>
?
span主要是為以后做擴(kuò)充而留的。
TAB式導(dǎo)航欄的快捷實(shí)現(xiàn)(IE & FF)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元