css案例【4】网页底部页码切换

原创于 2023-10-17 17:25:45 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

web前端基础专栏收录该内容

20 篇文章

订阅专栏

文章讲述了如何将HTML中的a标签转换为行内块元素，设置宽度和高度，使用text-align:center使其内部元素居中，并分享了相关的CSS样式代码示例。

实现效果

实现思路：

给定如下所示HTML元素，把a标签转成行内标签，这样就可以设置宽高；在给box加上text-align：center的样式，这样它内部的行内块元素就可以居中显示。剩下来就是调整细节，增加样式让其变得更好看。

案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
            color: #333;
            font-size: 14px;
        }

        .box a {
            display: inline-block;

            width: 36px;
            height: 36px;
            border: 1px solid #ccc;

            background-color: #f7f7f7;
            text-decoration: none;
            text-align: center;
            line-height: 36px;
            color: #333;
            font-size: 14px;
        }

        .box .prev,
        .box .next {
            width: 80px;
        }

        .box .active,
        .box .elp {
            border: none;
        }

        .box input {
            width: 40px;
            height: 36px;
            outline: none;
            border: 1px solid #ccc;
        }

        .box button {
            width: 60px;
            height: 36px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="" class="prev"> &lt;&lt;上一页</a>
        <a href="" class="active">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="" class="elp">...</a>
        <a href="" class="next"> 下一页&gt;&gt;</a>
        跳到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>