Sprites实现翻页按钮，圆角，宽度不固定-优快云博客

本文介绍了一种使用CSS进行按钮及导航栏布局的方法，通过背景图片和内联块元素实现自适应宽度的按钮效果。文章提供了完整的HTML和CSS代码示例，并展示了如何通过:hover伪类增强交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到的素材

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

按钮宽度不固定。

<!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>

转载于:https://www.cnblogs.com/_dragon/archive/2009/11/04/1596083.html