页码简单设计
Posted wfl9310
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页码简单设计相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .page-area ul li{ display: inline-block;/*inlineblock就可以在一行显示，或者float都可以*/ } .page-area ul li a{ display: inline-block; color: #369; height: 34px; line-height: 34px; text-align: center; width: 34px; border: 1px solid #e1e1e1; border-radius: 15%; margin-left: 5px; } .page-area ul li a.page-next{ width: 90px; } .page-area ul li a:hover{ background-color: #369;/*background是写url的（‘’）*/ color: white; } </style> </head> <body> <div class="page-area"> <ul> <li><span class="current-page">1</span></li> <li><a href="#" class="page-a">2</a></li> <li><a href="#" class="page-a">3</a></li> <li><a href="#" class="page-a">4</a></li> <li><a href="#" class="page-a">5</a></li> <li><a href="#" class="page-a">6</a></li> <li><a href="#" class="page-a">7</a></li> <li><a href="#" class="page-a">8</a></li> <li><a href="#" class="page-a">9</a></li> <li><a href="#" class="page-a">10</a></li> <li><a href="#" class="page-a page-next">下一页</a></li> </ul> </div> </body> </html>
以上是关于页码简单设计的主要内容，如果未能解决你的问题，请参考以下文章