1、第9章 用CSS3美化表格和表單樣式本章內容o 9.1 表格基本樣式o 9.2 CSS3與表單o 9.3 綜合實例1隔行變色o 9.4 綜合實例2表格圖文網頁布局o 9.5 綜合實例3變色表格o 9.6 綜合實例4登錄表單o 9.7 綜合實例5注冊表單9.1 表格基本樣式o 9.1.1 表格邊框樣式o 9.1.2 表格邊框寬度o 9.1.3 表格邊框顏色9.1.1 表格邊框樣式o可以使用CSS3的border屬性及衍生屬性，和border-collapse屬性對邊框進行修飾，其中border屬性表示對邊框進行樣式、顏色和寬帶設置，從而達到提高樣式效果的目的，這個屬性前面已經介紹過了，其使用方法

2、和前面一模一樣，只不過修飾的對象變換了。oborder-collapse屬性主要用來設置表格的邊框是否被合并為一個單一的邊框，還是像在標準的HTML中那樣分開顯示。其語法格式為：border-collapse : separate | collapse。o實例：9.1.html9.1.2 表格邊框寬度o雖然使用HTML標記的描述border也能提高表格的寬度，但我們還是推薦使用CSS屬性設置邊框寬度。使用border-width邊框寬度進行設置，從而提高顯示樣式。如果需要單獨設置某一個邊框寬度，可以使用border-width的衍生屬性設置，例如border-top-width和border-

3、left-width等。o實例：9.2.html9.1.3 表格邊框顏色o表格顏色設置非常簡單，通常使用CSS3屬性color設置表格中文本顏色，使用background-color設置表格背景色。如果為了突出表格中的某一個單元格，還可以使用background-color設置某一個單元格顏色。o實例：9.3.html9.2 CSS3與表單o 9.2.1 美化表單中的元素o 9.2.2 美化提交按鈕o 9.2.3 美化下拉菜單9.2.1 美化表單中元素o表單中元素非常多而且雜亂，例如input輸入框、按鈕、下拉菜單、單選按鈕和復選框等。當使用form表單將這些元素排列組合在一起的時候，其單純的

4、表單效果非常簡陋，這時設計者可以通過CSS3的相關樣式，控制表單元素輸入框和文本框等元素外觀。o實例：9.4.html9.2.2 美化提交按鈕o可以將一個輸入框的上、左和右邊框去掉，形成一個和簽名效果一樣的輸入框，例如將按鈕的四個邊框去掉，只剩下文字超級鏈接一樣的按鈕。對表單元素邊框定義，可以采用border-style、border-width和border-color及其衍生屬性。如果要對表單元素背景色設置，可以使用background-color設置，其中將值設置為transparent（透明色）是最常見的一種方式。o實例：9.5.html9.2.3 美化下拉菜單oCSS3屬性不僅可以控

5、制下拉菜單的整體字體和邊框等，還可以對下拉菜單中的每一個選項設置背景色和字體顏色。對于字體設置可以使用font相關屬性設置，例如font-size，font-weight等，對于顏色設置可以采用color和background-color屬性設置等。o實例：9.6.html9.3 綜合實例1隔行變色o分析需求o創建HTML，實現table表格o設置標題和表格基本樣式o修飾td和th單元格o實現隔行變色o源文件分析：9.7.html9.4 綜合實例2表格圖文網頁布局o分析需求o創建HTML頁面，實現表格基本樣式o修飾全局樣式和表格o修飾行tr和單元格tdo源文件分析：9.8.html9.5 綜合實例3變色表格o分析需求o創建HTML，實現table表格o修飾table表格和單元格o修飾標題o實現鼠標懸浮變色o源文件分析：9.9.html9.6 綜合實例4登錄表單o分析需求o創建HTML網頁，實現表單o修飾標題和層o修飾輸入框和按鈕o源文件分