CSS分頁選中是指網頁的分頁條中,選中某一頁時,該頁會突出顯示并改變樣式。這種效果可以通過CSS來實現。
.pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;}
分析上述代碼,可以看出:
1. 首先對分頁條做了一個基本樣式的設置,將其以inline-block的形式水平排列。
2. 對每個頁碼的樣式進行設置,包括顏色、邊距、字體等。
3. 對當前頁進行樣式的設置,包括背景色、邊框等。
4. 對鼠標懸停時的效果進行設置,包括背景色變化等。
通過上述設置,當用戶點擊某一頁時,該頁會突出顯示,并且讓用戶對當前處于哪一頁有直觀的感覺,從而增強了用戶體驗。
上一篇css切圖分割代碼