DIV-CSS实例:CSS翻页效果(1)-歌特中国歌特金属,配置iis+php+mysql,关注学习(Sql,Net,Web2.0,Javacript,Seo,Cms)

February 2008

Parameters

17th

2008,02

DIV-CSS实例:CSS翻页效果(1)

DIV-CSS实例:CSS翻页效果(1)

表现形式:

1 2 3 4 5 6 7 8 9 这种样子.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></p>
<style type="text/css">
* { margin:0; padding:0; text-decoration:none;}
#pagebar { float:left; display:inline; width:570px; height:32px; margin:50px; font-size:13px; }
#pagebar a,#pagebar .page_now { display:block; float:left; margin-right:4px; padding:2px 5px; border:1px solid #f30; color:#fff; font-weight:800; background:url(#attachments/month_0801/v200811802116.png) repeat-x 0 0 ;}
#pagebar a { display:inline;}
#pagebar a:hover { border:1px solid #03c; background-position:0 -30px;}
#pagebar .page_now { border:1px solid #333; background-image:none; background:#666;}
</style>
<p></head></p>
<p><body></p>
<div id="pagebar">
<a href="#"><<</a>
<span class="page_now">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
<a href="#">>></a>
</div>
<p></body>
</html>