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

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

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

3、left-width等。o實(shí)例：9.2.html9.1.3 表格邊框顏色o表格顏色設(shè)置非常簡(jiǎn)單，通常使用CSS3屬性color設(shè)置表格中文本顏色，使用background-color設(shè)置表格背景色。如果為了突出表格中的某一個(gè)單元格，還可以使用background-color設(shè)置某一個(gè)單元格顏色。o實(shí)例：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表單將這些元素排列組合在一起的時(shí)候，其單純的

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

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