1、CSS設(shè)置表單樣式CSS設(shè)置表單樣式設(shè)置表單樣式主講：毛麗娟CSS設(shè)置表單樣式表單輸入類型表單輸入類型-文本輸入框文本輸入框 語(yǔ)法： 姓名： 主要屬性： name：名稱，程序中常會(huì)用到。 size：設(shè)定此欄位顯示的寬度。 value：預(yù)設(shè)內(nèi)容。 align：對(duì)齊方式。 maxlength：設(shè)定可輸入的最大長(zhǎng)度。CSS設(shè)置表單樣式表單輸入類型表單輸入類型-單選按鈕單選按鈕 語(yǔ)法案例： 男 女 主要屬性： checked name：需要將一組供選擇的單選框設(shè)置為相同的名稱，以保證這一組中只有一個(gè)單選按鈕被選中。CSS設(shè)置表單樣式表單輸入類型表單輸入類型-復(fù)選按鈕復(fù)選按鈕 語(yǔ)法： 興趣： 文學(xué) 音樂(lè)

2、 美術(shù) 主要屬性： checked： name：CSS設(shè)置表單樣式表單輸入類型表單輸入類型-密碼輸入框密碼輸入框 語(yǔ)法： 密碼： 主要屬性： type：值為“password”時(shí)，輸入框內(nèi)顯示為密碼形式。CSS設(shè)置表單樣式表單輸入類型表單輸入類型-按鈕按鈕 語(yǔ)法： 主要屬性： type：設(shè)置為“image”時(shí)，成為圖像按鈕。 value：設(shè)置按鈕上的文字。CSS設(shè)置表單樣式表單輸入類型表單輸入類型-多行文本框多行文本框 語(yǔ)法： 主要屬性： cols：定義多行文本框的寬度（字符列數(shù)）。 rows：定義多行文本框的高度（行數(shù)）。 wrap：定義換行方式，有3種選擇。 off：輸入文字不換行。 vi

3、rtual：輸入文字在屏幕上會(huì)自動(dòng)換行，但是如果訪問(wèn)者沒(méi)有按回車鍵換行，則提交到服務(wù)器也視為沒(méi)有換行。 physical：輸入文字時(shí)會(huì)自動(dòng)換行，提交到服務(wù)器時(shí)，會(huì)將屏幕上的自動(dòng)換行視為換行效果提交。CSS設(shè)置表單樣式表單輸入類型表單輸入類型-列表框列表框1 語(yǔ)法1： Flash Dreamweaver Fireworks Photoshop CSS設(shè)置表單樣式表單輸入類型表單輸入類型-列表框列表框2 語(yǔ)法2：列表形式 Flash Dreamweaver Fireworks Photoshop CSS設(shè)置表單樣式案例案例-css設(shè)置表單樣式設(shè)置表單樣式 設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)如右圖所示CSS設(shè)置表單樣式案

4、例案例-HTML代碼參考代碼參考請(qǐng)輸入您的姓名:請(qǐng)選擇你最喜歡的顏色:紅綠藍(lán)黃青紫請(qǐng)問(wèn)你的性別:男女你喜歡做些什么:看書上網(wǎng)睡覺(jué)我要留言:CSS設(shè)置表單樣式案例案例-css設(shè)置表單樣式設(shè)置表單樣式 利用css樣式實(shí)現(xiàn)右圖風(fēng)格。CSS設(shè)置表單樣式案例案例-css代碼參考代碼參考form border: 1px dotted #AAAAAA;padding: 3px 6px 3px 6px;margin:0px;font:14px Arial;input color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;selec

5、t width: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;textarea width: 200px;height: 40px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;ps：此樣式代碼在：此樣式代碼在IE和和FF中瀏覽有較大的中瀏覽有較大的效果差異。效果差異。CSS設(shè)置表單樣式案例案例-修改瀏覽器差異的修改瀏覽器差異的css formborder: 1px dotted #AAAAAA;paddin

6、g: 1px 6px 1px 6px;margin:0px;font:14px Arial; input/* 所有input標(biāo)記 */color: #00008B; input.txt/* 文本框單獨(dú)設(shè)置 */border: 1px inset #00008B;background-color: #ADD8E6; CSS設(shè)置表單樣式案例案例-修改瀏覽器差異的修改瀏覽器差異的cssinput.btn/* 按鈕單獨(dú)設(shè)置 */color: #00008B;background-color: #ADD8E6;border: 1px outset #00008B;padding: 1px 2px 1px

7、 2px;selectwidth: 80px;color: #00008B;background-color: #ADD8E6;border: 1px solid #00008B;textareawidth: 200px;height: 40px;color: #00008B;background-color: #ADD8E6;border: 1px inset #00008B;CSS設(shè)置表單樣式案例案例-多彩的下拉菜單多彩的下拉菜單 css不僅可以控制下拉菜單的整體字體和邊框格式，還可以進(jìn)一步的對(duì)下拉菜單的每一個(gè)選項(xiàng)設(shè)置各自的背景色和文字顏色。CSS設(shè)置表單樣式案例案例-HTML結(jié)構(gòu)代碼結(jié)構(gòu)代碼請(qǐng)選擇一種顏色 選擇 藍(lán)色紅色綠色黃色青色紫色CSS設(shè)置表單樣式案例案例-”數(shù)獨(dú)數(shù)獨(dú)”游戲網(wǎng)頁(yè)游戲網(wǎng)頁(yè) “數(shù)獨(dú)”是一種益智類的數(shù)字游戲，相傳起源于拉丁方陣。 游戲規(guī)則是：在99的大九宮格中有9個(gè)33的小九宮格,根據(jù)格子里已有的數(shù)字,運(yùn)用邏輯和推理的方法,在其他的空格上填入1到9的數(shù)字,要保證每個(gè)數(shù)字在每個(gè)小九宮格內(nèi)不能重復(fù),同