柠檬铺
—
由
<br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>分页居中/圆角宽度自适应-16素材网</title><br /> <style type="text/css"><br /> *{margin:0; padding:0;}<br /> body{padding:20px; text-align:center;}<br /> .cutpage{font-size:12px; font-family:Tahoma;}<br /> .cutpage a{display:inline-block; background:url(http://www.16sucai.com//uploadfile/file/01.png) left top no-repeat; height:17px; padding-left:5px; line-height:17px; text-decoration:none; margin:3px 3px 3px 0; vertical-align:middle;}<br /> .cutpage a span{ background:url(http://www.16sucai.com//uploadfile/file/01.png) right top no-repeat; padding-right:5px; display:inline-block; cursor:pointer; height:17px; line-height:17px;}<br /> .cutpage a.current{background:url(http://www.16sucai.com//uploadfile/file/01.png) left -17px no-repeat;}<br /> .cutpage a.current span{background:url(http://www.16sucai.com//uploadfile/file/01.png) right -17px no-repeat;}<br /> .cutpage a:link,.cutpage a:visited{color:#999;}<br /> .cutpage a:hover{background-position:left -17px; color:#fff;}<br /> .cutpage a.current:hover{color:#fff;}<br /> .cutpage a:hover span{background-position:right -17px;}<br /> .cutpage a.current:link,.cutpage a.current:visited{color:#fff;}<br /> </style><br /> </head><br /> <body><br /> <div style="width:300px; margin:0 auto;"><br /> <div class="cutpage" id="page"><br /> <a href="#" _fcksavedurl="#"><span>上一页</span></a><a href="#" _fcksavedurl="#" class="current" id="cutpage"><span>1</span></a><a href="#" _fcksavedurl="#"><span>2</span></a><a href="#" _fcksavedurl="#"><span>3</span></a><a href="#" _fcksavedurl="#"><span>4</span></a><a href="#" _fcksavedurl="#"><span>3</span></a><a href="#" _fcksavedurl="#"><span>4</span></a><a href="#" _fcksavedurl="#"><span>5</span></a><a href="#" _fcksavedurl="#"><span>6</span></a><a href="#" _fcksavedurl="#"><span>7</span></a><a href="#" _fcksavedurl="#"><span>8</span></a><a href="#" _fcksavedurl="#"><span>9</span></a><a href="#" _fcksavedurl="#"><span>10</span></a><a href="#" _fcksavedurl="#"><span>11</span></a><a href="#" _fcksavedurl="#"><span>14</span></a><a href="#" _fcksavedurl="#"><span>124</span></a><a href="#" _fcksavedurl="#"><span>下一页</span></a><br /> </div><br /> </div><br /> <p></p><br /> <p></p><br /> <p>更多代码请访问：<a href="http://www.16sucai.com" _fcksavedurl="http://www.16sucai.com" target="_blank">16素材网</a></p><br /> </body><br /> </html><br /> 提示：可修改后代码再运行!
实现功能： 分页单个链接可用圆角图片，实现自适应宽度功能。 分页可由父层的text-align属性定义对齐方式。 主要属性: display:inline-block
用到的图片：
