當我們需要在網頁中展示一些較為復雜的內容時,往往需要分頁導航條來方便用戶進行跳轉和瀏覽。CSS3提供了分頁導航條的源碼,可以幫助我們快速實現這一功能。
.pagination { list-style: none; display: flex; justify-content: center; margin-top: 20px; } .pagination li { margin: 0 10px; } .pagination a { color: #333; padding: 5px 10px; text-decoration: none; border-radius: 3px; transition: all 0.3s ease; } .pagination a:hover { background-color: #333; color: #fff; }
通過以上代碼,我們可以實現基礎的分頁導航條。其中,我們使用了Flex布局,使得導航條能夠在頁面中水平居中展示。同時,我們給導航條的每個按鈕添加了上下左右的外邊距,讓它們之間的距離適中。在鏈接樣式方面,我們定義了默認的顏色和形狀,通過hover樣式來改變鏈接的背景色和文字顏色。
當然,如果需要更加復雜的分頁導航條,我們可以根據需要進行樣式的修改和功能的添加。例如,我們可以添加“上一頁”、“下一頁”按鈕,或者使用JavaScript實現翻頁動畫效果。