您的位置:首页 > Web前端 > > 正文

css简单网页布局代码(纯CSS制作自适应分页条附源码下载)

更多 时间:2022-01-25 00:26:39 类别:Web前端 浏览量:963

css简单网页布局代码

纯CSS制作自适应分页条附源码下载

分页条是web开发中常用的前端组件之一,它能将数据分批次展示给用户。我们知道诸如Bootstrap这类框架都提供了非常漂亮的分页条组件,但是你的项目可能不用到Bootstrap,你想自己定制一个属于你自己项目的漂亮的分页条,那么请看本文。

查看演示               下载源码

本文给大家介绍用纯CSS制作一款漂亮的分页条,可以适应各种PC和手机等移动端屏幕,开发者可以下载源码自行更改css代码,定制属于你自己项目的风格。

HTML结构

分页结构分别由两边的上一页和下一页两个按钮、以及中间的数字页码组成。我们用一个<nav>元素来包裹一个无序列表(ul.cd-pagination)。在无序列表中,我们给上一页和下一页按钮加上.button样式,中间页面数字中,用a.current样式表示当前页码。如果想让页码间无空隙,则给ul添加.no-space样式,代码结构如下:

  • <nav role="navigation"> 
        <ul class="cd-pagination no-space"> 
            <li class="button"><a class="disabled" href="#0">上一页</a></li> 
            <li><a class="current" href="#0">1</a></li> 
            <li><a href="#0">2</a></li> 
            <li><a href="#0">3</a></li> 
            <li><a href="#0">4</a></li> 
            <li><span>...</span></li> 
            <li><a href="#0">20</a></li> 
            <li class="button"><a href="#0">下一页</a></li> 
        </ul> 
    </nav>
    
  • CSS

    首先,我们将分页条居中,并设置宽度,间距等。然后设置上一页和下一页始终显示,而数字页码则在小屏幕上如手机上会隐藏起来。还可以设置页码文字大小以及点击效果。

  • nav[role="navigation"] { 
      text-align: center; 
    } 
    .cd-pagination { 
      width: 90%; 
      max-width: 768px; 
      margin: 2em auto 2em; 
      text-align: center; 
    } 
    .cd-pagination li { 
      /* 小屏幕上隐藏数字 */ 
      display: none; 
      margin: 0 .2em; 
    } 
    .cd-pagination li.button { 
      /* 显示上一页和下一页按钮 */ 
      display: inline-block; 
    } 
    .cd-pagination a, .cd-pagination span { 
      display: inline-block; 
      -webkit-user-select: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none; 
      /* 设置按钮大小 */ 
      padding: .6em .8em; 
      font-size: 1rem; 
    } 
    .cd-pagination a { 
      border: 1px solid #e6e6e6; 
      border-radius: 0.25em; 
    } 
    .no-touch .cd-pagination a:hover { 
      background-color: #f2f2f2; 
    } 
    .cd-pagination a:active { 
      /* 点击效果 */ 
      -webkit-transform: scale(0.9); 
      -moz-transform: scale(0.9); 
      -ms-transform: scale(0.9); 
      -o-transform: scale(0.9); 
      transform: scale(0.9); 
    } 
    .cd-pagination a.disabled { 
      /* 按钮不可用 */ 
      color: rgba(46, 64, 87, 0.4); 
      pointer-events: none; 
    } 
    .cd-pagination a.disabled::before, .cd-pagination a.disabled::after { 
      opacity: .4; 
    } 
    .cd-pagination .button:first-of-type a::before { 
      content: '\00ab  '; 
    } 
    .cd-pagination .button:last-of-type a::after { 
      content: ' \00bb'; 
    } 
    .cd-pagination .current { 
      /* 当前页码 */ 
      background-color: #64a281; 
      border-color: #64a281; 
      color: #ffffff; 
      pointer-events: none; 
    } 
    @media only screen and (min-width: 768px) { 
      .cd-pagination li { 
        display: inline-block; 
      } 
    } 
    @media only screen and (min-width: 1170px) { 
      .cd-pagination { 
        margin: 4em auto 8em; 
      } 
    }
    
  • 此外,我们使用svg制作箭头图标,如果你要使用左右箭头代替上一页和下一页的按钮文字,则可以使用以下代码。

  • .cd-pagination.custom-buttons .button a { 
      width: 40px; 
      overflow: hidden; 
      white-space: nowrap; 
      text-indent: 100%; 
      color: transparent; 
      background-image: url("../img/cd-icon-arrow.svg"); 
      background-repeat: no-repeat; 
      background-position: center center; 
    } 
    .cd-pagination.custom-buttons .button:last-of-type a { 
      -webkit-transform: rotate(180deg); 
      -moz-transform: rotate(180deg); 
      -ms-transform: rotate(180deg); 
      -o-transform: rotate(180deg); 
      transform: rotate(180deg); 
    }
    
  • 以上所述是小编给大家介绍的纯CSS制作自适应分页条附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    标签:分页条 css