css 有彈動效果的網頁導航

2019-11-21 01:05:47

字體：大中小

來源：轉載

供稿：網友

<!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>這是一個導航</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://m.survivalescaperooms.com/upload/20091011190507833.gif">//m.survivalescaperooms.com/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://m.survivalescaperooms.com/web/">網頁制作</a></li> <li><a href="http://m.survivalescaperooms.com/flash/">Flash教程</a></li> <li><a href="http://m.survivalescaperooms.com/photoshop/">Photoshop教程</a></li> <li><a href="http://m.survivalescaperooms.com/">武林網</a></li> </ul> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：jQuery 行級解析讀取XML文件（附源碼）

下一篇：jquery select選中的一個小問題