第三堂課： 以 CSS 搭配清單項目製作下拉式選單
一個好的網頁想要吸引眾人的目光，第一要務是網頁內容要豐富且資料正確，否則用戶很容易流失。其次，就是需要有個良好的操作界面，
讓用戶很輕鬆的能夠依據過去的經驗找到自己想要尋找的項目。最終則是生動活潑的網頁設計的回應，這包括色彩、設計感、互動狀況等。
第一點得要設計者自己找到主題才行。至於操作界面與設計感，雖然很多設計師喜歡使用影像編輯軟體來設計例如按鈕、下拉式選單、可變動按鈕等，
不過影像類型的設計總是需要花費掉用戶較多的下載時間。因此，如何透過單純的 CSS 搭配清單來設計按鈕列與下拉式選單，就是個可以學習的項目，
因為它不但不消耗下載頻寬，而且變化速度也算較快速的喔！另外，瀏覽器也很容易清楚這個清單項目是在設計超連結呢！
本章重點目標：
- 呼叫上週處理的 style2.css 以及 demo2.html 檔案，分別複製成 style3.css 及 demo3.html ，本周主要修改這兩個檔案內容。
在 demo3.html 當中，找到 nav 的項目，加入五個左右的清單項目，並且透過 <a href="#"> 來預先處理超連結，
再配合 ul 的清單項目，製作出需要的清單環境。
- 製作第一層選單的功能：
- 因為要做多重選單，為了擔心格式之間的互相干擾，建議使用 nav > ul > li ... 的樣式來處理較佳。
- 針對整體 ul 的清單空間做的設定：
- 注意，切記要將 margin、padding 的距離拿掉 (0px)
- 同時，選單的清單格式 list-style 設定為無 (none) 才好
- 如果按鈕需要置中，則請到父元素 (nav 裡面) 增加置中的排版效果 (text-align)
- 針對每一個按鈕的設定，就是 li 的設定 (最好已經是 nav > ul > li )
- 預設的 li 為佔滿整個水平空間的區塊 (block)，但是本課程預計 li 水平對齊的按鈕列，因此需要將 display 設定為內置區塊 (inline-block) 才行。
- 另外，想要設計出『按鈕』的感受，上右下左的邊框顏色、厚度應該要不一樣比較好。如果邊框的厚度不同時， 需要在特效的部分做一點處理才行 (底下的 :hover 會談到)
- 按鈕列的內部不要有留白，留白交給底下的 a 來處理，因此 padding 請設定為 0 喔！
- 建議可以加上底色，這樣比較有按鈕的特別效果。
- 內部文件的排版，可以置中較妥當 (text-align)
- 依據你的按鈕數量，給予特定的寬度定義
- 在每個按鈕內的超連結 (a) 的設定項目上：
- 需要加上 display 是 block 的項目才對！這樣才能填滿整個 block 區塊！
- 此外，由於四面八方最好也有點距離感，因此 a 要加上 padding ，讓字體有點留白比較好喔！
- 因為是按鈕列，所以建議字體的底線可以取消較佳
- 字體變化上，可以使用 text-shadow 來增加厚度以及設計感
- 因為是按鈕，所以字體 (font-size) 也應該做些變化較佳。
- 第一層選單的變化部份：
- 注意到任何地方都可以擁有 :hover 與 :active 喔！最好兩個內容是一樣的 (nav > ul >li:hover, nav > ul > li:active)
- 按鈕列，亦即是 nav > ul > li:hover 的部份，應該可以做一點額外的設定如下：
- 邊框的部份應該要注意光影的效果，所以需要上右下左對調顏色(這部份請注意，變化過後的『版型』不應該有任何跳動～ 所以如果你的設計結果有產生畫面跳動 (即使僅有 1~4 個像素的差異) ，那就不是個好設計！
- 承上，上下兩者的邊框厚度不同，則因為外框的原因，會有厚度的差異。此時就得要使用對上對齊的方式來處理。 在這個 :hover 的部分，加上 vertical-align: top; 就可以解決這個畫面跳動的問題。
- 其實，也能夠設計在 li:active 才做按鈕邊框特效，這樣感覺才像滑鼠按下去的樣式！
- 如果是針對超連結的項目特效，可以這樣設計看看：
- 滑鼠移動進去時 (a:hover)，應該字體的顏色也能做個變動比較好。
- 滑鼠按下時 (a:active)，應該字體的顏色也能做個變動比較好。
- 第二層選單的設計：
- 重點是滑鼠未點擊、滑入第二層的父選單按鈕時，應該是，子選單不能出現的 (visibility 的項目應該是 hidden or visible 才對喔！)
- 當滑入、點擊父選單時，子選單才會出現的 (注意，是上層的 li 還是上層的 ul 呢？)
- 針對第二層的整體選單 (ul) 設定應該要這樣：
- 由於子選單涵蓋在父選單項目中，因此定位 (position) 的絕對定位 (absolute) 項目就非常非常重要！這樣位置才不會跑掉
- 在撰寫 position 時得要特別注意，父元素與子元素同時都需要設定！否則位置會排列不正確。在此案例中，我們的第一層 li 需要 relative 設定， 第二層 ul 則需要 absolute 的設定才會正確！
- 當兩層都有 position 時，則第二層選單的寬度可以設定為 100% 即可吻合整體的寬度資訊！
- 同樣的，padding 與 margin 建議都設定為 0 ，詳細的按鈕交由 li 或 a 去指定較佳。
- 調整項目不要讓選單被孤立～否則會變成無法點擊的選單 (margin 的任務)
- 針對第二層的按鈕
- 可以指定不同於第一層樣式的風格較佳 (請參考上述的說明，定義好你的第二層選單)
- 邊框的設定方式中，可以讓左框較厚，底框出現一個像素，其他兩個框線則可以取消或者僅給予一個像素，這樣比較像按鈕
- 如果想要有滑動的感覺，可以給予高度 (height) 項目先為 0 ，並且給予轉遞 (transition: height NNs) ，即可改變你想要設定的項目的秒數
- 針對第二層選單的特效
- 其實是針對 nav ul li:hover ul li 這個項目的設定，可以設定高度 (height) 就好，這樣就可以有滑動的效果了。
本章練習與習題：
- 將 demo3.html, style3.css 更新到本週進度；
- 建立 homework/class_03.html 檔案，同時建立 include/style_class_03.css 檔案，內容將本週的橫向選單改成類似 linux.vbird.org內的直向選單，並在首頁製作連結。由於按鈕列的風格並不相同， 因此無法使用同一個 style 來作為連結之用，這點請特別留意喔！
- 將上述資料進行完畢，並於首頁加入正確的連結，將結果上傳後，到上傳網站查閱是否正確處理才可以！