zoukankan      html  css  js  c++  java
  • 数字分页HTML CSS样式(针对IE6 Hack)

    <style type="text/css">

    <!--
    html, body, div, h1, h2, h3, dd, dl, dt, li, ol, ul
    {margin:0;padding:0;}
    body 
    {height:100%;background:#fff;}
    div 
    {text-align:left;overflow:hidden; zoom:1; }
    body
    { color:#b6b6b6; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
    h1, h2, h3, h4, h5, h6
    {font-size:100%;}
    li
    {list-style-type:none;}
    a
    {text-decoration:none;color:#414141;}
    a:hover
    {color:#0a93c9;text-decoration:underline;}
    img 
    {border:0;}

    #gpager
    { width: 980px; margin-right: auto; margin-left: auto; margin-top: 10px; clear: both; }
    #gpager ul li
    { float: left; }
    #gpager .cn
    { float: right; }
    #gpager .cn .next
    { margin-left: 6px; }
    #gpager .cn a
    { float: left; border: 1px solid #E6E6E6; width: 60px; height: 22px; text-align: center; text-decoration: none; line-height: 22px; _padding-top: 5px; _height: 17px; _line-height: 14px; color: #0a93c9; }
    #gpager .cn a:hover
    { border: 1px solid #CCCCCC; }

    #gpager .en
    { float: right; }
    #gpager .en a
    { border: 1px solid #E6E6E6; height: 22px; text-decoration: none; line-height: 22px; float: left; padding-right: 4px; padding-left: 4px; margin-right: 6px; font-size: 14px; color: #0a93c9; }
    #gpager .en a:hover
    { border: 1px solid #BEBEBE; }
    #gpager .en .cur
    { color: #FFFFFF; background-color: #CCCCCC; float: left; display: inline; line-height: 22px; height: 22px; margin-right: 6px; padding-right: 4px; padding-left: 4px; font-size: 14px; border: 1px solid #CCCCCC; font-weight: bold; }
    #gpager .an
    { line-height: 22px; height: 22px; font-size: 14px; border: 1px solid #E1E1E1; float: right; margin-right: 6px; padding-right: 5px; padding-left: 5px; color: #0a93c9; }
    -->
    </style>

     background:#ffc;       /*  对firefox/chrome有效*/

    *background:#ccc;     /* 对ie7/ie6有效 */
    _background:#000;   /* 只对ie6有效 */
    <div id="gpager">
           <ul class="cn">
              <li><href="#" class="pre">上一页</a></li>
              <li><href="#" class="next">下一页</a></li>
           </ul>
           <ul class="en">
              <li><href="#">1</a></li>
              <li><href="#">2</a></li>
              <li class="cur">3</li>
              <li><href="#">4</a></li>
              <li><href="#">5</a></li>
              <li><href="#">6</a></li>
              <li><href="#">7</a></li>
              <li><href="#">8</a></li>
              <li><href="#">9</a></li>
              <li><href="#">10</a></li>
           </ul>
           <ul class="an"><li>3 / 600</li></ul>

    </div>  

               

  • 相关阅读:
    HTML+CSS面试题汇总(持续更新)
    vue-router
    MongoDB
    闭包
    JavaScript的严格模式
    IO题目
    Java 题目集 编程
    Java题目集 函数
    2.面向对象基础-04继承
    2.面向对象基础-03Java数组
  • 原文地址:https://www.cnblogs.com/chixiaojin/p/2192346.html
Copyright © 2011-2022 走看看