带缺口导航的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 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站长站导航菜单【荐】