五款漂亮的jquery分页

1、新建html文档。

2、书写hmtl代码。

<div class="content">

  <div class="demo">

    <h1>Demo 1</h1>

    <div id="demo1"> </div>

  </div>

  <div class="demo">

    <h1>Demo 2</h1>

    <div id="demo2"> </div>

  </div>

  <div class="demo">

    <h1>Demo 3</h1>

    <div id="demo3"> </div>

  </div>

  <div class="demo">

    <h1>Demo 4</h1>

    <div id="demo4"> </div>

  </div>

  <div id="paginationdemo" class="demo">

    <h1>Demo 5</h1>

    <div id="p1" class="pagedemo _current" style="">Page 1</div>

    <div id="p2" class="pagedemo" style="display:none;">Page 2</div>

    <div id="p3" class="pagedemo" style="display:none;">Page 3</div>

    <div id="p4" class="pagedemo" style="display:none;">Page 4</div>

    <div id="p5" class="pagedemo" style="display:none;">Page 5</div>

    <div id="p6" class="pagedemo" style="display:none;">Page 6</div>

    <div id="p7" class="pagedemo" style="display:none;">Page 7</div>

    <div id="p8" class="pagedemo" style="display:none;">Page 8</div>

    <div id="p9" class="pagedemo" style="display:none;">Page 9</div>

    <div id="p10" class="pagedemo" style="display:none;">Page 10</div>

    <div id="demo5"> </div>

  </div>

</div>

</div>

3、书写css代码。

body { background: #a7c7dc url(../images/bg.png) repeat-x top left; font-family: verdana; padding: 0px; margin: 0px; letter-spacing: 2px; }

.header { position: absolute; top: 0px; left: 0px; width: 100%; height: 80px; }

.header h1 { color: #fff; font-size: 38px; margin: 0px 0px 0px 30px; font-weight: 100; line-height: 80px; padding: 0px; }

.footer { width: 100%; margin: 10px 0px 5px 0px; }

a img { border: none; outline: none; }

.content { margin-top: 100px; padding: 0px; bottom: 0px; }

.about { width: 100%; height: 400px; background: transparent url(../images/about.png) repeat-x top left; border-top: 2px solid #ccc; border-bottom: 2px solid #000; }

.about .text { width: 16%; margin: 5px 2% 10px 2%; height: 380px; float: left; color: #FCFEF3; font-size: 16px; text-align: justify; letter-spacing: 0px; }

.about .text h1 { border-bottom: 1px dashed #ccc; color: #fff; }

.demo { width: 580px; padding: 10px; margin: 10px auto; border: 1px solid #fff; background-color: #f7f7f7; }

h1 { color: #404347; margin: 5px 30px 20px 0px; font-weight: 100; }

.pagedemo { border: 1px solid #CCC; width: 310px; margin: 2px; padding: 50px 10px; text-align: center; background-color: white; }

.jPaginate { height: 34px; position: relative; color: #a5a5a5; font-size: small; width: 100%; }

.jPaginate a { line-height: 15px; height: 18px; cursor: pointer; padding: 2px 5px; margin: 2px; float: left; }

.jPag-control-back { position: absolute; left: 0px; }

.jPag-control-front { position: absolute; top: 0px; }

.jPaginate span { cursor: pointer; }

ul.jPag-pages { float: left; list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px; }

ul.jPag-pages li { display: inline; float: left; padding: 0px; margin: 0px; }

ul.jPag-pages li a { float: left; padding: 2px 5px; }

span.jPag-current { cursor: default; font-weight: normal; line-height: 15px; height: 18px; padding: 2px 5px; margin: 2px; float: left; }

ul.jPag-pages li span.jPag-previous, ul.jPag-pages li span.jPag-next, span.jPag-sprevious, span.jPag-snext, ul.jPag-pages li span.jPag-previous-img, ul.jPag-pages li span.jPag-next-img, span.jPag-sprevious-img, span.jPag-snext-img { height: 22px; margin: 2px; float: left; line-height: 18px; }

ul.jPag-pages li span.jPag-previous, ul.jPag-pages li span.jPag-previous-img { margin: 2px 0px 2px 2px; font-size: 12px; font-weight: bold; width: 10px; }

ul.jPag-pages li span.jPag-next, ul.jPag-pages li span.jPag-next-img { margin: 2px 2px 2px 0px; font-size: 12px; font-weight: bold; width: 10px; }

span.jPag-sprevious, span.jPag-sprevious-img { margin: 2px 0px 2px 2px; font-size: 18px; width: 15px; text-align: right; }

span.jPag-snext, span.jPag-snext-img { margin: 2px 2px 2px 0px; font-size: 18px; width: 15px; text-align: right; }

ul.jPag-pages li span.jPag-previous-img { background: transparent url(../images/previous.png) no-repeat center right; }

ul.jPag-pages li span.jPag-next-img { background: transparent url(../images/next.png) no-repeat center left; }

span.jPag-sprevious-img { background: transparent url(../images/sprevious.png) no-repeat center right; }

span.jPag-snext-img { background: transparent url(../images/snext.png) no-repeat center left; }

4、书写并添加js代码。

<script src="js/jquery-1.3.2.js"></script>

<script src="js/jquery.paginate.js" ></script> 

5、代码整体结构。

6、查看效果。