蓝色背景平滑的圆角形CSS菜单栏

2024-09-05 12:20:08

字体：大中小

来源：转载

供稿：网友

蓝色背景平滑的圆角形CSS菜单栏，有针对火狐和IE的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"><head><title>纯CSS横向导航条 - 菜单剧中、带阴影</title><style type="text/css">.images {background:#c00; width:20px; padding:1px;}#nav ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;}#nav li {display:table-cell; margin:0; padding:0;}#nav a {float:left; color:#000; background: #ccc url(/jscss/demoimg/200907/top_left.gif) no-repeat left top; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;}#nav a b {float:left; display:block; background:transparent url(/jscss/demoimg/200907/top_right.gif) no-repeat right top; padding:5px 16px 5px 12px;}#nav a:hover {background: #3a73ba url(/jscss/demoimg/200907/top_left.gif) no-repeat left top; color:#fff; cursor:pointer;} #nav .current a {background: #3a73ba} #nav {padding:2px 0 10px 0; background:#fff;} </style></head><body><div id="nav"><ul><li><b>网站首页</b></li><li class="current"><b>产品列表</b></li><li><b>客户服务</b></li><li><b>成功案例</b></li><li><b>联系我们</b></li><li><b>网站地图</b></li></ul></div></body></html>

上一篇：CSS黑白变成彩色图片的块状导航

下一篇：经典的蓝色竖排CSS网站菜单