帶缺口導航的CSS菜單欄

2024-09-05 12:19:49

字體：大中小

來源：轉載

供稿：網友

帶缺口導航的CSS菜單欄，這樣指示更清淅，獲得更好的用戶體驗，運行一下看看效果吧。

<!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" lang="gb2312" xml:lang="gb2312"><head><title>帶缺口導航的CSS菜單欄</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>#pointermenu{border-top: 7px solid black; margin: 0;padding: 0;}#pointermenu ul{margin: 0;margin-left: 15px;float: left;padding-left: 10px;font: 12px 宋體;background-color: black;background: black url(/jscss/demoimg/200905/leftround.gif) bottom left no-repeat;}* html #pointermenu ul{ margin-bottom: 1em;margin-left: 7px;}#pointermenu ul li{display: inline;}#pointermenu ul li a{float: left;color: white;font-weight: ;padding: 2px 11px 7px 7px;text-decoration: none;background: url(/jscss/demoimg/200905/bbbbb.gif) bottom center no-repeat;}#pointermenu ul li a:visited{color: white;}#pointermenu ul li a:hover, #pointermenu ul li a#selected{ color: white;background-color: darkred;}#pointermenu ul li a#rightcorner{padding-right: 0;padding-left: 8px;background: url(/jscss/demoimg/200905/rightround.gif) bottom right no-repeat;}</style></head><body><div   class="jlvxrhh"   id="pointermenu"><ul><li>主 頁</li><li>網頁特效</li><li>論壇程序</li><li>最新更新</li><li>下載排行</li><li>源碼分類</li><li>廣告服務</li><li>網站留言</li></ul></div><br style="clear: left" /></body></html>

上一篇：CSS漂亮的弧形按鈕菜單

下一篇：Chinaz站長站導航菜單【薦】