24款较经典的Page翻页分页css代码

  • chunzhisu

    2014-12-19 17:38:18
  • IT图书
  • 翻译

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2.     <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3.     <head>
  4.     <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\">
  5.     <meta http-equiv=\"Content-Language\" content=\"zh-CN\" />
  6.     <meta content=\"all\" name=\"robots\" />
  7.     <title>24款较经典的Page翻页分页css代码丨河北纳豆-益诚制衣</title>
  8.     <link rel=\"stylesheet\" type=\"text/css\" href=\"/imagesforcode/201301/fenyecss.css\" media=\"all\" />
  9.     </head>
  10.     <body>
  11.     <p>需要用到三个小图片：<img src=\"/imagesforcode/201301/image1.gif\">、<img src=\"/imagesforcode/201301/image1.gif\">、<img src=\"/imagesforcode/201301/meneame.jpg\"> 、 所需css文件：<a href=\"/imagesforcode/201301/fenyecss.css\" target=_blank>fenyecss.css</a></p>
  12.     <br><br><hr><p align=\"center\"><font color=black>本特效由 <a href=\"http://www.CsrCode.cn\" target=\"_blank\"></a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
  13.     <p><a href=\"">Digg</a> Style
  14.     <div class=\"digg\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  15.     <br /><br /><br />
  16.     <p><a href=\"http://www.yichengzy.com\">Yahoo</a> Style
  17.     <div class=\"yahoo\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  18.     <br /><br /><br />
  19.     <p><a href=\"http://www.yichengzy.com\">New Yahoo!> Style
  20.     <div class=\"yahoo2\"><span class=\"disabled\">< Prev</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=\"#?page=5\">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\">Next ></a></div></p>
  21.     <br /><br /><br />
  22.     <p><a href=\"http://riyannadou.com.cn/">Meneame</a> Style
  23.     <div class=\"meneame\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  24.     <br /><br /><br />
  25.     <p><a href=\"">Flickr</a> Style
  26.     <div class=\"flickr\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  27.     <br /><br /><br />
  28.     <p><a href=\"\">Sabros.us</a> Style
  29.     <div class=\"sabrosus\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  30.     <br /><br /><br />
  31.     <p>Green Style
  32.     <div class=\"scott\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  33.     <br /><br /><br />
  34.     <p>Gray Style
  35.     <div class=\"quotes\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  36.     <br /><br /><br />
  37.     <p>Black Style
  38.     <div class=\"black\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  39.     <br /><br /><br />
  40.     <p><a href=\"">Mis Algoritmos</a> Style
  41.     <div class=\"black2\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  42.     <br /><br /><br />
  43.     <p>Black-Red Style
  44.     <div style=\"padding-top:10px;padding-bottom:10px;background-color:#313131;\">
  45.     <div class=\"black-red\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></div></p>
  46.     <br /><br /><br />
  47.     <p>Gray Style 2
  48.     <div class=\"grayr\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  49.     <br /><br /><br />
  50.     <p>Yellow Style
  51.     <div class=\"yellow\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  52.     <br /><br /><br />
  53.     <p><a href=\"http://jogger.pl/\">jogger</a> Style
  54.     <div class=\"jogger\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  55.     <br /><br /><br />
  56.     <p><a href=\"http://eu.starcraft2.com/screenshots.xml\">starcraft 2</a> Style
  57.     <div class=\"starcraft2\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  58.     <br /><br /><br />
  59.     <p>Tres Style
  60.     <div class=\"tres\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  61.     <br /><br /><br />
  62.     <p><a href=\"http://www.512megas.com\">512megas</a> Style
  63.     <div class=\"megas512\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  64.     <br /><br /><br />
  65.     <p><a href=\"http://www.technorati.com/\">Technorati</a> Style
  66.     <div class=\"technorati\"><span class=\"disabled\"> < </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=\"#?page=5\">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\"> > </a></div></p>
  67.     <br /><br /><br />
  68.     <p><a href=\"http://www.youtube.com/\">YouTube</a> Style
  69.     <div class=\"youtube\"><span class=\"disabled\">Prev</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=\"#?page=5\">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\">Next</a></div></p>
  70.     <br /><br /><br />
  71.     <p><a href=\"http://search.msdn.microsoft.com/\">MSDN Search</a> Style
  72.     <div class=\"msdn\"><span class=\"disabled\"> < Prev</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=\"#?page=5\">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\">Next > </a></div></p>
  73.     <br /><br /><br />
  74.     <p><a href=\"http://badoo.com/\">Badoo</a>
  75.     <div class=\"badoo\"><span class=\"disabled\"> < Prev</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=\"#?page=5\">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\">Next > </a></div></p>
  76.     <br /><br /><br />
  77.     <p>Blue Style
  78.     <div class=\"manu\"><span class=\"disabled\"> < Prev</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=\"#?page=5\">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\">Next > </a></div></p>
  79.     <br /><br /><br />
  80.     <p>Green-Black Style
  81.     <div class=\"green-black\"><span class=\"disabled\"> < Prev</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=\"#?page=5\">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\">Next > </a></div></p>
  82.     <br /><br /><br />
  83.     <p>viciao Style
  84.     <div class=\"viciao\"><span class=\"disabled\"> < Prev</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=\"#?page=5\">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\">Next > </a></div></p>
  85.     <br><br><hr>
  86.     </body>
  87.     </html>

请使用浏览器的分享功能分享到微信等