Quite a number of web sites using digital pagination effect, pages on this site is also using this way, for example, use it is more beautiful.
the code example below

  code is as follows:  


<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Meta name="author" content="http://www.softwhy.com/"/>
<Head>
<Title> Ant tribe </title>
<Style type="text/CSS" >
ul
{
the list - style: none;

} ul li
{
float: left;
width: 22 px;
height: 22 px;
margin - left: 5 px;
}

a {
width: 20 px;
height: 20 px;
display: block;
text - align: center;
text - decoration: none;
background - color: white;
border: 1 px solid # 666;
}
a: hover
{
width: 40 px;
height: 30 px;
border: 1 px solid # 666;
position: absolute;
the line - height: 30 px;
margin: 0-5 px 0 to 10 px;
}
</style>
</head>
<Body>
<Ul>
<Li> <A href="http://www.jb51.net//web/#" >1 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >2 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >3 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >4 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >5 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >6 </a> </li>
<Li> <A href="http://www.jb51.net//web/#" >7 </a> </li>
</ul>
</body>
</html>

the above code to achieve the effect that we want to, the following brief introduction of implementation steps


This concludes the body part