[WebTech #71] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-8 「頁面歷史」與「換頁控制」
所謂「頁面歷史」,英文其實叫做「Breadcrumb」,直接翻譯的話應該叫做「麵包屑」。它的外觀長相,大概像這樣:「首頁 > 產品 > 特惠產品 > ...」,而且常常出現在文章之上、導覽列之下的位置。至於為何叫「麵包屑」,據說是取以前入山打獵怕迷路,沿途撒下麵包屑,以記載「走過痕跡」。當年發明這項機制的人,就引用此典故,並命名為「Breadcrumb」了。
用 CSS 也能輕易製作出美觀的「頁面歷史」元件,請看下面文章:
(1) http://www.hongkiat.com/blog/breadcrumb-menu-css3/
(2) http://www.red-team-design.com/css3-breadcrumbs
至於「換頁控制」,就是常出現在首頁頂部的「照片輪換區」下方,有 4 ~ 5 個小圓點,藉以記載「有幾張照片」、以及「現在輪換到哪一張」了。使用者也可以直接點選特定「小圓點」,直接前進到某張照片。
用 CSS3 製作「換頁控制」也很簡單!請看下面文章:
(1) http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/extreme-makeover-jpaginator-css3-edition/
---
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp
Search