船长 发表于 2009-02-15 13:21 | 分类：css | 阅读数：211 次
CSS样式表实现效果很好的分页效果，在学习编程过程中由于文章内容比较多或者列表内容比较多，我们都需要分页！那么你想不想要一种好的分页效果呢？这个是我认为比较容易使用，同时编程方面也挺容易实现的分页，就是以10页为基础，然后上十页和下十页，因为很少有人有兴趣会去看10页甚至20页以后的内容
<!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>CSS Pagination Style Template webjx.com</title> <style type="text/css"> <!-- #tnt_pagination { display:block; text-align:left; height:22px; clear:both; padding-top:3px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; } #tnt_pagination a:link, #tnt_pagination a:visited{ padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #EBEBEB; margin-left:5px; text-decoration:none; background-color:#F5F5F5; color:#0072bc; width:22px; font-weight:normal; } #tnt_pagination a:hover { background-color:#DDEEFF; border:1px solid #BBDDFF; color:#0072BC; } #tnt_pagination .active_tnt_link { padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #BBDDFF; margin-left:5px; text-decoration:none; background-color:#DDEEFF; color:#0072BC; cursor:default; } #tnt_pagination .disabled_tnt_pagination { padding:7px; padding-top:2px; padding-bottom:2px; border:1px solid #EBEBEB; margin-left:10px; text-decoration:none; background-color:#F5F5F5; color:#D7D7D7; cursor:default; } --> </style> </head> <body> <div id="tnt_pagination"> <span class="disabled_tnt_pagination">前10页</span><a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><span class="active_tnt_link">4</span><a href="#5">5</a><a href="#6">6</a><a href="#7">7</a><a href="#8">8</a><a href="#9">9</a><a href="#10">10</a><a href="#forwaed">后10页</a></div> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
验证条码： *
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
