当前位置： 移动技术网 > IT编程>网页制作>CSS > 分页按钮样式

分页按钮样式

2019年04月27日  | 移动技术网IT编程  | 我要评论

里层div绝对定位，因为不知道具体按钮数量,所以整个宽度是自适应的，用绝对进行居中，外层div相对定位，控制上下距离，适用于不用页面不同高度需求，只用一次就绝对定位硬写。。。。

<div class="bb">
  <div class="num">
      <span class="num_left numon"><</span>
      <span class="num_right ">></span>
      <span class="pop popon">1</span>
      <span class="pop">2</span>
      <span class="pop">3</span>
      <span class="pop">4</span>
      <span class="pop">5</span>
      <span class="pop popon">5</span>
      <span class="pop">5</span>
   </div>
</div>


.bb{
   position: relative;
  margin-top:40px;
  
}
    .num{
        top: 0px;
        padding: 5px 36px;
        height: 21px;
        line-height: 21px;
        background-color: #f0f0f0;
        position:absolute;
        left:50%;
        width:fit-content;
        transform:translatex(-50%);
        -webkit-transform:translatex(-50%);
        -moz-transform:translatex(-50%);
        font-size: 14px;
     
    }
   .pop{
            width: 21px;
            height: 21px;
            display: inline-block;
            text-align: center;
        }
        .popon{
            background-color: red;
            border-radius: 21px;
            color: #fff;
        }
        .num_left,.num_right{
            position: relative;
            text-align: center;
            width: 24px;
            height: 21px;
            color: #fff;
            font-weight: bold;
            background-color: #dddddd;
        }
        .num_left{
            float: left;
            margin-left: -45px;
        }
        .num_right{
            float: right;
            margin-right: -45px;
        }
        .numon{
            color:#999999;
            background-color: #000;                    
        }

　　

　　

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网