zoukankan      html  css  js  c++  java
  • 分页居中圆角宽度自适应宽度(经典)

    找到的作的不错,可错就是ie中“下一页”、“下一页”行高没有处理好!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分页居中/圆角宽度自适应-懒人图库</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    body{padding:20px; text-align:center;}
    .cutpage{font-size:12px; font-family:Tahoma;}
    .cutpage a{display:inline-block; background:url(http://www.lanrentuku.com/down/js/images/13255921110.png) left top no-repeat; height:17px; padding-left:5px; line-height:17px; text-decoration:none; margin:3px 3px 3px 0; vertical-align:middle;}
    .cutpage a span{ background:url(http://www.lanrentuku.com/down/js/images/13255921110.png) right top no-repeat; padding-right:5px; display:inline-block; cursor:pointer; height:17px; line-height:17px;}
    
    .cutpage a.current{background:url(http://www.lanrentuku.com/down/js/images/13255921110.png) left -17px no-repeat;}
    .cutpage a.current span{background:url(http://www.lanrentuku.com/down/js/images/13255921110.png) right -17px no-repeat;}
    .cutpage a:link,.cutpage a:visited{color:#999;}
    .cutpage a:hover{background-position:left -17px; color:#fff;}
    .cutpage a.current:hover{color:#fff;}
    .cutpage a:hover span{background-position:right -17px;}
    .cutpage a.current:link,.cutpage a.current:visited{color:#fff;}
    </style>
    </head>
    
    <body>
    <div style="300px; margin:0 auto;">
    <div class="cutpage" id="page">
    <a href="#"><span>上一页</span></a><a href="#" class="current" id="cutpage"><span>1</span></a><a href="#"><span>2</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>3</span></a><a href="#"><span>4</span></a><a href="#"><span>5</span></a><a href="#"><span>6</span></a><a href="#"><span>7</span></a><a href="#"><span>8</span></a><a href="#"><span>9</span></a><a href="#"><span>10</span></a><a href="#"><span>11</span></a><a href="#"><span>14</span></a><a href="#"><span>124</span></a><a href="#"><span>下一页</span></a>
    </div>
    </div>
    
    <p> </p>
    <p>来源:<a href="http://d2.sodao.com/?p=45" target="_blank">sodao</a> 更多代码请访问:<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p>
    </body>
    </html>
  • 相关阅读:
    洛谷【P1480】A/B Problem
    bzoj 2654 && bzoj 3675 总结
    关于三维莫队问题的一些思考和探究
    BZOJ 1179 抢掠计划atm (缩点+有向无环图DP)
    BZOJ 1500 Luogu P2042 [NOI2005] 维护数列 (Splay)
    Codeforces 919D Substring (拓扑图DP)
    【学习笔记】有向无环图上的DP
    【学习笔记】求解简单递归式的一般方法
    BZOJ 3930 Luogu P3172 选数 (莫比乌斯反演)
    POJ 1061 BZOJ 1477 Luogu P1516 青蛙的约会 (扩展欧几里得算法)
  • 原文地址:https://www.cnblogs.com/cssfirefly/p/2574620.html
Copyright © 2011-2022 走看看