简约风格很多人会喜欢的纯CSS导航栏

2024-09-05 12:19:59

字体：大中小

来源：转载

供稿：网友

简约风格的CSS导航栏，相信很多人会喜欢！兼容性也不错，用到了两张背景图片，请自行下载，另外，本菜单如果在菜单中同时使用中文和英文字母的话，有个小问题就是菜单的高度会不一致，也希望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>#thicktabs{margin: 0;padding: 0;float: left;font: bold 12px Tahoma;}#thicktabs li{display: inline;}#thicktabs li a{float: left;color: black;padding: 8px 11px; text-decoration: none;background: transparent url(/jscss/demoimg/200906/pinkbg.gif) top right no-repeat;border-top: 1px solid #d3bdbe; border-bottom: 3px solid #ffa1a3; }#thicktabs li a#leftmostitem{ border-left: 1px solid #d3bdbe; /*left border style*/}#thicktabs li a#rightmostitem{ border-right: 1px solid #d3bdbe; /*right border style*/background-position: top left;}#thicktabs li a:visited{color: black;}#thicktabs li a:hover{color: black;background-image: url(/jscss/demoimg/200906/pinkbgover.gif); }</style></head><body><ul id="thicktabs"><li>主页</li><li>精品代码</li><li>源码下载</li><li>最新更新</li><li>网页特效</li><li>广告业务</li><li>关于我们</li><li>网站留言</li><li>联系我们</li></ul></body></html>

上一篇：CSS实现带滚动条的二级竖直菜单

下一篇：竖向蓝色漂亮CSS菜单，移动鼠标变背景