《CSS表格和表單》PPT課件

《《CSS表格和表單》PPT課件》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第11章CSS表格和表單王會(huì)wangh-wh@neusoft.com1.用CSS設(shè)置表格樣式1.1表格標(biāo)題的位置CSS屬性：caption-side該屬性可以調(diào)整表格標(biāo)題的位置為上、下、左、右，但是只在Firefox、iE8及以上有效，IE8以下不支持。實(shí)例：11-1.html1.2表格的顏色CSS屬性：color、background-color其中，color屬性設(shè)置表格中文字的顏色，通過background-color屬性設(shè)置表格的背景顏色。實(shí)例：11-2.html這些設(shè)置與文字本身的CSS設(shè)置完全相同，與頁面背景的設(shè)置也完全一樣。1.3表格的邊框CSS屬性：border、bor

2、der-collapse在CSS中通過border屬性設(shè)置表格邊框，設(shè)置方法跟圖片邊框完全一樣。特別要注意的是，當(dāng)僅設(shè)置表格的邊框時(shí)，單元格不會(huì)有任何的邊框。只有對(duì)單元格單獨(dú)設(shè)置邊框時(shí)，單元格才會(huì)有邊框。另外，默認(rèn)情況下，單元格的邊框之間會(huì)有空隙，這時(shí)需要設(shè)置CSS屬性border-collapse，使邊框重疊在一起。實(shí)例：11-3.html2.CSS表格實(shí)例2.1隔行變色的表格采用隔行變色的表格，使數(shù)據(jù)一目了然，不會(huì)感到凌亂。在CSS中實(shí)現(xiàn)隔行變色十分簡單，只需要給偶數(shù)行的標(biāo)記都添加上相應(yīng)的類型就可以了。實(shí)例：11-4.html2.2鼠標(biāo)經(jīng)過時(shí)變色的表格如果數(shù)據(jù)行能夠動(dòng)態(tài)地根

3、據(jù)鼠標(biāo)來變色，會(huì)使頁面充滿生機(jī)，減少閱讀疲勞。對(duì)于Firefox瀏覽器來說，僅僅通過CSS便可以實(shí)現(xiàn)該效果，只需要為標(biāo)記添加如下代碼：.datalisttr:hover{background-color:#c4e4ff;/*動(dòng)態(tài)變色*/}以上代碼直接調(diào)用標(biāo)記的偽類別hover來實(shí)現(xiàn)變色效果，但I(xiàn)E瀏覽器并不支持，因此必須采用JavaScript的配合。實(shí)例：11-5.html2.3練習(xí)——表格課表根據(jù)這學(xué)期的課程安排，利用CSS表格樣式設(shè)計(jì)一個(gè)自己的課表（周課表）：1.表格居中，有邊框和標(biāo)題，標(biāo)題左對(duì)齊2.單元格有邊框，邊框之間沒有空隙。3.不同課程的單元格文字字體、顏

4、色和背景色不同4.注重顏色搭配和頁面美觀2.3課后練習(xí)——表格日歷通過CSS設(shè)定表格的屬性，實(shí)現(xiàn)日歷效果。3.用CSS設(shè)置表單樣式3.1設(shè)置表單基本樣式利用CSS對(duì)標(biāo)記的控制，同樣可以對(duì)表單添加簡單的樣式風(fēng)格，包括邊框、背景色、高度、寬度等，設(shè)置方法跟前面的相同。實(shí)例：11-6.html仔細(xì)觀察會(huì)發(fā)現(xiàn)單選項(xiàng)和復(fù)選框?qū)τ谶吙虻娘@示效果，在IE和Firefox瀏覽器中有明顯的區(qū)別。解決辦法是分別給具體的各項(xiàng)添加類別屬性，進(jìn)行單獨(dú)的設(shè)置。這種方法在實(shí)際設(shè)計(jì)中經(jīng)常使用。實(shí)例11-7.html4.CSS表單實(shí)例4.1像文字一樣的按鈕通過CSS設(shè)置，可以將按鈕變得跟普通文字一樣。關(guān)鍵在于將按鈕的背

5、景色設(shè)置為透明“transparent”，這樣無論頁面body的背景色如何修改，按鈕的背景色都會(huì)發(fā)生相應(yīng)的變化。最后再單獨(dú)設(shè)置輸入框和按鈕的邊框效果即可。實(shí)例：11-8.html4.2七彩的下拉菜單CSS不僅可以控制下拉菜單的整體字體和邊框等，對(duì)于下拉菜單中的每一個(gè)選項(xiàng)同樣可以設(shè)置背景色和文字顏色。例如，當(dāng)需要在下拉菜單中選擇相應(yīng)的顏色時(shí)，有這種設(shè)置就顯得非常方便。關(guān)鍵的方法是給下拉菜單的每一個(gè)標(biāo)記都設(shè)置單獨(dú)的文字顏色和背景顏色。實(shí)例：11-9.html4.3練習(xí)——直接輸入的excel表格ftp課堂練習(xí)下載模擬excel表格，結(jié)合CSS控制的表格和表單，實(shí)現(xiàn)類似exc

6、el表格的效果，每個(gè)單元格中可以直接輸入內(nèi)容，最后一并提交。透明按鈕