html直接分页的样式,HTML分页样式「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

.container {

background: #fdfdfd;

padding: 1rem;

margin: 3rem auto;

border-radius: 0.2rem;

counter-reset: pagination;

text-align: center;

}

.container:after {

clear: both;

content: “”;

display: table;

}

.container ul {

width: 100%;

}

.large {

width: 45rem;

}

.pagination ul, li {

list-style: none;

display: inline;

padding-left: 0px;

}

.pagination li {

counter-increment: pagination;

}

.pagination li:hover a {

color: #fdfdfd;

background-color: #1d1f20;

border: solid 1px #1d1f20;

}

.pagination li.active a {

color: #fdfdfd;

background-color: #1d1f20;

border: solid 1px #1d1f20;

}

.pagination li:first-child a:after {

content: “”;

}

.pagination li a {

border: solid 1px #d6d6d6;

border-radius: 0.2rem;

color: #7d7d7d;

text-decoration: none;

text-transform: uppercase;

display: inline-block;

text-align: center;

padding: 0.5rem 0.9rem;

}

.pagination li a:after {

content: ” ” counter(pagination) ” “;

}

.large li a {

display: none;

}

.large li:first-child a {

display: inline-block;

}

.large li:first-child a:after {

content: “”;

}

.large li:nth-last-child(2) a {

display: inline-block;

}

.large li:nth-last-child(3) {

display: inline-block;

}

.large li:nth-last-child(3):after {

padding: 0 1rem;

content: “…”;

}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160613.html原文链接：https://javaforall.cn