任務(wù)8

設(shè)計“在線留言”子頁面任務(wù)本任務(wù)通過設(shè)計“學(xué)習(xí)黨的二十大精神專題網(wǎng)”的“在線留言”子頁面，重點學(xué)習(xí)表單元素的CSS樣式設(shè)置。同時，進一步學(xué)習(xí)貫徹黨的二十大精神知識。網(wǎng)頁效果如圖8-1所示。任務(wù)8設(shè)計“在線留言”子頁面任務(wù)圖8-1任務(wù)8設(shè)計“在線留言”子頁面知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)（1）掌握設(shè)置表單樣式的常用方法。（2）掌握設(shè)置輸入框、文本域、下拉菜單、按鈕等表單元素的樣式。（3）掌握屬性選擇器的用法。（1）能夠使用CSS對表單進行美化。（2）能夠使用CSS對表單邊框、表單元素外觀。（3）能夠使用屬性選擇器對不同類型輸入元素的CSS樣式設(shè)置。（1）掌握并遵循Web開發(fā)標(biāo)準(zhǔn)。（2）培養(yǎng)分析和解決問題的能力。（3）培養(yǎng)自學(xué)能力。表單相關(guān)的CSS樣式任務(wù)實現(xiàn)1.表單相關(guān)的CSS樣式1.1輸入框的樣式1.2文本域的樣式1.3按鈕樣式1.4下拉菜單的樣式

任務(wù)8設(shè)計“在線留言”子頁面1.1輸入框的樣式在谷歌瀏覽器中，默認(rèn)的表單輸入框是一個黑框，單擊時顯示一個更粗的黑框，表單元素輸入框默認(rèn)樣式是2像素寬的邊框和2像素左右內(nèi)邊距和1像素上下內(nèi)邊距。然而在不同的瀏覽器中輸入框默認(rèn)樣式會有差異。為了實現(xiàn)效果統(tǒng)一，最好是自定義輸入框的樣式。

1.屬性選擇器的用法

屬性選擇器在為不帶有class或id的表單設(shè)置樣式時特別有用，使用這個選擇器可以使表單輸入框樣式具有更強的靈活度和適應(yīng)性。如果只想設(shè)置特定輸入類型的樣式，則可以使用屬性選擇器。例如，input[type=text]將選擇文本輸入框，input[type=password]將選擇密碼的輸入框，input[type=number]將選擇數(shù)字的輸入框。

1.表單相關(guān)的CSS樣式1.1輸入框的樣式

2.輸入框的寬度、邊框、填充、顏色可以使用width屬性設(shè)置輸入框的寬度，使用padding屬性設(shè)置輸入框中內(nèi)邊距，使用border屬性設(shè)置輸入框邊框的大小、線型和顏色，使用border-radius屬性給輸入框添加圓角，使用background-color屬性設(shè)置輸入框的背景顏色，使用color屬性設(shè)置文本顏色。1.表單相關(guān)的CSS樣式1.1輸入框的樣式

1.表單相關(guān)的CSS樣式3.獲得焦點的輸入框默認(rèn)情況下，某些瀏覽器在獲得焦點（單擊）時會在輸入框周圍添加藍色輪廓。為了清除此默認(rèn)樣式，可以添加outline:none。outline是輪廓屬性，一般來說，預(yù)期之外的邊框大多數(shù)是它造成的。使用:focus選擇器可以在輸入字段獲得焦點時為其設(shè)置樣式。1.2文本域的樣式

1.表單相關(guān)的CSS樣式使用resize屬性可以禁止文本域textareas調(diào)整大?。ń糜蚁陆堑?抓取器"），文本域的寬度、邊框、填充、顏色樣式的設(shè)置與輸入框用法一致。1.3按鈕樣式

1.表單相關(guān)的CSS樣式設(shè)置按鈕的基本樣式，用常用的屬性就可以。邊框樣式和文本框的邊框設(shè)置一樣，使用border屬性，更改默認(rèn)的邊框樣式，使用outline屬性，更改默認(rèn)輪廓樣式。其它的還可以通過偽類屬性，設(shè)置點擊時的樣式使用:active，聚焦時的樣式使用:focus等等。1.4下拉菜單的樣式

1.表單相關(guān)的CSS樣式下拉框select的基本樣式與輸入框、按鈕一樣，使用常用的屬性就可以。邊框仍然采用border加outline屬性來設(shè)置。使用text-align-last屬性，可以控制下拉框里的文字居中，使用appearance屬性，可以隱藏下拉箭頭。對于option元素，只能設(shè)置一般的字體文本樣式，只有字體文本樣式才會生效，無法設(shè)置位置樣式、懸浮樣式，背景顏色無法透明，透明時默認(rèn)白色?？梢岳眯袃?nèi)樣式使用size屬性和multiple兩個屬性。表單相關(guān)的CSS樣式任務(wù)實現(xiàn)任務(wù)8設(shè)計“在線留言”子頁面2.任務(wù)實現(xiàn)任務(wù)8設(shè)計“在線留言”子頁面任務(wù)8設(shè)計“在線留言”子頁面本任務(wù)是在任務(wù)5HTML結(jié)構(gòu)的基礎(chǔ)上美化設(shè)計頁面。故省掉了頁面的HTML結(jié)構(gòu)。具體的實施步驟如下。（1）啟動SublimeText，打開項目2任務(wù)5頁面zxly.html。（2）采用內(nèi)部樣式表引入樣式的方法（3）在<style></style>中寫入CSS樣式美化設(shè)計頁面。

：

對比“在線留言”與“在線互動”子頁頁面效果發(fā)現(xiàn)除了中間內(nèi)容不一樣，“banner”、“導(dǎo)航”、“版權(quán)”這三部分部分內(nèi)容及效果一致。參考任務(wù)7這三塊相同部分的HTML與CSS代碼。

：設(shè)置表單的樣式。其中表單是760px寬，內(nèi)邊距為10px，居中顯示的容器；邊框為1px灰色實線的圓角邊框；給表單添加了投影效果。2.1任務(wù)實現(xiàn)2.任務(wù)實現(xiàn)