<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .page-normal a{ border: 1px solid #ff9600; padding: 5px 7px; color: #ff6500; text-decoration: none; } .page-normal{ color: #ff6500;/*可以让省略号变色*/ text-align: center;/*a 和span都是内联*/ font-size: 0;/*解决行内元素间距问题*/ } .page-normal a, .page-normal .page-current, .page-normal .page-pre, .page-normal .page-mid{/*将重复的合并*/ padding: 5px 7px; font-size: 18px; margin-left: 10px; } .page-normal a:hover{ border: 1px solid #ff6500; color: #ff6500; background: #ffbe94; } .page-normal .page-current{ border: 1px solid #ff6500; color: #ff6500; background: #ffbe94; } .page-normal .page-pre ,{ border: 1px solid #ffe3c6; color: #ffe3c6; } .page-normal .page-mid{ color: #ffe3c6; } </style> </head> <body> <div class="page-normal"> <span class="page-pre"><</span> <a class="page-current" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <span class="page-mid">...</span> <a href="#">199</a> <a href="#">200</a> <a href="#">></a> </div> </body> </html>
分页页码
最新推荐文章于 2023-06-29 13:38:22 发布