简单分页页码制作

DOM设定：

<div class = "page-normal">

　　<span class = "page-prev"> &lt; </span>

　　<span class = "page-current"> 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 = "#"> 198 </a>

　　<a href = "#"> 199 </a>

　　<a href = "#"> 200 </a>

　　<a href = "#"> &gt; </a>

</div>

 

样式部分设定：

.page-normal {color:#ff6500; text-align:center; font-size:0px;}

.page-normal a, .page-normal .page-current, .page-normal .page-prev {padding:5px 7px; font-size:18px; margin-left:10px;}

.page-normal a {border:1px solid #ff9600; color:#ff6500; text-decoration:none;}

.page-normal a:hover {border:1px solid #ff6500; background:#ffbe94;}

.page-normal .page-current {border:1px solid #ff6500; color:#ff6500; background:#ffbe94;}

.page-normal .page-prev {border:1px solid #ffe3c6; color:#ffe3c6;}