HTML+CSS實現網頁分頁頁碼
阿新 • • 發佈：2018-12-09
直角分頁頁碼實現
<!doctype html> <html> <head> <meta charset="utf-8"> <title>直角分頁頁碼</title> <style type="text/css"> /*設定 a 標籤的css樣式*/ .page-normal a{ border: 1px solid #ff6500; padding: 5px 7px; color: #ff6500; margin-left: 20px;/*設定標籤 a 之間的間隔*/ text-decoration: none;/*去除頁碼數字下面的下劃線*/ } /*設定滑鼠經過時 a 標籤的css樣式*/ .page-normal a:hover{ background-color: #ffbe94; } /*設定整個div的css樣式,該樣式主要用於設定網頁內的省略號 …… 的樣式，並且同時設定內容居中顯示*/ .page-normal{ color: #ff6500; text-align: center; } /*設定當前頁面的css樣式*/ .page-normal .page-current{ color: #ffffff; background-color: #ff6500; } /*設定左單括號 < 的css樣式*/ .page-normal .page-prev{ color: #ffe3c6; } /*進行程式碼優化，將不同css樣式中共有的屬性放在一起，有助於提高執行效率*/ .page-normal a, .page-normal a:hover, .page-normal .page-prev, .page-normal .page-current{ border: 1px solid #ff6500; padding: 5px 7px; } </style> </head> <body> <div class="page-normal"> <span class="page-prev"><</span> <!-- 數字1 代表當前頁面--> <span class="page-current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> …… <a href="#">199</a> <a href="#">200</a> <a href="#">></a> </div> </body> </html>
執行效果截圖
在直角分頁碼上面加入小圖示
<!doctype html> <html> <head> <meta charset="utf-8"> <title>直角分頁頁碼-有圖示的情況</title> <style type="text/css"> /*設定div樣式的整體佈局*/ .page-icon{ margin:20px 0 0 0;/*設定距離頂部20畫素*/ font-size:0;/*修復行內元素之間空隙間隔*/ text-align:center;/*設定內容居中顯示*/ } /*設定共有的的樣式佈局，主要是進行程式碼優化，提高執行效率*/ .page-icon a,.page-disabled,.page-next{ border:1px solid #ccc; border-radius:3px; padding:4px 10px 5px; font-size:14PX;/*修復行內元素之間空隙間隔*/ margin-right:10px; } /*對 a 標籤進行樣式佈局 */ .page-icon a{ text-decoration:none;/*取消連結的下劃線*/ color:#005aa0; } .page-current{ color:#ff6600; padding:4px 10px 5px; font-size:14PX;/*修復行內元素之間空隙間隔*/ } .page-disabled{ color:#ccc; } .page-next i,.page-disabled i{ cursor:pointer;/*設定滑鼠經過時的顯示狀態，這裡設定的是顯示狀態為小手狀態*/ display:inline-block;/*設定顯示的方式為行內塊元素*/ width:5px; height:9px; background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*獲取圖示的背景連結*/ } .page-disabled i{ background-position:-80px -608px; margin-right:3px; } .page-next i{ background-position:-62px -608px; margin-left:3px; } </style> </head> <body> <div class="page-icon"> <span class="page-disabled"><i></i>上一頁</span> <span class="page-current">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> …… <a href="#">199</a> <a href="#">200</a> <a class="page-next" href="#">下一頁<i></i></a> </div> </body> </html>
執行效果截圖
