1
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml">
5
6 <head>
7
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9
10 <title>分页居中/圆角宽度自适应</title>
11
12 <style type="text/css">
13
14 *{margin:0; padding:0;}
15
16 body{padding:20px; text-align:center;}
17
18 .cutpage{font-size:12px; font-family:Tahoma;}
19
20 .cutpage a{display:inline-block; background:url(cutpage-bg.png) left top no-repeat; height:17px; padding-left:5px; line-height:17px; text-decoration:none; margin:3px 3px 3px 0; vertical-align:middle;}
21
22 .cutpage a span{ background:url(cutpage-bg.png) right top no-repeat; padding-right:5px; display:inline-block; cursor:pointer; height:17px; line-height:17px;}
23
24
25
26 .cutpage a.current{background:url(cutpage-bg.png) left -17px no-repeat;}
27
28 .cutpage a.current span{background:url(cutpage-bg.png) right -17px no-repeat;}
29
30 .cutpage a:link,.cutpage a:visited{color:#999;}
31
32 .cutpage a:hover{background-position:left -17px; color:#fff;}
33
34 .cutpage a.current:hover{color:#fff;}
35
36 .cutpage a:hover span{background-position:right -17px;}
37
38 .cutpage a.current:link,.cutpage a.current:visited{color:#fff;}
39
40 </style>
41
42 </head>
43
44
45
46 <body>
47
48 <div style="width:300px; margin:0 auto;">
49
50 <div class="cutpage" id="page">
51
52 <a href="#"><span>上一页</span></a><a href="#" class="current" id="cutpage"><span>1</span></a><a href="#"><span>2</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a><a href="#"><span>6</span></a><a href="#"><span>7</span></a><a href="#"><span>8</span></a><a href="#"><span>9</span></a><a href="#"><span>10</span></a><a href="#"><span>11</span></a><a href="#"><span>14</span></a><a href="#"><span>124</span></a><a href="#"><span>下一页</span></a>
53
54 </div>
55
56 </div>
57
58 </body>
59
60 </html>
61
<!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(cutpage-bg.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(cutpage-bg.png) right top no-repeat; padding-right:5px; display:inline-block; cursor:pointer; height:17px; line-height:17px;}
.cutpage a.current{background:url(cutpage-bg.png) left -17px no-repeat;}
.cutpage a.current span{background:url(cutpage-bg.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 class="cutpage" id="page">
<a href="#"><span>上一页</span></a><a href="#" class="current" id="cutpage"><span>1</span></a><a href="#"><span>2</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a><a href="#"><span>6</span></a><a href="#"><span>7</span></a><a href="#"><span>8</span></a><a href="#"><span>9</span></a><a href="#"><span>10</span></a><a href="#"><span>11</span></a><a href="#"><span>14</span></a><a href="#"><span>124</span></a><a href="#"><span>下一页</span></a>
</div>
</div>
</body>
</html>
