div+css | 底部分页框布局

佛系编程人

发布于 2020-02-25 03:45:16

1.7K00

代码可运行

文章被收录于专栏：佛系编程人佛系编程人

运行总次数：0

代码可运行

知识学而不用，那仅仅是知识，是别人的智慧。运用知识，融汇贯通才能生发出自己的智慧。你说是还是不是？接下来我将会分享我所学的给大家作为参考，以下是本次实现的效果图，使用的div+css布局，这里默认有html 和 css 基础。

在开始写代码之前，我们先从外到内的顺序对着图分析一下：

首先最外边的框我们使用列表ul 标签来实现
内部的框自然是使用 li 标签来实现，不过 li 是块元素，不能显示在一行，所以要将其转换为行内元素，使用display:inline-block 来实现一行显示
要注意小框内的文字除了...其余都是链接，所以要使用a标签来实现，但a标签是行内元素，不能设置宽高，所以要转化为块元素。

通过以上的分析会不会觉得实现起来更加容易呢？好，现在开始编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页练习</title>
    <style>
.box {               
         width:602px;
          height:42px;
          border: 1px solid #000;
          box-sizing:border-box;
          margin:50px auto 0;
          list-style: none;
          padding:0px;
          font-size:0px;
          text-align:center;
      }
      .box li {
          height:26px;
          margin:7px 6px 0px;
          font-size:12px;
          display:inline-block;
      }
      .box li a {
          display:block;
          height:26px;
          background-color: gold;
          color:#000;
          font:12px/26px 'Microsoft Yahei';
          text-decoration:none;
          padding:0px 7px;
      }
      .box li a:hover {
          color:red;
          background-color: wheat;
      }
</style>
</head>
<body>
    <ul class="box">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>...</span></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</body>
</html>