css多种分页效果代码
代码语言:html
所属分类:布局界面
代码描述:css多种分页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; } body { color: #fff; background: #949c4e; background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { min-height: 100vh; } .center { display: flex; justify-content: center; align-items: center; } .container { background: #fdfdfd; padding: 1rem; margin: 3rem auto; border-radius: 0.2rem; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3); counter-reset: pagination; text-align: center; } .container:after { clear: both; content: ""; display: table; } .container ul { width: 100%; } .xlarge { width: 65rem; } .large { width: 45rem; } .middle { width: 32rem; } .small { width: 22rem; } .xsmall { width: 14rem; } ul, li { list-style: none; display: inline; padding-left: 0px; } li { counter-increment: pagination; } li:hover a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } li.active a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } li:first-child { float: left; } li:first-child a:after { content: "Previous"; } li:nth-child(2) { counter-reset: pagination; } li:last-child { float: right; } li:last-child a:after { content: "Next"; } li a { border: solid 1px #d7d7d7; border-radius: 0.2rem; color: #7d7d7d; text-decoration: none; text-transform: uppercase; display: inline-block; text-align: center; padding: 0.5rem 0.9rem; } 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: "Previous"; } .large li:nth-child(2) a { display: inline-block; } .large li:nth-child(3) a { display: inline-block; } .large li:nth-child(4) a { display: inline-block; } .large li:nth-child(5) a { display: inline-block; } .large li:nth-child(6) a { display: inline-block; } .large li:nth-child(7) a { display: inline-block; } .large li:nth-child(8) a { display: inline-block; } .large li:last-child a { display: inline-block; } .large li:last-child a:after { content: "Next"; } .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: "..."; } .middle li a { display: none; } .middle li:first-child a { display: inline-block; } .middle li:first-child a:after { content: "<"; } .middle li:last-child a { display: inline-block; } .middle li:last-child a:after { content: ">"; } .middle li:nth-child(2) a { display: inline-block; } .middle li:nth-child(3) a { display: inline-block; } .middle li:nth-child(4) a { display: inline-block; } .middle li:nth-child(5) a { display: inline-block; } .middle li:nth-last-child(2) a { display: inline-block; } .middle li:nth-last-child(3) { display: inline-block; } .middle li:nth-last-child(3):after { padding: 0 1rem; content: "..."; } .small li { display: none; } .small li:first-child { width: 50%; display: inline; } .small li:first-child a:after { content: "Previous Page"; } .small li:last-child { display: inline; } .small li:last-child a:after { content: "Next Page"; } .xsmall li { display: none; } .xsmall li.active { display: inline; } .xsmall li:first-child { display: inline; } .xsmall li:first-child a:after { content: "Prev"; } .xsmall li:last-child { display: inline; } .xsmall li:last-child a:after { content: "Next"; } </style> </head> <body> <div class="container xlarge"> <div class="pagination"> <ul> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li class="active"> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> </ul> </div> </div> <div class="container large"> <div class="pagination"> <ul> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li class="active"> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> <li> <a href="#"></a> </li> </ul> </div> </div> <div class="container middle"> <div class="pagination"> <ul> <li> <a href="#"></a> </li> <li> <a hre.........完整代码请登录后点击上方下载按钮下载查看
网友评论0