CSS分頁

CSS 分頁實例

本章節我們將為大家介紹如何透過使用 CSS 來建立分頁的實例。

簡單分頁

如果你的網站有很多個頁面,你就需要使用分頁來為每個頁面做導覽。

以下實例示範如何使用HTML 和CSS 來建立分頁

     

简单的分页

點擊及滑鼠懸停分頁樣式

如果點選目前頁,可以使用 .active 來設定當期頁樣式,滑鼠懸停可以使用 :hover 選擇器來修改樣式:

     

点击及鼠标悬停分页样式

移动鼠标的分页的数字上。

圓角樣式

可以使用 border-radius 屬性為選取的頁碼來新增圓角樣式:

     

圆角样式

滑鼠懸停過渡效果

我們可以透過新增 transition 屬性來為滑鼠移到頁碼上時加入過渡效果to the page links to create a transition effect on hover:

     

鼠标悬停过渡效果

鼠标移动到分页码上。

帶邊框分頁

我們可以使用 border 屬性來新增帶邊框分頁:

     

带边框分页

#分頁間隔

提示: 你可以使用 margin 屬性為每個頁碼直接新增空格:

     

分页间隔

分頁字體大小

我們可以使用 font-size 屬性來設定分頁的字體大小:

     

分页字体大小

我们可以使用 font-size 属性来设置分页的字体大小:

麵包屑導覽

另外一種導航為麵包屑導航,實例如下:

     

面包屑导航


#
繼續學習
||

面包屑导航

提交 重置程式碼
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!