Tad 教材網 - 線上書籍

:::

7-2 上課範例：style2.css

8-1 上課範例：index4.html next

\[1001\]XOOPS網站門面專業設計
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1001/08.zip)

### 一、表格

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](http://www.w3schools.com/css/pr_list-style-type.asp)

參考資源2：[http://www.w3school.com.cn/css/css\_reference.asp](http://www.w3school.com.cn/css/css_reference.asp)

:::