当前位置： 首页 > JS代码 > JS特效代码 > CSS样式 > 第1页

分页居中/圆角宽度自适应实现

来源：懒人图库2012-01-03

<!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.lanrentuku.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.lanrentuku.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.lanrentuku.com/down/js/images/13255921110.png) left -17px no-repeat;}
.cutpage a.current span{background:url(http://www.lanrentuku.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>

来源：<a href="http://d2.sodao.com/?p=45" target="_blank">sodao</a> 更多代码请访问：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>
</body>
</html>

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

实现功能：
分页单个链接可用圆角图片，实现自适应宽度功能。
分页可由父层的text-align属性定义对齐方式。
主要属性:
display:inline-block

用到的图片：

↑上一篇：css显示隐藏层
↓下一篇：输入框输入提示代码

广告代码

共546个JS广告代码

››全部

特效代码

共322个JS特效代码

››全部

最新特效代码更多››

最新广告代码更多››