css数字分页布局代码实例
分类:实例代码
本章节分享一段代码实例,它实现了数字分页的布局结构。
还没有实现效果,感兴趣的朋友可以做一下参考,分页两端是有背景图片的,由于条件限制,这里没有演示。
更多动态分页效果可以参阅分页特效版块。
代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { padding: 0; margin: 0; } ul li { list-style: none; } .page-con ul { display: none; } #pageGro { width: 400px; height: 25px; margin: 0px auto; padding-top: 30px; } #pageGro div, #pageGro div ul li { font-size: 12px; color: #999; line-height: 23px; float: left; margin-left: 5px; } #pageGro div ul li { width: 22px; text-align: center; border: 1px solid #999; cursor: pointer; } #pageGro div ul li.on { color: #fff; background: #3c90d9; border: 1px solid #3c90d9; } #pageGro .pageUp, #pageGro .pageDown { width: 63px; border: 1px solid #999; cursor: pointer; } #pageGro .pageUp { text-indent: 23px; background: url(pageUp.png) 5px 7px no-repeat; } #pageGro .pageDown { text-indent: 5px; background: url(pageDown.png) 46px 6px no-repeat; } </style> </head> <body> <div id="pageGro" class="cb"> <div class="pageUp">上一页</div> <div class="pageList"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="pageDown">下一页</div> </div> </body> </html>