Web编程前端之4：css+div多样式可定制完美分页全攻略

最近做一个项目中，遇到分页的问题，之前用的分页都是拷贝别人用jquery写好的样式，很方便，但是想定制自己的样式，却很麻烦，于是乎下定决心自己做一个可以任意更改样式，而且只需修改css，其它代码完全不用改动的扩展性非常强的分页效果，把这一成果的大致步骤分享如下：

第一步：收罗几种效果不错，但编码非常简洁的分页原型

　　我在开源中国下载的“24款CSS分页样式”，外观大气、简洁，最主要的是代码简洁，易定制成自己的样式，

　　截个图先：

　　我选择的是打勾的那个样式，其原始css和div部分非常简单，连js、jquery都没有，如下：

 

/*CSS green-black style pagination*/

DIV.green-black { padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; }
DIV.green-black A { border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(image1.gif) #2c2c2c; padding-bottom: 2px; border-left: #2c2c2c 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #2c2c2c 1px solid; text-decoration: none; }
DIV.green-black A:hover { border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid; }
DIV.green-black A:active { border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid; }
DIV.green-black SPAN.current { border-right: #aad83e 1px solid; padding-right: 5px; border-top: #aad83e 1px solid; padding-left: 5px; font-weight: bold; background: url(image2.gif) #aad83e; padding-bottom: 2px; border-left: #aad83e 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #aad83e 1px solid; }
DIV.green-black SPAN.disabled { border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid; }

<p>Green-Black Style 
<div class="green-black"><span class="disabled"> <  Prev</span><span class="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="#">199</a><a href="#">200</a><a href="#">Next  > </a></div></p>

 　　

　　好了，只要用这段css和div外加2张图片，就可以看到原生态的分页效果了！

 

第一步：简单修改一下css，定制成自己的样式

　　不过我又把css样式稍微修改了一下，做成符合我网站风格的样式，截个图看看：
　　

　　修改后的css如下：

　　

/*CSS green-black style pagination*/
DIV.green-black {  text-align: center; }
DIV.green-black A { border: #222 1px solid; padding: 2px 5px; background: #333333 url(../images/pagination/topnav_bg.gif) 50% 50% repeat-x; color: #fff; margin-right: 2px; float:left; text-decoration: none; }
DIV.green-black A:hover { border: #ffaf0f 1px solid; background: #f58400 url(../images/pagination/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x; color: #fff; }
DIV.green-black A:active { border: #59b4d4 1px solid; background: #0078a3 url(../images/pagination/ui-bg_glass_40_0078a3_1x400.png) 50% 50% repeat-x; color: #fff; }
DIV.green-black A.current0 { border: #59b4d4 1px solid; padding: 2px 5px; font-weight: bold; background: #0078a3 url(../images/pagination/ui-bg_glass_40_0078a3_1x400.png) 50% 50% repeat-x; color: #fff;}
DIV.green-black A.disabled { border: #222 1px solid; padding: 2px 5px;background: #333333 url(../images/pagination/topnav_bg.gif) 50% 50% repeat-x; color: Gray;}

 

第三步：编代码，给这段div赋值，使它动起来，完成最后阶段

 　　截个图，对代码中的一些数据说明一下，中间5个数字是变动的，

　　

<div class="green-black">
                    <!--处理previous及头部状态-->
                    <% if (this.MessageBegin <= 7 || totalCount <= 10) {%>
                    <a class="disabled">< Previous</a><%}
                       else { %><a href="/Pages/MessageBoard.aspx?begin=<%=this.MessageBegin-1%>">< Previous</a><%}%>
                    <%for (int f = 1; f <= totalEnd && f <= 2; f++) {%>
                    <a class="<%=(f==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=f%>">
                        <%=f %></a>
                    <%} if (newIndex > 3) {%>
                    <a href="/Pages/MessageBoard.aspx?begin=<%=newIndex-1%>">...</a>
                    <%} %>
                    <!--处理中间数字循环状态-->
                    <% for (int i = newIndex; i <= Math.Min(totalEnd, newIndexEnd); i++) {%>
                    <a class="<%=(i==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=i%>">
                        <%=i%></a>
                    <% }%>
                    <!--处理next及尾部状态-->
                    <%if ((totalEnd - newIndex) > 7) {%>
                    <a href="/Pages/MessageBoard.aspx?begin=<%=newIndexEnd+1%>">...</a> <a href="/Pages/MessageBoard.aspx?begin=<%=totalEnd-1%>">
                        <%=totalEnd-1%></a> <a href="/Pages/MessageBoard.aspx?begin=<%=totalEnd%>">
                            <%=totalEnd%></a><a href="/Pages/MessageBoard.aspx?begin=<%=this.MessageBegin+1%>">Next
                                ></a>
                    <% }
                      else {
                          for (int j = newIndexEnd + 1; j <= totalEnd; j++) {%>
                    <a class="<%=(j==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=j%>">
                        <%=j%></a>
                    <%}%>
                    <a class="disabled">Next ></a>
                    <% }%>
                </div>

 

　　至此，分页就全部结束了，其中里面有换行不懂的地方，欢迎留言！