css多种简洁分页样式代码
代码语言:html
所属分类:布局界面
代码描述: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 25.........完整代码请登录后点击上方下载按钮下载查看
网友评论0