从腾讯CDC页面上提取的分页结构

最新推荐文章于 2024-10-02 17:15:49 发布

yangchuang_gx

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量334

点赞数

文章标签：腾讯 border class float input html

本文链接：https://blog.csdn.net/yangchuang_gx/article/details/7947342

版权

CSS 学习中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            font-size: 14px;
            color: #333;
            font-family: Tahoma,"宋体";
        }
          /*==========分页==========*/


        .page {
            clear: both;
            width: 720px;
            padding: 20px 0 0 0;
            font-size: 14px;
            color: #686868;
            overflow: hidden;
            position: relative
        }


        .page a.previous, .page a.next {
            display: inline-block;
            width: 61px;
            height: 23px;
            padding-top: 6px;
            border: 1px solid #ddd;
            ctext-align: center;
            font-size: 14px;
            olor: #686868;
        }


        .page a.previous {
            margin-right: 20px;
        }


        .page a.next {
            margin-left: 20px;
        }


        .page a {
            display: inline-block;
            width: auto;
            min-width: 34px;
            height: 23px;
            padding-top: 5px;
            border: 1px solid #ddd;
            color: #686868;
            text-align: center;
            font-size: 14px;
            text-decoration: none;
        }


        .page a:hover {
            text-decoration: none;
            color: #fff;
            background-color: #777;
            border: 1px solid #616161;
        }


        .page .current {
            display: inline-block;
            width: auto;
            min-width: 30px;
            height: 24px;
            padding-top: 6px;
            font-weight: bold;
            text-align: center;
        }


        .page .disabled {
            padding: 2px 5px;
            margin: 2px;
        }


        .page .jump {
            display: inline-block;
            padding-left: 30px;
        }


        .page .jump em {
            *float: left;
            *line-height: 24px;
        }


        .page .jump input {
            *float: left;
            width: 31px;
            height: 19px;
            padding-top: 3px;
            border: 1px solid #ddd;
            color: #686868;
            text-align: center;
        }


            /*==========分页==========*/


    </style>
</head>
<body>
<div class="page">
    <a href="##" class="previous"> < 上页 </a>... 
    <a href="##">14</a>
    <a href="##">15</a>
    <a href="##">16</a>
    <span class="current">17</span>
    <a href="##">18</a>
    <a href="##">19</a>
    <a   href="##">20</a>  ...
    <a href="##" class="next">下页 > </a>
    <span class="jump">跳转至 # 
        <input name="" type="text"  οnkeydοwn="if (window.event.keyCode==13){alert('go to page '+this.value);}"
                                                              οnkeyup="this.value=this.value.replace(/\D/g,'')"
                                                              onafterpaste="this.value=this.value.replace(/\D/g,'')">
    </span>
</div>
</body>
</html>