剧情的落幕

<style> body {font-size:12px;} .nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;} .nav a {display:inline-block; margin:0 3px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg)  left bottom  no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;} .nav a span {display:inline-block; height:25px; line-height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right bottom no-repeat; padding-right:15px;} .nav a:hover {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;} .nav a:hover span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} .nav a.set {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF; } .nav a.set span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} </style> <div class="nav"> <a class="set" href="#"><span>首页</span></a> <a href="#"><span>分类一</span></a> <a href="#"><span>分类分类</span></a> <a href="#"><span>还可以再长一点</span></a> <a href="#"><span>欢迎</span></a> <a href="#"><span>我的博客</span></a> </div>
以前都是直接2张背景图，a{}，a:hover{}但都要设定width，这样就可以不设width。根据li中文字自动撑宽（当然最终宽度还是要取决于background-image的宽度）。
简单理解就是a{}为左边色块，a:hover{}为鼠标hover事件的色块。
span{}为右边色块
set{}为默认。
这里采取一张background-image，用background-position:{}选取~