HTML5+CSS3+JavaS教學幻燈片9_第1頁
HTML5+CSS3+JavaS教學幻燈片9_第2頁
HTML5+CSS3+JavaS教學幻燈片9_第3頁
HTML5+CSS3+JavaS教學幻燈片9_第4頁
HTML5+CSS3+JavaS教學幻燈片9_第5頁
已閱讀5頁,還剩10頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

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源文件分

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論