CSS样式表实现效果很好的分页效果源代码

王朝html/css/js·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

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 www.knowsky.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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航