行内块的巧妙运用

最新推荐文章于 2024-04-07 14:48:40 发布

黄丫丫07

最新推荐文章于 2024-04-07 14:48:40 发布

阅读量58

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51495354/article/details/127949543

版权

<!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>

        * {

            margin: 0;

            padding: 0;

        }



        div {

            text-align: center;

        }



        a {

            display: inline-block;

            width: 36px;

            height: 36px;

            background-color: #f7f7f7;

            text-decoration: none;

            line-height: 36px;

            border: 1px solid #ccc;

            color: #333;

            text-align: center;

        }



        .prev,

        .next {

            width: 85px;

            font-size: 15px;

        }



        .current,

        .elp {

            border: none;

            background-color: white;



        }



        .box input {

            height: 36px;

            width: 45px;

            border: 1px solid #ccc;



        }



        button {

            width: 45px;

            height: 36px;

            border: 1px solid #ccc;

            background-color: #f7f7f7;

        }

    </style>

</head>



<body>

    <div class="box">

        <a href="#" class="prev">&lt;&lt;上一页</a>

        <a href="#" class="current">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>