Sprites实现翻页按钮，圆角，宽度不固定

用到的素材

用这张图片实现如下图样式

按钮宽度不固定。

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<head>
<style type="text/css">
html,body{ margin:0; padding:0; font-size:12px; text-align:center;}
a{
display:inline-block;
/*display:-moz-inline-box; 测试FF的私有属性*/
background:url(q1.gif) no-repeat left top;
text-decoration:none;
padding-left:8px;
color:#FFF;

}
a:hover{ background:url(q1.gif) no-repeat left -24px; color:#000;}
span{
display:inline-block;
/*display:-moz-inline-box;测试FF的私有属性*/
background:url(q1.gif) no-repeat right top;
height:24px;
line-height:24px;
padding-right:8px;
cursor:pointer;

}
a:hover span{ background:url(q1.gif) no-repeat right -24px;}
</style>
</head>
<body>
<div>
 <a href="#"><span>上一页</span></a>
    <a href="#"><span>1</span></a>
    <a href="#"><span>2</span></a>
    <a href="#"><span>99</span></a>
    <a href="#"><span>下一页</span></a>
</div>
</body>
</html>

 

posted @ 2009-11-04 16:59  ._  阅读(225)  评论(0)  编辑  收藏  举报