PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

超漂亮的分页css样式

超漂亮的分页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图集单击图片翻页的功能
Tags: 漂亮   翻页   样式   css   分页  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号