行内块元素的利用技巧可以制作分页

最新推荐文章于 2023-11-25 13:10:43 发布

原创最新推荐文章于 2023-11-25 13:10:43 发布 · 145 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #html

Html 专栏收录该内容

30 篇文章

订阅专栏

本文探讨了如何利用CSS行内块元素的特性，巧妙地创建功能强大的分页系统。通过调整元素的布局和样式，可以实现灵活且响应式的分页效果，同时保持页面的整洁和易读性。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  行内块元素的利用技巧 可以制作分页  </title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .page {
            margin: 0 auto;
            width: 1025px;
            height: 100px;
            border: 1px solid #dedede;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
        }

        .page a {
            width: 60px;
            height: 50px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            display: inline-block;
            margin-left: 5px;
            text-align: center;
            line-height: 50px;
            color: #333;
            text-decoration: none;

        }

        .page span {
            width: 60px;
            height: 50px;
            background-color: #fff;
            border: 1px solid #ccc;
            display: inline-block;
            margin-left: 5px;
            text-align: center;
            line-height: 50px;
            color: #333;
            text-decoration: none;

        }

        .page .pre,
        .page .next {
            width: 100px;
        }

        .page input {
            outline: none;
            width: 60px;
            height: 50px;
            border: 1px solid #ccc;

            display: inline-block;
        }

        .page .bt {

            width: 60px;
            height: 50px;
            border: 1px solid #ccc;

            background-color: #f7f7f7;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="page">
        <a href="" class='pre'> &lt; &lt; 上一页</a>
        <a href="">第 2 页</a>
        <span> 第 3 页</span> <!-- 当前页码 不能点点击 所以用span -->
       <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>
        到第 <input type="text" name="" id=""> 页
        <input type="button" value="确定" class='bt'>
        <a href="" class='next'> 下一页 &gt; &gt;</a>
    </div>
</body>

</html>