
28
|
第二章
技術上而言,如果我們把
ul
的背景顏色設為白色,把子元素背景設為透明,就可以把半
徑角加至
ul
,以達到圓角清單的效果。然而,當使用者點擊清單中第一個或最後一個項
目時,點擊後顯示的高亮度就不是矩型的,這樣看起來很糟。最好的做法就是對標籤本身
加入圓角特性,如同我在此所示範的。
前面出現的
:first-child
和
:last-child
稱為
虛擬類型
(
pseudoclass
)。
虛擬類型是特殊的
CSS
選取元素型態,可讓你鎖定符合某些脈絡準則的元
素。換言之,你可以根據某些特性替事物安排樣式,諸如元素在
list
中的位
置、是否取得游標焦點、是否已被點擊過,而不用親手更新標記元素。例如,
li:first-child
會選取的某個
ul
元素下的第一個
li
。沒有虛擬類型,我們
就必須要對第一個
li
手動新增一個
class
,讓瀏覽器知道這是第一個
li
。
以
jQuery
新增基本行為
下一步是對頁面新增一些
JavaScript
,以支援基本的動態行為。特別的是,我們要讓使用
者可以顯示和隱藏開頭的大型導覽區域,使其只在使用者需要時才看得見。要做到這一
點,我們要寫一些新的
CSS
,利用一些
JavaScript
,把新的
CSS
套用至現存之
HTML
。
首先,讓我們看一下新的
CSS
。步驟
1
是隱藏
header
裡的
ul
元素,當使用者載入頁面時
才不會顯示出來。如果你正跟著做,那麼請打開你的
android.css
,加入下列的內容:
#header ul.hide {
display: none;
}
但除非你把 ...