站在css2.1的角度实现的demo，在不使用css3多背景的情况下，带有圆角的导航菜单，并且无论菜单文字的多少都能自适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 滑动门的核心，小图压大图，大图在伸展 */ ul.nav { padding: 0; margin: 0; list-style: none; overflow: hidden; } ul.nav li { background: url('img/tab-right.gif') no-repeat top right; float: left; } ul.nav a { background: url('img/tab-left.gif') no-repeat top left; display: block; line-height: 1.5em; padding: 0 0.8em; text-decoration: none; color: white; } </style> </head> <body> <ul class="nav"> <li><a href="#">滑动菜单1</a></li> <li><a href="#">滑动菜单2</a></li> <li><a href="#">滑动菜单3</a></li> <li><a href="#">滑动菜单圆角4</a></li> <li><a href="#">滑动菜单5</a></li> </ul> </body> </html>
演示地址：http://down.yesyes.wang/book/06/slide-nav.html