HTML5+CSS3+JavaS教學(xué)幻燈片9

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

2、和前面一模一樣，只不過修飾的對象變換了。oborder-collapse屬性主要用來設(shè)置表格的邊框是否被合并為一個單一的邊框，還是像在標(biāo)準(zhǔn)的HTML中那樣分開顯示。其語法格式為：border-collapse : separate | collapse。o實例：9.1.html9.1.2 表格邊框?qū)挾萶雖然使用HTML標(biāo)記的描述border也能提高表格的寬度，但我們還是推薦使用CSS屬性設(shè)置邊框?qū)挾?。使用border-width邊框?qū)挾冗M行設(shè)置，從而提高顯示樣式。如果需要單獨設(shè)置某一個邊框?qū)挾龋梢允褂胋order-width的衍生屬性設(shè)置，例如border-top-width和border-

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

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

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