在網頁設計中,頁碼是一個很重要的組成部分。而在實現分頁功能時,使用CSS來制作頁碼是一種比較簡單有效的方式。
/* CSS代碼 */ .pagination { display: flex; justify-content: center; align-items: center; } .pagination a { color: #000; font-size: 14px; text-decoration: none; display: inline-block; padding: 8px 16px; margin: 0 4px; border-radius: 4px; transition: background-color 0.3s ease; } .pagination a:hover { background-color: #eee; } .pagination .active { background-color: #0071BC; color: #fff; }
以上CSS代碼是實現頁碼的樣式。首先定義了一個pagination的class,用來裝載頁碼。然后定義了a標簽作為頁碼,a標簽的樣式包括字體大小、顏色、文本裝飾、內邊距、外邊距和圓角等等。同時,給a標簽定義了鼠標懸停時的背景色,以及被選中時的背景色和顏色。
以上HTML代碼是放置頁碼的父元素pagination和多個a標簽。a標簽的href屬性可以設置跳轉鏈接。同時,為了方便CSS選中被選中的頁碼,可以在被選中的頁碼加上active的class。
以上便是如何使用CSS來制作頁碼的方法。實現簡單,樣式美觀,可以大大提升網站用戶體驗。