8. 表格、清單、超連結

一、表格

1. 取消隔線間隔：border-collapse: collapse;
2. table和td或th需分別設定border。

二、基本清單

1. 樣式：list-style-type: decimal-leading-zero(補零數字) , none(不要符號)
2. 位置：list-style-position:inside , outside(預設)
3. 圖片：list-style-image:url(圖片位置);
4. 集合寫法list-style: 樣式 位置 圖片;

三、變形清單（選單、相簿...等）

1. 浮動：float:left , right; ←必要
2. 溢出處理：overflow:visible(預設) , hidden(隱藏) , scroll(捲軸) , auto(自動)
3. 滑鼠：cursor: pointer;
4. 配合 border , margin , padding , text-align , vertical-align 一起用，效果更佳
5. 最後記得用clear:both來清除浮動

四、段落

1. 首行縮排：text-indent: 24px (亦可用%)
2. 大小寫：text-transform: capitalize (首字大寫) , uppercase(全部大寫) ,lowercase(全部小寫)
3. 擬元件（Pseudo-elements）建立一個抽象的網頁元件，例如「段落第一行」或者「段落第一個字」，而且也提供另一個方法來套用樣式到一個不存在的內容。（:before 及 :after）。
   • (1) :first-letter 設定目標第一個字的樣式
   • (2) :first-line 設定目標第一列字的樣式
4. 例如：p:first-letter { font-size:20px}

五、超連結

1. 文字裝飾：text-decoration: none(取消任何線), overline(頭頂線) , linethrough(刪除線) , underline(底線) , blink (閃動，僅Firefox支援)
2. 擬類別（Pseudo-classes）通常是動態的，也就是和使用者的操作互動有關的的一個狀態，例如滑鼠移過（:hover）這類的狀態。
   • (1) :active 滑鼠點下該元件的瞬間
   • (2) :hover 滑鼠移到該元件上
   • (3) :link 尚未瀏覽過的超鏈結
   • (4) :visited 已經瀏覽過其內容的超鏈
3. 想想看，這是怎麼做的？

 參考資源1：http://www.w3schools.com/css/pr_list-style-type.asp

 參考資源2：http://www.w3school.com.cn/css/css_reference.asp