纯css制作自适应分页条
效果图：
html：
演示：纯CSS制作自适应分页条
css：
//demo.css @charset "utf-8";/* CSS Document */html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{ margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}a{ color:#007bc4/*#424242*/; text-decoration:none;}a:hover{ text-decoration:underline}a:focus { outline:none; -moz-outline:none;}ol,ul{ list-style:none}table{ border-collapse:collapse;border-spacing:0}html{ background:url(../../images/bg.png)}body{ height:100%; font:14px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background: url(../../images/body_bg.gif) repeat-x}img{ border:none}header{ box-sizing: border-box;width: 100%;padding:10px;overflow: hidden;}.logo{ width:240px; height:90px; background:url(../../images/logo_demo.gif) no-repeat;text-indent:-999em;}.logo a{ display:block; width:240px; height:90px}.main{ border:1px solid #d3d3d3; border-radius:5px;background:#fff;}h2.top_title{ margin:4px 10px; padding-top:15px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#007bc4;font-weight:bold}.optlist{ margin:50px 10px;text-align:center;}.optlist a{ margin:6px;}footer{ height:60px;}footer p{ padding:10px 2px; line-height:24px; text-align:center}footer p a:hover{ color:#51555C}.google_ad{ width:728px; height:90px; margin:50px auto}.ad_76090,.ad_demo{ width:760px; height:90px; margin:40px auto}.demo_topad{ position:absolute; top:15px; right:0px; width:472px; height:60px;}@media screen and (min-width: 320px) and (max-width : 480px) { html{-webkit-text-size-adjust: none;}.header{ width:100%}.main{ width:100%; margin:10px auto; -moz-border-radius:0px;-khtml-border-radius: 0px;-webkit-border-radius: 0px; border-radius:0px;} .demo_topad{ display:none} .google_ad{ width:100%; margin:40px auto; text-align:center}.ad_76090,.ad_demo{ width:100%; height:auto; margin:40px auto;text-align:center}.demo{ width:98%; margin:10px auto}} //style.csssection { /* used just to separate paginations */ border-bottom: 1px solid #e6e6e6;}section h2 { width: 90%; margin: 1em auto 0; color: #7d98ba; font-weight: 700; text-align: center;}@media only screen and (min-width: 1170px) { section h2 { margin: 2em auto 0; }}/* -------------------------------- Basic style-------------------------------- */nav[role="navigation"] { text-align: center;}.cd-pagination { width: 90%; max-width: 768px; margin: 2em auto 2em; text-align: center;}.cd-pagination li { /* hide numbers on small devices */ display: none; margin: 0 .2em;}.cd-pagination li.button { /* make sure prev next buttons are visible */ 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; /* use padding and font-size to change buttons size */ 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 { /* click effect */ -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 { /* button 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 { /* selected number */ 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; }}/* -------------------------------- No space - remove distance between list items-------------------------------- */.cd-pagination.no-space { width: auto; max-width: none; display: inline-block; border-radius: 0.25em; border: 1px solid #e6e6e6;}.cd-pagination.no-space::after { clear: both; content: ""; display: table;}.cd-pagination.no-space li { margin: 0; float: left; border-right: 1px solid #e6e6e6;}.cd-pagination.no-space li:last-of-type { border-right: none;}.cd-pagination.no-space a, .cd-pagination.no-space span { float: left; border-radius: 0; padding: .8em 1em; border: none;}.cd-pagination.no-space li:first-of-type a { border-radius: 0.25em 0 0 0.25em;}.cd-pagination.no-space li:last-of-type a { border-radius: 0 0.25em 0.25em 0;}/* -------------------------------- custom buttons - replace prev and next buttons text with a custom icon -------------------------------- */.cd-pagination.custom-buttons a, .cd-pagination.custom-buttons span { vertical-align: middle;}.cd-pagination.custom-buttons .button a { /* set custom width */ width: 40px; /* image replacement */ 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);}.no-touch .cd-pagination.custom-buttons .button:last-of-type a:active { -webkit-transform: scale(0.9) rotate(180deg); -moz-transform: scale(0.9) rotate(180deg); -ms-transform: scale(0.9) rotate(180deg); -o-transform: scale(0.9) rotate(180deg); transform: scale(0.9) rotate(180deg);} //svg
转载分享：出自http://www.helloweba.com