快捷導(dǎo)航

css 有彈動(dòng)效果的網(wǎng)頁(yè)導(dǎo)航

更新時(shí)間：2009年10月11日 19:04:56 作者：

發(fā)了個(gè)韓國(guó)網(wǎng)站（www.firstkids.co.kr）給我，讓我用CSS寫一個(gè)類似這個(gè)網(wǎng)站的導(dǎo)航欄效果。思路是：背景圖像定位！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>這是一個(gè)導(dǎo)航</title> <style type="text/css"> #nav{ list-style:none; margin:0; padding:5px 0 0 0; background:#F0F0F0; } #nav li{ float:left; display:inline; margin-right:2px; } #nav a{ float:left; width:81px; height:28px; text-align:center; background:url(<A href="http://www.dbjr.com.cn/upload/20091011190507833.gif">http://www.dbjr.com.cn/upload/20091011190507833.gif</A>) no-repeat 0 -4px #F3602A; font:12px/24px '宋體'; color:#FFF; text-decoration:none; } #nav a:hover{ line-height:28px; background-position:0; } </style> </head> <body> <ul id="nav"> <li><a href="http://www.dbjr.com.cn/web/">網(wǎng)頁(yè)制作</a></li> <li><a href="http://www.dbjr.com.cn/flash/">Flash教程</a></li> <li><a href="http://www.dbjr.com.cn/photoshop/">Photoshop教程</a></li> <li><a href="http://www.dbjr.com.cn/">腳本之家</a></li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

相關(guān)文章

javascript+css 新聞顯示tab 選項(xiàng)卡效果
跟新浪的比較像啊，tab切換效果，門戶類網(wǎng)站用過(guò)的，大家可以看看。
2009-04-04
點(diǎn)擊后慢慢彈出下拉菜單效果代碼(欄目管理常用)
點(diǎn)擊后慢慢彈出下拉菜單，sky整理收集。
2010-07-07
javascript 彈性菜單，垂直的那種
javascript 垂直彈性菜單
2008-12-12
javascript實(shí)現(xiàn)操作cookie實(shí)現(xiàn)的可記憶菜單
javascript實(shí)現(xiàn)操作cookie實(shí)現(xiàn)的可記憶菜單...
2007-07-07
純CSS實(shí)戰(zhàn)豎向?qū)Ш讲藛危@也算是一個(gè)典型的CSS菜單啦，這里要用到兩個(gè)背景圖片，在鼠標(biāo)動(dòng)作時(shí)分別加載不同的背景圖片，以達(dá)到反差給人的清新效果，其實(shí)這種菜單的制作是很簡(jiǎn)單的，代碼量不大，作為初級(jí)者的教程還是很不錯(cuò)的。
2010-03-03

又一個(gè)漂亮的導(dǎo)航欄的下拉菜單

這篇文章主要介紹了又一個(gè)漂亮的導(dǎo)航欄的下拉菜單,需要的朋友可以參考下

2007-06-06

改寫一個(gè)簡(jiǎn)單的菜單彈性大小

看到一個(gè)簡(jiǎn)單的菜單樣式，由于是作者比較早的作品，視覺(jué)效果不太好，有點(diǎn)突兀自己做了一點(diǎn)小修改，模仿icon動(dòng)畫的效果(區(qū)別的關(guān)鍵點(diǎn)是getStyle取得當(dāng)前計(jì)算樣式這個(gè)函數(shù))

2010-12-12