css多种简洁分页样式代码-html代码-BFW代码库

代码语言：html

代码描述：css多种简洁分页样式代码

代码标签： css 分页

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
	* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
body {
	font-family:'Lato',sans-serif;
	font-size:14px;
	color:#999;
	word-wrap:break-word
}
ul {
	list-style:none
}
.center {
	width:100%;
	max-width:600px;
	margin:auto;
	padding:20px
}
.pagination {
	border-bottom:1px solid rgba(0,0,0,0.2);
	padding:15px 0
}
.pagination ul {
	display:flex;
	justify-content:center;
	flex-flow:row wrap
}
.pagination ul li {
	margin:0 5px 0 0;
	text-align:center;
	position:relative
}
.pagination ul li a,.pagination ul li a:link,.pagination ul li a:visited {
	text-decoration:none
}
.rounded-blocks li a,.rounded-blocks li a:link,.rounded-blocks li a:visited {
	color:white;
	display:block;
	text-shadow:1px 1px 0 rgba(0,0,0,.2);
	padding:6px 3px 0;
	border-radius:50%;
	background:#0dcadd;
	background:-moz-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-webkit-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-o-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-ms-linear-gradient(180deg,#3deeff,#0dcadd);
	background:linear-gradient(180deg,#3deeff,#0dcadd);
	width:30px;
	height:30px;
	border-left:1px solid rgba(0,0,0,0.2);
	border-right:1px solid rgba(0,0,0,0.2);
	transition:.1s
}
.rounded-blocks li a:hover,.rounded-blocks li.active a {
	color:yellow;
	border-radius:5px;
	background:#0dcadd;
	background:-moz-linear-gradient(180deg,#0dcadd,#3deeff);
	background:-webkit-linear-gradient(180deg,#0dcadd,#3deeff);
	background:-o-linear-gradient(180deg,#0dcadd,#3deeff);
	background:-ms-linear-gradient(180deg,#0dcadd,#3deeff);
	background:linear-gradient(180deg,#0dcadd,#3deeff)
}
.rounded-blocks li:first-of-type a,.rounded-blocks li:last-of-type a {
	width:auto;
	border-radius:25px 0 0 25px;
	padding:6px 25px 0 15px;
	text-align:left
}
.rounded-blocks li:first-of-type a:before,.rounded-blocks li:last-of-type a:before {
	position:absolute;
	content:"";
	width:46px;
	height:46px;
	background:white;
	border-radius:50%;
	top:-3px;
	right:-35px
}
.rounded-blocks li:last-of-type a {
	border-radius:0 25px 25px 0;
	text-align:right;
	padding:6px 15px 0 20px
}
.rounded-blocks li:nth-last-of-type(2) {
	z-index:3
}
.rounded-blocks li:last-of-type a:before {
	right:auto;
	left:-35px
}
ul.semi-rounded-blocks li {
	margin:0;
	text-shadow:1px 1px 0 rgba(0,0,0,.2)
}
.semi-rounded-blocks li a,.semi-rounded-blocks li a:link,.semi-rounded-blocks li a:visited {
	display:block;
	background:#0dcadd;
	background:-moz-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-webkit-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-o-linear-gradient(180deg,#3deeff,#0dcadd);
	background:-ms-linear-gradient(180deg,#3deeff,#0dcadd);
	background:linear-gradient(180deg,#3deeff,#0dcadd);
	padding:7px 5px 5px;
	color:white;
	width:30px;
	height:30px;
	border-right:1px solid #0dcadd
}
.semi-rounded-blocks li a:hover,.semi-rounded-blocks li.active a {
	background:#0dcadd;
	transform:scale(1,1.04);
	border-right:1px solid #3deeff;
	color:yellow
}
.semi-rounded-blocks li:first-of-type a:hover,.semi-rounded-blocks li:last-of-type a:hover {
	transform:scale(1)
}
.semi-rounded-blocks li:first-of-type a,.semi-rounded-blocks li:last-of-type a {
	width:auto
}
.semi-rounded-blocks li:first-of-type a {
	border-radius:25px 0 0 25px;
	padding:7px 10px 5px 15px
}
.semi-rounded-blocks li:last-of-type a {
	border-radius:0 25px 25px 0;
	padding:7px 15px 5px 9px
}
ul.full-rounded-blocks li {
	margin:0;
	background:#7aa11b
}
.full-rounded-blocks li a,.full-rounded-blocks li a:link,.full-rounded-blocks li a:visited {
	display:block;
	width:35px;
	height:35px;
	border-radius:50%;
	padding:10px 5px 5px;
	color:white;
	background:#9bc11f;
	text-shadow:1px 1px 0 rgba(0,0,0,0.2);
	border:3px solid transparent;
	transition:.1s;
	padding:6px 5px 5px
}
.full-rounded-blocks li a:hover,.full-rounded-blocks li.active a {
	transform:scale(1.3);
	border:3px solid #6a8f0f;
	position:relative;
	color:#f3ff71;
	z-index:2
}
.full-rounded-blocks li a:hover {
	z-index:3
}
.full-rounded-blocks li:first-of-type a:hover,.full-rounded-blocks li:last-of-type a:hover {
	transform:scale(1);
	border:3px solid transparent
}
.full-rounded-blocks li:first-of-type a,.full-rounded-blocks li:last-of-type a {
	width:auto;
	padding:6px 15px 5px;
	border-radius:0;
	background:#7aa11b
}
.full-rounded-blocks li:first-of-type,.full-rounded-blocks li:first-of-type a {
	border-radius:25px 0 0 25px
}
.full-rounded-blocks li:last-of-type,.full-rounded-blocks li:last-of-type a {
	border-radius:0 25px 25px 0
}
.rounded-square-blocks li a,.rounded-square-blocks li a:link,.rounded-square-blocks li a:visited {
	display:block;
	padding:5px;
	color:#ccc;
	transition:.3s;
	border-bottom:2px solid transparent;
	position:relative
}
.rounded-square-blocks li a:hover,.rounded-square-blocks li.active a {
	border-bottom:2px solid #6fe2bf;
	color:#6fe2bf
}
.rounded-square-blocks li a:hover:before,.rounded-square-blocks li.active a:before {
	content:"";
	position:absolute;
	border:4px solid transparent;
	border-top:4px solid #6fe2bf;
	top:-3px;
	left:50%;
	transform:translate(-50%,0)
}
.rounded-square-blocks li:first-of-type a:before,.rounded-square-blocks li:last-of-type a:before {
	display:none
}
.silver-blocks li a,.silver-blocks li a:link,.silver-blocks li a:visited {
	display:block;
	padding:5px;
	width:30px;
	height:30px;
	border-radius:50%;
	background:#eee;
	color:#96a2a7;
	background:#f3f4f5;
	background:linear-gradient(180deg,#fff,#ebedef);
	box-shadow:inset 0 -1px 0 0 white;
	border:1px solid #dee1e2
}
.silver-blocks li:first-of-type a,.silver-blocks li:last-of-type a {
	width:auto
}
.silver-blocks li a:hover,.silver-blocks li.active a {
	background:lin.........完整代码请登录后点击上方下载按钮下载查看