超漂亮的分页css样式
来源：phperz.com 作者：phperz.com 发布时间：2012-02-12
今天看到一个网站( www.bookcs.com )的分页按钮挺漂亮，于是把css拔了下来。有点像baidu,google的分页,实现上10页，下10页的效果。 效果如下 你也可以直接打开 www.bookcs.com 查看效果。 全整css样式和html代码 以下为引用的内容： !DOCTYPE html PUBLIC -//W3C//DTD
今天看到一个网站(www.bookcs.com)的分页按钮挺漂亮，于是把css拔了下来。有点像baidu,google的分页,实现上10页，下10页的效果。
效果如下
你也可以直接打开www.bookcs.com查看效果。
全整css样式和html代码
|
以下为引用的内容：
<!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=gbk" />
<style>
body{
font-size:12px;
}
a:link{
color:#16397D;
text-decoration:none
}
a:visited {
color:#3C5B96;
text-decoration:none;
}
a:hover{
color:#A34574;
text-decoration:none;
}
a:active{
color:#A34574;
text-decoration:none;
}
/*翻页样式*/
.thisclass a{
font-weight:800;
}
.i_page a{
padding-top:5px;
}
.pagelist{
height:40px;
line-height:40px;
text-align:center;
}
.pagelist li{
display:inline;
}
.pagelist a{
margin:3px;
padding-top:4px;
padding-bottom:2px;
padding-left:7px;
padding-right:7px;
border:1px solid #16397D;
}
.pagelist a:hover{
border:1px solid #993366;
color:#C90600;
}
</style>
</head>
<body>
<div class="pagelist"><li class='i_page'><a href='1.html'>1</a></li><li class='i_page'><a href='2.html'>2</a></li><li class='i_page'><a href='3.html'>3</a></li><li class='i_page'><a href='4.html'>4</a></li><li class='i_page'><a href='5.html'>5</a></li><li class='i_page'><a href='6.html'>6</a></li><li class='i_page'><a href='7.html'>7</a></li><li class='i_page'><a href='8.html'>8</a></li><li class='i_page'><a href='9.html'>9</a></li><li class='thisclass'><a>10</a></li><li><a href='11.html'>下10页</a></li>
</div>
</html>
|
demo地址:www.bookcs.com(去小说列表页看)
延伸阅读:Ajax+php实现分页css做的一个很漂亮的分页导航实现dedecms图集单击图片翻页的功能
