废话不多说，代码都在下面，大家可以看注释，这里自己写下来，便于以后查阅，以前这种自适应按钮图片的效果，都是分成三个小图片弄的，即左中右，今天有时间终于可以学习一下了。感觉非常好。本来是想上传附件的，可是对博客园不得后台不是很熟悉，找了很长时间没有找到，希望知道的可以告诉我一下，在此谢谢啦。有什么不足之处还希望多多指教。
<!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>滑动门第一步</title>
<style type="text/css">
/*重写ul,li.避免造成不同浏览器的兼容性问题。*/
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
list-style: none;
}
/*定义外围容器*/
.tabmenu
{
overflow: hidden;
300px;
font-size: 12px;
}
/*定义左侧的背景样式，请查看l.gif图片的样式*/
.tabmenu li
{
background: url(images/l.gif) no-repeat;
float: left;
}
/*定义右侧的背景样式，注意这里的 background-position: right top;不能省略，另外需要将a标签设置为容器元素请查看r.gif的效果*/
.tabmenu li span
{
background: url(images/r.gif) no-repeat;
display: block;
background-position: right top;
padding: 5px 18px;
}
/*总结，这个例子是一个非常非常简单的例子，让我们一起手动练习一下，加深印象，相信只要搞懂了这个小例子，其他的扩展都将不会是问题。*/
</style>
</head>
<body>
<ul class="tabmenu">
<li><span>语文</span></li>
<li><span>高等数学</span></li>
<li><span>中华人民共和国史</span></li>
</ul>
</body>
</html>
----------------
备注：
r.gif
l.gif
最终效果
