R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS???/a> >

              DIV+CSS分页_CSS翻页代码模板

              Page翻页分页css代码,分页div+css代码

              css分页代码集合模板如下
              翻页上下分页按钮效果一

              上下css分页代码
              DIVCSS5学习网代码如下
              DIV代码:
              1. <div class="digg"> 
              2. <span class="disabled">&lt; </span>
                <span class="current">1</span>
                <a href="#?page=2">2</a>
                <a href="#?page=3">3</a>
                <a href="#?page=4">4</a>
                <a href="http://www.tommstudio.com/">5</a>
                <a href="#?page=6">6</a>
                <a href="#?page=7">7</a>
                ...
                <a href="#?page=199">199</a>
                <a href="#?page=200">200</a>
                <a href="#?page=2"> 
              3. &gt; </a></div> 

              DIVCSS5学习网代码:

              1. /* www.tommstudio.com公共CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /* CSS 代码 */ 
              5. DIV.digg { 
              6. PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
                 MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center 
              7. DIV.digg A { 
              8. BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid;
                 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; 
                BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px;
                 BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none 
              9. DIV.digg A:hover { 
              10. BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
                 BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid 
              11. DIV.digg A:active { 
              12. BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
                 BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid 
              13. DIV.digg SPAN.current { 
              14. BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px;
                 BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
                 PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid;
                 COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099 
              15. DIV.digg SPAN.disabled { 
              16. BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid;
                 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
                 BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px;
                 BORDER-BOTTOM: #eee 1px solid 

              DIVCSS5学习网翻页上下分页按钮效果二
              div css翻页分页代码

              DIV分页代码:

              1. <div class="yahoo"> 
              2. <span class="disabled">&lt; </span>
              3. <span class="current">1</span>
              4. <a href="http://www.tommstudio.com/">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="#?page=6">6</a>
              9. <a href="#?page=7">7</a>
              10. ...<a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2"> 
              13. &gt; </a></div> 

              CSS分页代码

              1.  /* www.tommstudio.com公共CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /* CSS yahoo 样式分页案例css代码 */ 
              5. DIV.yahoo { 
              6. PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
                 MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center 
              7. DIV.yahoo A { 
              8. BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px;
                 BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px;
                 MARGIN: 2px; BORDER-LEFT: #fff 1px solid; COLOR: #000099;
                 PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid; TEXT-DECORATION: underline 
              9. DIV.yahoo A:hover { 
              10. BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; 
                BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid 
              11. DIV.yahoo A:active { 
              12. BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid;
                 BORDER-LEFT: #000099 1px solid; COLOR: #f00; BORDER-BOTTOM: #000099 1px solid 
              13. DIV.yahoo SPAN.current { 
              14. BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 5px;
                 BORDER-TOP: #fff 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
                 PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 1px solid;
                 COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 1px solid;
                 BACKGROUND-COLOR: #fff 
              15. DIV.yahoo SPAN.disabled { 
              16. BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; 
                BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px;
                 MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; 
                PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid 

              CSS翻页上下分页按钮效果三
              上下翻页css代码
              Div上下分页代码:

              1.  <div class="black"> 
              2. <span class="disabled">&lt; </span>
              3. <span class="current">1</span>
              4. <a href="#?page=2">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="#?page=6">6</a>
              9. <a href="#?page=7">7</a>
              10. ...<a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2"> 
              13. &gt; </a></div> 

              Css上下分页代码:

              1.  /* www.tommstudio.com公共CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /* CSS注释: 黑色背景的css分页代码 */ 
              5. DIV.black { 
              6. PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 80%;
              7.  PADDING-BOTTOM: 10px; MARGIN: 3px; COLOR: #a0a0a0; PADDING-TOP: 10px;
                 BACKGROUND-COLOR: #000; TEXT-ALIGN: center 
              8. DIV.black A { 
              9. BORDER-RIGHT: #909090 1px solid; PADDING-RIGHT: 5px; 
                BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #909090 1px solid;
                 PADDING-LEFT: 5px; BACKGROUND-IMAGE: url(bar.gif); PADDING-BOTTOM: 2px;
                 BORDER-LEFT: #909090 1px solid; COLOR: #c0c0c0; MARGIN-RIGHT: 3px;
                 PADDING-TOP: 2px; BORDER-BOTTOM: #909090 1px solid; TEXT-DECORATION: none 
              10. DIV.black A:hover { 
              11. BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid;
                 BACKGROUND-IMAGE: url(invbar.gif); BORDER-LEFT: #f0f0f0 1px solid;
                 COLOR: #ffffff; BORDER-BOTTOM: #f0f0f0 1px solid; BACKGROUND-COLOR: #404040 
              12. DIV.black A:active { 
              13. BORDER-RIGHT: #f0f0f0 1px solid; BORDER-TOP: #f0f0f0 1px solid; 
                BACKGROUND-IMAGE: url(invbar.gif); BORDER-LEFT: #f0f0f0 1px solid; 
                COLOR: #ffffff; BORDER-BOTTOM: #f0f0f0 1px solid; BACKGROUND-COLOR: #404040 
              14. DIV.black SPAN.current { 
              15. BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffff 1px solid;
                 PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px;
                 BORDER-LEFT: #ffffff 1px solid; COLOR: #ffffff; MARGIN-RIGHT: 3px; 
                PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #606060 
              16. DIV.black SPAN.disabled { 
              17. BORDER-RIGHT: #606060 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #606060 1px solid;
                 PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #606060 1px solid; 
                COLOR: #808080; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #606060 1px solid 

              CSS翻页上下分页按钮效果四

              分页样式css代码模板

              Div翻页分页代码:

              1.  <div style="padding-top:10px;padding-bottom:10px;background-color:#313131;"> 
              2. <div class="black-red"> 
              3. <span class="disabled">&lt; </span>
              4. <span class="current">1</span>
              5. <a href="http://www.tommstudio.com/">2</a>
              6. <a href="#?page=3">3</a>
              7. <a href="#?page=4">4</a>
              8. <a href="#?page=5">5</a>
              9. <a href="#?page=6">6</a>
              10. <a href="#?page=7">7</a>
              11. ...<a href="#?page=199">199</a>
              12. <a href="#?page=200">200</a><a href="#?page=2"> 
              13. &gt; </a></div> 
              14. </div> 

              对应Css分页代码如下:

              1.  /* www.tommstudio.com公共CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /* CSS 代码www.tommstudio.com */ 
              5. DIV.black-red { 
              6. FONT-SIZE: 11px; COLOR: #fff; FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif;
                 BACKGROUND-COLOR: #3e3e3e 
              7. DIV.black-red A { 
              8. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px;
                 MARGIN: 2px; COLOR: #fff; PADDING-TOP: 2px; 
                BACKGROUND-COLOR: #3e3e3e; TEXT-DECORATION: none 
              9. DIV.black-red A:hover { 
              10. COLOR: #fff; BACKGROUND-COLOR: #ec5210 
              11. DIV.black-red A:active { 
              12. COLOR: #fff; BACKGROUND-COLOR: #ec5210 
              13. DIV.black-red SPAN.current { 
              14. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
                 PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #fff; 
                PADDING-TOP: 2px; BACKGROUND-COLOR: #313131 
              15. DIV.black-red SPAN.disabled { 
              16. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px;
                 MARGIN: 2px; COLOR: #868686; PADDING-TOP: 2px; BACKGROUND-COLOR: #3e3e3e 

              CSS翻页上下分页按钮效果五
              div+css分页代码

              分页div代码如下:

              1. <div class="grayr"> 
              2. <span class="disabled">&lt; </span>
              3. <span class="current">1</span>
              4. <a href="#?page=2">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="http://www.tommstudio.com/">6</a>
              9. <a href="#?page=7">7</a>...
              10. <a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2"> 
              13. &gt; </a></div> 

              分页css代码如下:

              1. /* www.tommstudio.com公共CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /*CSS grayr style pagination*/ 
              5. DIV.grayr { 
              6. PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 11px; 
                PADDING-BOTTOM: 2px; PADDING-TOP: 2px; 
                FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif; BACKGROUND-COLOR: #c1c1c1 
              7. DIV.grayr A { 
              8. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; 
                MARGIN: 2px; COLOR: #000; PADDING-TOP: 2px; 
                BACKGROUND-COLOR: #c1c1c1; TEXT-DECORATION: none 
              9. DIV.grayr A:hover { 
              10. COLOR: #000; BACKGROUND-COLOR: #99ffff 
              11. DIV.grayr A:active { 
              12. COLOR: #000; BACKGROUND-COLOR: #99ffff 
              13. DIV.grayr SPAN.current { 
              14. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: bold; 
                PADDING-BOTTOM: 2px; MARGIN: 2px; COLOR: #303030; 
                PADDING-TOP: 2px; BACKGROUND-COLOR: #fff 
              15. DIV.grayr SPAN.disabled { 
              16. PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px;
                 MARGIN: 2px; COLOR: #797979; PADDING-TOP: 2px; BACKGROUND-COLOR: #c1c1c1 

              CSS翻页上下分页按钮效果六
              div css上下分页代码

              上下分页div代码如下:

              1. <div class="jogger"> 
              2. <span class="disabled">&lt; </span>
              3. <span class="current">1</span>
              4. <a href="#?page=2">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="#?page=6">6</a>
              9. <a href="#?page=7">7</a>...
              10. <a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2"> 
              13. &gt; </a></div> 

              上下翻页按钮css代码如下:

              1. /* www.tommstudio.com公共分页CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. DIV.jogger { 
              5. PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 7px;
                 PADDING-TOP: 2px; FONT-FAMILY: "Lucida Sans Unicode",
                 "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif 
              6. DIV.jogger A { 
              7. PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em;
                 MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; 
                BACKGROUND-COLOR: #ee4e4e; TEXT-DECORATION: none 
              8. DIV.jogger A:hover { 
              9. PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em;
                 MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818 
              10. DIV.jogger A:active { 
              11. PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em;
                 MARGIN: 2px; COLOR: #fff; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #de1818 
              12. DIV.jogger SPAN.current { 
              13. PADDING-RIGHT: 0.64em; PADDING-LEFT: 0.64em; PADDING-BOTTOM: 0.43em;
                 MARGIN: 2px; COLOR: #6d643c; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #f6efcc 
              14. DIV.jogger SPAN.disabled { 
              15. DISPLAY: none 

              CSS翻页上下分页按钮效果七
              翻页page演示图

              上下翻页按钮div代码:

              1.  <div class="tres"> 
              2. <span class="disabled">&lt; </span>
              3. <span class="current">1</span>
              4. <a href="#?page=2">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="#?page=6">6</a>
              9. <a href="#?page=7">7</a>...
              10. <a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2"> 
              13. &gt; </a></div> 

              上下翻页按钮css代码:

              1. /* www.tommstudio.com公共分页CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /* CSS 翻页代码 */ 
              5. DIV.tres { 
              6. PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FONT-WEIGHT: bold; 
                FONT-SIZE: 13.2pt; PADDING-BOTTOM: 7px; MARGIN: 3px; 
                PADDING-TOP: 7px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-ALIGN: center 
              7. DIV.tres A { 
              8. BORDER-RIGHT: #d9d300 2px solid; PADDING-RIGHT: 5px;
                 BORDER-TOP: #d9d300 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; 
                MARGIN: 2px; BORDER-LEFT: #d9d300 2px solid; COLOR: #fff; PADDING-TOP: 2px;
                 BORDER-BOTTOM: #d9d300 2px solid; BACKGROUND-COLOR: #d90; TEXT-DECORATION: none 
              9. DIV.tres A:hover { 
              10. BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; 
                BORDER-LEFT: #ff0 2px solid; COLOR: #000; BORDER-BOTTOM: #ff0 2px solid;
                 BACKGROUND-COLOR: #ff0 
              11. DIV.tres A:active { 
              12. BORDER-RIGHT: #ff0 2px solid; BORDER-TOP: #ff0 2px solid; 
                BORDER-LEFT: #ff0 2px solid; COLOR: #000; 
                BORDER-BOTTOM: #ff0 2px solid; BACKGROUND-COLOR: #ff0 
              13. DIV.tres SPAN.current { 
              14. BORDER-RIGHT: #fff 2px solid; PADDING-RIGHT: 5px; 
                BORDER-TOP: #fff 2px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold;
                 PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #fff 2px solid;
                 COLOR: #000; PADDING-TOP: 2px; BORDER-BOTTOM: #fff 2px solid 
              15. DIV.tres SPAN.disabled { 
              16. DISPLAY: none 

              CSS翻页上下分页按钮效果八
              css上下翻页分页样式图
              上下翻页分页div代码如下:

              1. <div class="green-black"> 
              2. <span class="disabled">&lt; Prev</span>
              3. <span class="current">1</span>
              4. <a href="#?page=2">2</a>
              5. <a href="#?page=3">3</a>
              6. <a href="#?page=4">4</a>
              7. <a href="#?page=5">5</a>
              8. <a href="#?page=6">6</a>
              9. <a href="#?page=7">7</a>...
              10. <a href="#?page=199">199</a>
              11. <a href="#?page=200">200</a>
              12. <a href="#?page=2">Next 
              13. &gt; </a></div> 

              上下翻页分页css代码如下:
               

              1. /* www.tommstudio.com公共分页CSS代码 */ 
              2. BODY { 
              3. FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
                WIDTH: 60%; PADDING-LEFT: 25px; 
              4. /*CSS green-black style pagination*/ 
              5. DIV.green-black { 
              6. PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; 
                MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center 
              7. DIV.green-black A { 
              8. BORDER-RIGHT: #2c2c2c 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #2c2c2c 1px solid;
                 PADDING-LEFT: 5px; BACKGROUND: url(images/pageimage1.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 
              9. DIV.green-black A:hover { 
              10. BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid;
                 BACKGROUND: url(images/pageimage2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid;
                 COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid 
              11. DIV.green-black A:active { 
              12. BORDER-RIGHT: #aad83e 1px solid; BORDER-TOP: #aad83e 1px solid; 
                BACKGROUND: url(images/pageimage2.gif) #aad83e; BORDER-LEFT: #aad83e 1px solid;
                 COLOR: #fff; BORDER-BOTTOM: #aad83e 1px solid 
              13. DIV.green-black SPAN.current { 
              14. BORDER-RIGHT: #aad83e 1px solid; PADDING-RIGHT: 5px; 
                BORDER-TOP: #aad83e 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; 
                BACKGROUND: url(images/pageimage2.gif) #aad83e; PADDING-BOTTOM: 2px; 
                BORDER-LEFT: #aad83e 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; 
                PADDING-TOP: 2px; BORDER-BOTTOM: #aad83e 1px solid 
              15. DIV.green-black SPAN.disabled { 
              16. 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 

              以上是DIVCSS5学习网总结的上下分页翻页div css源代码,希望对大家有用,同时对应样式可以更改字体颜色背景等样式实现自己想要的分页效果。
              CSS分页结合下载地址:

              DIV+CSS分页翻页page演示地址:http://www.tommstudio.com/fanli/divcss5-fenye.html

              如需转载,请注明文章出处和来源网址:http://www.tommstudio.com/template/m96.shtml

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

              如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
              DIVCSS5学习网文章修订日期:2010-04-08 19:22 原创:DIVCSS5学习网
              本文www.tommstudio.com DIVCSS5版权所有。