PNG透明图片修饰的圆角形菜单


这个菜单是使用PNG透明图片修饰的圆角，如果想换颜色，你可以把PNG图片用图像编辑软件打开换个颜色就行了，代码真是非常简洁，很容易能看懂，这样你就可以容易修改菜单，以适合你的网站需要。

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>PNG修饰的导航菜单</title>
<style type="text/css">
body {
font-size:9pt;
font-family: sans-serif;
}
ul.tabs {
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
ul.tabs li {
     float: left;
     padding:0;
     margin: 0;
     padding-top: 0;
     background: url(/jscss/demoimg/200907/tab_right.png) no-repeat right top;
     margin-right: 1px;
   }
ul.tabs li a {
     display: block;
     padding: 8px;
     color: #fff;
     text-decoration: none;
     background: url(/jscss/demoimg/200907/tab_left.png) no-repeat left top;
   }
ul.tabs li a:hover {
     color: #ff0;
   }
  </style>
 </head>
 <body>
  <ul class="tabs">
   <li><a href="#">网页特效</a></li>
   <li><a href="#">源码下载</a></li>
   <li><a href="#">站长资源库</a></li>
   <li><a href="#">ASP源码</a></li>
   <li><a href="#">PHP源码</a></li>
   <li><a href="#">Ajax源码</a></li>
  </ul>
 </body>
</html>

上一个：CSS深蓝色鼠标悬停放大的国外菜单
下一个：带缓冲的伸缩下拉菜单

更多图片编程知识: