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 属性来设置分页的字体大小:
麵包屑導覽
另外一種導航為麵包屑導航,實例如下:
面包屑导航