分頁居中/圓角寬度自適應實現

2012-09-23　來源/作者：懶人圖庫　分類：CSS樣式　 «»

<!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=utf-8" />
<title>分頁居中/圓角寬度自適應-懶人圖庫</title>
<style type="text/css">
*{margin:0; padding:0;}
body{padding:20px; text-align:center;}
.cutpage{font-size:12px; font-family:Tahoma;}
.cutpage a{display:inline-block; background:url(http://www.cxj168.com/down/js/images/13255921110.png) left top no-repeat; height:17px; padding-left:5px; line-height:17px; text-decoration:none; margin:3px 3px 3px 0; vertical-align:middle;}
.cutpage a span{ background:url(http://www.cxj168.com/down/js/images/13255921110.png) right top no-repeat; padding-right:5px; display:inline-block; cursor:pointer; height:17px; line-height:17px;}

.cutpage a.current{background:url(http://www.cxj168.com/down/js/images/13255921110.png) left -17px no-repeat;}
.cutpage a.current span{background:url(http://www.cxj168.com/down/js/images/13255921110.png) right -17px no-repeat;}
.cutpage a:link,.cutpage a:visited{color:#999;}
.cutpage a:hover{background-position:left -17px; color:#fff;}
.cutpage a.current:hover{color:#fff;}
.cutpage a:hover span{background-position:right -17px;}
.cutpage a.current:link,.cutpage a.current:visited{color:#fff;}
</style>
</head>

<body>
<div style="width:300px; margin:0 auto;">
<div id="2igeqio" class="cutpage" id="page">
<a href="#">上一頁</a><a href="#" class="current" id="cutpage">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a><a href="#">14</a><a href="#">124</a><a href="#">下一頁</a>
</div>
</div>

<script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script>

來源：<a target="_blank">sodao</a> 更多代碼請訪問：<a href="http://www.cxj168.com/" target="_blank">懶人圖庫</a>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

實現功能：
分頁單個鏈接可用圓角圖片，實現自適應寬度功能。
分頁可由父層的text-align屬性定義對齊方式。
主要屬性:
display:inline-block

用到的圖片：