css多种简洁分页样式代码

代码语言: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 25.........完整代码请登录后点击上方下载按钮下载查看

网友评论0