css实现4种分页导航条效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现4种分页导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> *,*::before,*::after { box-sizing:border-box; } html { line-height:1.15; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -ms-overflow-style:scrollbar; -webkit-tap-highlight-color:transparent; } @-ms-viewport { width:device-width; } article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section { display:block; } .nav-sidebar li ul li:last-child { border-bottom:0px; } .nav-sidebar li ul { }.secondlevel ul { background:none !important; margin-left:5px !important; margin-right:5px !important; } body { margin:0; font-family:'Open Sans',sans-serif; font-size:14px; font-weight:400; line-height:1.5; color:#374254; background-color:#ebf2fb; padding:100px } [tabindex="-1"]:focus { outline:0 !important; } hr { box-sizing:content-box; height:0; overflow:visible; } h1,h2,h3,h4,h5,h6 { margin-top:0; margin-bottom:0.66em; } p { margin-top:0; margin-bottom:1rem; } abbr[title],abbr[data-original-title] { text-decoration:underline; -webkit-text-decoration:underline dotted; text-decoration:underline dotted; cursor:help; border-bottom:0; } address { margin-bottom:1rem; font-style:normal; line-height:inherit; } ol,ul,dl { margin-top:0; margin-bottom:1rem; } ol ol,ul ul,ol ul,ul ol { margin-bottom:0; } dt { font-weight:700; } dd { margin-bottom:.5rem; margin-left:0; } blockquote { margin:0 0 1rem; } dfn { font-style:italic; } b,strong { font-weight:bolder; } small { font-size:80%; } sub,sup { position:relative; font-size:75%; line-height:0; vertical-align:baseline; } sub { bottom:-.25em; } sup { top:-.5em; } a { color:#a7b4c9; text-decoration:none; background-color:transparent; -webkit-text-decoration-skip:objects; } a:hover { color:#313148; text-decoration:underline; } a:not([href]):not([tabindex]) { color:inherit; text-decoration:none; } a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus { color:inherit; text-decoration:none; } a:not([href]):not([tabindex]):focus { outline:0; } pre,code,kbd,samp { font-family:monospace,monospace; font-size:1em; } pre { margin-top:0; margin-bottom:1rem; overflow:auto; -ms-overflow-style:scrollbar; } figure { margin:0 0 1rem; } img { vertical-align:middle; border-style:none; } .pagination { display:-ms-flexbox; display:flex; padding-left:0; list-style:none; border-radius:3px; } .page-link { position:relative; display:block; padding:0.5rem 0.75rem; margin-left:-1px; color:#374254; line-height:1.25; background-color:#fff; border:1px solid rgba(167,180,201,.3); } .page-link:hover { z-index:2; color:#2ddcd3; text-decoration:none; background-color:rgb(234,236,251); } .page-link:focus { z-index:2; outline:0; box-shadow:0; } .page-link:not(:disabled):not(.disabled) { cursor:pointer; } .page-item:first-child .page-link { margin-left:0; border-top-left-radius:3px; border-bottom-left-radius:3px; } .page-item:last-child .page-link { border-top-right-radius:3px; border-bottom-right-radius:3px; } .page-item.active .page-link { z-index:1; color:#fff; background-color:#2ddcd3; border-color:#2ddcd3; } .page-item.disabled .page-link { color:#ced4da; pointer-events:none; cursor:auto; background-color:#fff; border-color:rgba(167,180,201,.3); } .pagination-lg .page-link { padding:0.75rem 1.5rem; font-size:1.125rem; line-height:1.5; } .pagination-lg .page-item:first-child .page-link { border-top-left-radius:3px; border-bottom-left-radius:3px; } .pagination-lg .page-item:last-child .page-link { border-top-right-radius:3px; border-bottom-right-radius:3px; } .pagination-sm .page-link { padding:0.25rem 0.5rem; font-size:0.875rem; line-height:1.5; } .pagination-sm .page-item:first-child .page-link { border-top-left-radius:3px; border-bottom-left-radius:3px; } .pagination-sm .page-item:last-child .page-link { border-top-right-radius:3px; border-bottom-right-radius:3px; } </style> </head> <body> <ul class="pagination"> <nav aria-label="Page navigation"> <ul class="pa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0