HTML分页

作者: 9979eb0cd854 | 来源:发表于2018-08-16 14:47 被阅读13次


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> </title>
    
    <style>
        /*
            分页要求：
                页码 肯定是可以点击的
                    必须是a标签了
                页面 有高度 有宽度（有可能是自适应的、也有可能是指定的宽度）
                在左边 或 中间 或 右边
        */
        a{
            text-decoration: none;
        }
        .page{
            font-size: 0;
            font-family: "Verdana";
            
            text-align: center;
            
            /*
                inline、inline-block元素 是受到text-align 控制的
            */
        }
        .page a{
            padding: 0 14px;
            height: 36px;
            border: solid 1px #666;
            
            display: inline-block;
            text-align: center;
            line-height: 36px;
            font-size: 14px;
            
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="page">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a> 
    </div>
</body>
</html>

image.png