使用CSS在网页上进行中心分页

您可以尝试运行以下代码来使网页上的分页居中:

示例

<!DOCTYPE html>

<html>

   <head>

      <style>

         .demo {

            display: inline-block;

         }

         .demo1 {

            text-align: center;

         }

         .demo a {

            color: red;

            padding: 5px 12px;

            text-decoration: none;

            transition: background-color 2s;

            border: 1px solid orange;

            font-size: 18px;

         }

         .demo a.active {

            background-color: orange;

            color: white;

            border-radius: 5px;

         }

         .demo a:hover:not(.active) {

            background-color: yellow;

         }

         .demo a:first-child {

            border-top-left-radius: 10px;

            border-bottom-left-radius: 10px;

         }

         .demo a:last-child {

            border-top-right-radius: 10px;

            border-bottom-right-radius: 10px;

         }

      </style>

   </head>

   <body>

      <h2>Our Quizzes</h2>

      <div class = "demo1">

         <div class = "demo">

            <a href = "prev.html"><</a>

            <a href = "quiz1.html">Quiz1</a>

            <a href = "quiz2.html">Quiz2</a>

            <a href = "quiz3.html" class = "active">Quiz3</a>

            <a href = "quiz4.html">Quiz4</a>

            <a href = "next.html">></a>

         </div>

      </div>

   </body>

</html>

以上是 使用CSS在网页上进行中心分页 的全部内容, 来源链接: utcz.com/z/316865.html

回到顶部