html5分页界面,HTML5 响应式可访问分页界面实验

CSS

语言：

CSSSCSS

确定

@import url("http://fonts.googleapis.com/css?family=Oxygen:400,700");

.pageForm {

display: block;

margin-top: 14px;

}

.pageInput,

.pageButton {

padding: 0px 10px;

height: 30px;

line-height: 30px;

border-radius: 3px;

border: 1px solid #bbb;

display: inline-block;

vertical-align: middle;

}

.pageInput {

width: 28px;

height: 28px;

box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.1);

}

.pageLabel {

position: absolute;

left: -9999em;

}

.pageButton {

background: linear-gradient(#f46652 0%, #dd5846 100%);

border-color: #dd5846;

color: white;

}

.pageSkip {

display: inline-block;

background: transparent url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-32.png') no-repeat -10px -10px;

text-indent: -999em;

background-size: 40px;

opacity: 0.7;

vertical-align: middle;

width: 20px;

height: 20px;

}

.pageNext {

background-image: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-32.png');

}

.pageNumber {

position: relative;

top: -38px;

left: 50%;

font-size: 12px;

color: #333;

width: 60px;

display: block;

text-align: center;

margin-left: -17px;

background: white;

padding: 5px 10px;

border-radius: 3px;

box-shadow: 0 0 5px rgba(151, 38, 20, 0.15);

}

.pageNumber:after {

content: " ";

display: block;

position: absolute;

width: 0;

height: 0;

top: 24px;

border: 6px solid transparent;

border-top-color: white;

}

.pagePip {

width: 1px;

height: 3px;

background: black;

position: absolute;

bottom: -10px;

opacity: 0.4;

box-shadow: -1px 0 0 #fff;

}

.pageMaxPip,

.pageMinPip {

font-size: 12px;

color: #777;

position: absolute;

bottom: -30px;

width: 20px;

}

.pageMaxPip {

right: -10px;

}

.pageMinPip {

left: -10px;

}

.pagination {

width: 80%;

margin: 50px auto;

text-align: center;

}

.pageSlider {

display: inline-block;

}

.ui-slider-horizontal {

width: 60%;

height: 6px;

top: 0px;

margin: 0px 10px 2px;

border-radius: 6px;

position: relative;

display: inline-block;

background: #f46652;

background-image: repeating-linear-gradient(28deg, transparent, transparent 10px, #dd5846 10px, #dd5846 20px);

box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);

}

.ui-slider-horizontal:before {

content: " ";

position: absolute;

width: auto;

height: 16px;

top: -5px;

left: -4px;

right: -4px;

border-radius: 10px;

z-index: -1;

background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.8) 90%);

}

.ui-slider.long .ui-slider-handle {

height: 12px;

width: 30px;

background: #f1f1f1;

display: block;

position: absolute;

border-radius: 50px;

margin-top: -3px;

margin-left: -15px;

text-decoration: none;

background: #f5f5f5;

background: linear-gradient(#f5f5f5 0%, #ccc 100%);

box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35), 0 0 2px 1px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.2), 0 7px 5px rgba(0, 0, 0, 0.1), 0 11px 10px rgba(0, 0, 0, 0.1);

}

.ui-slider.long .ui-slider-handle::before,

.ui-slider.long .ui-slider-handle::after {

content: " ";

width: 2px;

height: 40%;

position: absolute;

background: transparent;

border-radius: 0px;

box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.8), 1px 0px 0px rgba(255, 255, 255, 0.8), 2px 0 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3) inset;

}

.ui-slider.long .ui-slider-handle::before {

left: 10px;

top: 30%;

}

.ui-slider.long .ui-slider-handle::after {

right: 12px;

top: 30%;

}

@media (max-width: 550px) {

.pagination {

width: auto;

}

.pageForm {

display: block;

margin-top: 20px;

}

.pageInput {

margin: 0;

}

.pageSlider {

width: 260px;

margin: 0 15px;

}

}

body {

min-height: 400px;

padding-top: 20px;

background: linear-gradient(#f5f5f5 0%, #dde4e9 100%);

font-family: oxygen;

}

h1,

h3 {

width: 80%;

color: #555;

margin: 0 auto;

text-align: center;

}

h1 {

font-size: 26px;

}

h3 {

color: #777;

font-size: 18px;

font-weight: normal;

}

p {

text-align: center;

font-size: 14px;

color: #111;

margin-top: 50px;

}

#pageSliderDescription {

position: absolute;

left: -999em;

display: inline-block;

width: 0;

height: 0;

}