css數字分頁佈局程式碼例項
本章節分享一段程式碼例項,它實現了數字分頁的佈局結構。
還沒有實現效果,感興趣的朋友可以做一下參考,分頁兩端是有背景圖片的,由於條件限制,這裡沒有演示。
更多動態分頁效果可以參閱分頁特效版塊。
程式碼如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
相關文章
- jQuery數字分頁效果程式碼例項jQuery
- css多欄佈局程式碼例項CSS
- css彈性佈局程式碼例項CSS
- div css左右佈局例項程式碼CSS
- css九宮格佈局程式碼例項CSS
- jQuery實現的數字分頁程式碼例項jQuery
- javascript實現的數字分頁效果程式碼例項JavaScript
- css多列等寬分佈程式碼例項CSS
- css上面縮圖底部標題佈局程式碼例項CSS
- flex居中佈局程式碼例項Flex
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- css3實現的瀑布流佈局程式碼例項CSSS3
- 響應式佈局程式碼例項
- flex聖盃佈局程式碼例項Flex
- jQuery瀑布流佈局程式碼例項jQuery
- flex彈性佈局程式碼例項Flex
- CSS例項詳解:Flex佈局CSSFlex
- 數字按鈕分頁CSS樣式程式碼CSS
- 靜態頁面佈局例項
- 數字千分位分隔程式碼例項
- display: flex彈性佈局程式碼例項Flex
- CSS-Flex 佈局教程:例項篇CSSFlex
- 1.9 靜態頁面佈局例項
- CSS數字分頁效果CSS
- 響應式佈局簡單程式碼例項
- css頁面佈局CSS
- js數字三位分隔效果程式碼例項JS
- javascript數字上舍入程式碼例項JavaScript
- javascript數字下舍入程式碼例項JavaScript
- 使用數字分隔字串程式碼例項字串
- js獲取數字中的最小數字程式碼程式碼例項JS
- CSS 列表項佈局技巧CSS
- css自定義列表計數程式碼例項CSS
- 12種常見的div+css佈局例項CSS
- jquery實現的分頁效果例項程式碼jQuery
- flex產品列表均勻分佈程式碼例項Flex
- js格式化數字例項程式碼JS
- css梯形程式碼例項CSS