設(shè)置CSS表格與CSS表單的樣式
本文和大家重點(diǎn)討論一下如何設(shè)置CSS表格與CSS表單的樣式，CSS表單作為與用戶交互的窗口，時(shí)刻都扮演著信息獲取和反饋的角色。這里圍繞CSS表格和表單介紹CSS設(shè)置其樣式的方法，以及利用CSS實(shí)現(xiàn)各種特效的技巧。
設(shè)置CSS表格與CSS表單的樣式
CSS表格與表單是網(wǎng)頁(yè)上最常見(jiàn)的元素，表格除了顯示數(shù)據(jù)外，還常常被用來(lái)排版。而CSS表單則作為與用戶交互的窗口，時(shí)刻都扮演著信息獲取和反饋的角色。本課圍繞表格和表單介紹CSS設(shè)置其樣式的方法，以及利用CSS實(shí)現(xiàn)各種特效的技巧。
1.控制表格
CSS表格作為傳統(tǒng)的HTML元素，一直受到網(wǎng)頁(yè)設(shè)計(jì)者們的青睞。使用CSS表格來(lái)表示數(shù)據(jù)、制作調(diào)查表等在網(wǎng)絡(luò)中屢見(jiàn)不鮮。同時(shí)因?yàn)镃SS表格框架的簡(jiǎn)單、明了，使用沒(méi)有邊框的表格來(lái)排版，也受到很多設(shè)計(jì)者的喜愛(ài)。我們?cè)谶@里主要介紹CSS控制表格的方法，包括表格的顏色、標(biāo)題、邊框、背景等。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：
表格中的標(biāo)記
表格的顏色
表格的邊框
2.CSS表格實(shí)例一：隔行變色
當(dāng)表格的行列都很多、數(shù)據(jù)量很大的時(shí)候，單元格如果采用相同的背景色，用戶在實(shí)際使用時(shí)會(huì)感到凌亂。通常的解決辦法就是采用隔行變色，使得奇數(shù)行和偶數(shù)行的背景顏色不一樣，達(dá)到數(shù)據(jù)一目了然的目的。本例最終效果如圖所示。
3.CSS表格實(shí)例二：鼠標(biāo)經(jīng)過(guò)時(shí)變色的表格
對(duì)于長(zhǎng)時(shí)間審核大量數(shù)據(jù)、瀏覽表格的用戶來(lái)說(shuō)，即使是隔行變色的表格，閱讀時(shí)間長(zhǎng)了仍然會(huì)感到疲勞。如果數(shù)據(jù)行能夠動(dòng)態(tài)的根據(jù)鼠標(biāo)來(lái)變色，就使得頁(yè)面充滿了生機(jī)，最大程度的減少用戶疲倦。
4.CSS表格實(shí)例三：日歷
日歷是日常生活中必不可少的東西，而作為備忘錄的日歷在桌面、網(wǎng)絡(luò)上都越來(lái)越流行。通過(guò)CSS設(shè)定表格的屬性，可以很輕松的實(shí)現(xiàn)各種日歷的效果。我們?cè)谶@里通過(guò)簡(jiǎn)單的實(shí)例，進(jìn)一步熟練CSS控制表格的各種方法。本例最終效果如圖所示。
5.CSS表單
CSS表單是網(wǎng)頁(yè)與用戶交互所不可缺少的元素，傳統(tǒng)的HTML中對(duì)表單元素的樣式控制很少，僅僅局限于功能上的實(shí)現(xiàn)。我們?cè)谶@里圍繞CSS控制表單進(jìn)行詳細(xì)介紹，包括表單中各個(gè)元素的控制，與表格配合制作各種效果等等。希望大家能夠掌握以下幾個(gè)方面的內(nèi)容：
CSS表單中的元素
像文字一樣的按鈕
七彩的下拉菜單
6.綜合實(shí)例一：直接輸入的Excel表格
作為公司、單位的各種年度報(bào)表，往往數(shù)據(jù)量都很大，如果也都像普通表單一樣逐項(xiàng)填寫(xiě)，勢(shì)必造成網(wǎng)頁(yè)的冗長(zhǎng)。而Excel表格在本地機(jī)器操作時(shí)一直廣受好評(píng)，通過(guò)CSS控制，結(jié)合CSS表格和CSS表單，便能輕松實(shí)現(xiàn)類似的效果，如圖所示。
7.綜合實(shí)例二：模仿新浪網(wǎng)民調(diào)查問(wèn)卷
門(mén)戶網(wǎng)站上的新聞、事實(shí)往往都伴隨著各種各樣的調(diào)查問(wèn)卷，包括事實(shí)的評(píng)論、輿論的反饋、事態(tài)的預(yù)測(cè)等等。這些調(diào)查問(wèn)卷都離不開(kāi)表格與表單的配合使用。本例通過(guò)簡(jiǎn)單的模擬新浪的調(diào)查問(wèn)卷，進(jìn)一步熟練CSS控制表格、表單的方法。
這個(gè)圖是新浪網(wǎng)上關(guān)于姚明的熱點(diǎn)調(diào)查，本例通過(guò)簡(jiǎn)單的CSS表格、表單的配合，模擬該調(diào)查問(wèn)卷的效果。
【編輯推薦】
- 專家推薦 DIV CSS表單布局的五個(gè)小技巧
- 暢談DIV排版和table排版的區(qū)別
- 14大CSS工具提高網(wǎng)頁(yè)設(shè)計(jì)效率
- DIV CSS表單布局的幾種技巧
- 鼠標(biāo)經(jīng)過(guò)時(shí)改變DIV背景顏色的三種途徑
