Css paging effect creation

Css paging is used when I develop a website for the customer, so I take it out for beginners to learn. Here we only use the css paging effect instead of using the server script paging, this is just to make a beautiful effect. Let's take a look at the effect picture first.

This is the effect. The page effect is the same as that of the dz Forum. How can I implement it? Let's take a look at the source code and style.

<Div class = "jogger">
<Span class = "disabled"> </span>
<Span class = "current"> 1 </span>
<A href = "#? Page = 2 "> 2 </a>
<A href = "#? Page = 3 "> 3 </a>
<A href = "#? Page = 4 "> 4 </a>
<A href = "#? Page = 5 "> 5 </a>
<A href = "#? Page = 6 "> 6 </a>
<A href = "#? Page = 7 "> 7 </a>...
<A href = "#? Page = 199 "> 199 </a>
<A href = "#? Page = 200 "> 200 </a>
<A href = "#? Page = 2 ">></a>
</Div>

It is very simple, that is, the disabled of the jogger is defined, and the label of the current style is OK. Let's take a look at the style definition code.

DIV. jogger {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 2px;
MARGIN: 7px;
PADDING-TOP: 2px;
FONT-FAMILY: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
Text-align: right;
Font-size: 12px;
}
DIV. jogger {
PADDING-RIGHT: 0.64em;
PADDING-LEFT: 0.64em;
PADDING-BOTTOM: 0.43em;
MARGIN: 2px;
COLOR: # fff;
PADDING-TOP: 0.5em;
BACKGROUND-COLOR: #333;
TEXT-DECORATION: none;
Font-size: 12px;
}
DIV. jogger A: hover {
PADDING-RIGHT: 0.64em;
PADDING-LEFT: 0.64em;
PADDING-BOTTOM: 0.43em;
MARGIN: 2px;
COLOR: # fff;
PADDING-TOP: 0.5em;
BACKGROUND-COLOR: # fc8dbd
}
DIV. jogger A: active {
PADDING-RIGHT: 0.64em;
PADDING-LEFT: 0.64em;
PADDING-BOTTOM: 0.43em;
MARGIN: 2px;
COLOR: # fff;
PADDING-TOP: 0.5em;
BACKGROUND-COLOR: #333
}
DIV. jogger SPAN. current {
PADDING-RIGHT: 0.64em;
PADDING-LEFT: 0.64em;
PADDING-BOTTOM: 0.43em;
MARGIN: 2px;
COLOR: # fff;
PADDING-TOP: 0.5em;
BACKGROUND-COLOR: # fc8dbd
}
DIV. jogger SPAN. disabled {
DISPLAY: none
}

This is easy. Please refer to the original website conversion Source: www.111cn.net/cssdiv/css.html.