CSS style sheet to achieve a good effect of the paging effect, in the process of learning programming because of the content of the article more or more list content, we all need pagination! So do you want a good paging effect? This is what I think is easier to use, while programming is also quite easy to implement pagination, is based on 10 pages, and then on 10 pages and 10 pages, because very few people are interested in going to see 10 pages or even 20 pages later content.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<div id= "Tnt_pagination" >
<span class= "Disabled_tnt_pagination" > First 10 pages </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 page </a></div>
</body>