HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：設(shè)置單元素交互效果

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作設(shè)置單元素交互效果能夠敘述通過CSS樣式美化表單的方法。能夠根據(jù)需要對vertical-align屬性的不同取值進(jìn)行設(shè)置。能夠綜合運(yùn)用CSS樣式對D清單頁面的表單元素進(jìn)行美化。任務(wù)目標(biāo)

設(shè)置單元素交互效果本次任務(wù)要求根據(jù)D清單頁面效果圖，使用CSS樣式，在基礎(chǔ)上設(shè)置表單交互效果。完成后的效果圖如圖1-18所示。任務(wù)描述圖1-18設(shè)置表單交互效果后的網(wǎng)頁效果圖

設(shè)置單元素交互效果使用表單的目的除了收集用戶信息外，更多的是為了提供更好的服務(wù)體驗(yàn)。在網(wǎng)頁設(shè)計(jì)中，不僅需要設(shè)置所需表單的相關(guān)功能，還需要讓表單控件更加美觀，讓用戶在使用表單時(shí)有一個(gè)愉快的體驗(yàn)。要D清單頁面表單元素交互效果，需要：學(xué)習(xí)表單焦點(diǎn)獲取效果等內(nèi)容；分析D清單頁面中的表單交互效果，使用CSS樣式美化D清單網(wǎng)頁表單元素。D清單頁面表單交互效果分析如圖1-18-1所示。任務(wù)分析

設(shè)置單元素交互效果任務(wù)分析圖1-18-1D清單網(wǎng)頁表單交互效果分析圖

設(shè)置單元素交互效果知識(shí)與技能準(zhǔn)備表單中默認(rèn)的文本框是長方形的，比較死板；錄入的文字和文本框邊緣的距離較近，顯得比較擁擠。如圖1-18-2所示。美化文本框一般可以采用設(shè)置邊框內(nèi)邊距、添加圓角邊框效果、設(shè)置焦點(diǎn)改變邊框顏色等方式來進(jìn)行美化。邊框的內(nèi)邊距padding設(shè)置主要是為了讓錄入的文字和文本框邊框的距離留有一定空間，讓瀏覽的效果更好，具體的設(shè)置可以參考的內(nèi)容。圓角邊框效果主要是讓邊框的四個(gè)角有個(gè)弧度，提高美感，具體的設(shè)置可以參考的內(nèi)容。焦點(diǎn)的觸發(fā)狀態(tài)可以通過偽類“:focus”對標(biāo)簽進(jìn)行設(shè)置，類似于偽類。1、美化文本框表1-17-1transition-property屬性值課堂練習(xí)1-18-1美化文本框效果HTML代碼：CSS代碼：123486<form><inputtype="text"name="name"size="20"maxlength="4"autocomplete="off"placeholder="請輸入姓名"class="a1"></form>1234567.a1{padding:10px;border:solid1px#000;border-radius:3px;;}input:focus{border:solid1px#00ff00;/*觸發(fā)表單焦點(diǎn)狀態(tài)*/outline:none;}顯示效果如圖1-18-3和1.18-4所示。圖1-18-3文本框美化效果圖1-18-4文本框觸發(fā)焦點(diǎn)狀態(tài)效果知識(shí)與技能準(zhǔn)備表單中默認(rèn)的按鈕也是長方形的，比較死板；錄入的文字和文本框邊緣的距離較近，顯得比較擁擠。如圖1-18-5所示。美化按鈕一般可以采用設(shè)置邊框內(nèi)邊距、添加圓角邊框效果、背景顏色、鼠標(biāo)經(jīng)過時(shí)效果等方式來進(jìn)行美化。2、美化按鈕圖1-18-5默認(rèn)的按鈕課堂練習(xí)1-18-2美化文本框效果顯示效果如圖1-18-6所示：圖1-18-6美化后的按鈕課堂練習(xí)1-18-2美化文本框效果HTML代碼：CSS代碼：12345<form><div><inputtype="submit"value="確定"name="submit"class="a2"></div></form>123456789input{color:#fff;font-family:"楷體";}.a2{width:80px;padding:10px;border:none;border-radius:18px;background:linear-gradient(45deg,#f00,#ff0);}.a2:hover{background:linear-gradient(45deg,#ff0,#00FF00);}知識(shí)與技能準(zhǔn)備默認(rèn)狀態(tài)下，表單文本框錄入的文字和按鈕的文字是以文字底端對齊的方式，但這種對齊方式對表單的瀏覽效果不好。如圖1-18-7所示。這個(gè)時(shí)候，我們可以使用vertical-align屬性來設(shè)置元素的垂直對齊方式。該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。3、表單控件的對齊方式圖1-18-7默認(rèn)表單控件的對齊方式語法：vertical-align:取值;知識(shí)與技能準(zhǔn)備3、表單控件的對齊方式表1-18-1vertical-align課堂練習(xí)1-18-3制作查詢功能表單HTML代碼：1234<form><inputtype="text"class="a1"value="HTML5"><inputtype="submit"class="a2"value="查詢"></form>CSS代碼：123456789101112131415161718.a1{ width:250px;height:40px;padding:0px10px;vertical-align:bottom; /*垂直對齊方式*/border:solid5px#55aaff;border-radius:10px0010px; /*左側(cè)圓角-左上和左下*

}/*實(shí)際高度40+5+5=50px*/.a2{width:80px;height:50px;vertical-align:bottom;border:none; border-radius:010px10px0; /*右側(cè)圓角-右上和右下*/background:#55aaff;font:20px黑體;color:#fff;}課堂練習(xí)1-18-3制作查詢功能表單顯示效果如圖1-18-8所示。圖1-18-8制作查詢功能表單任務(wù)實(shí)施為“給我留言”模塊添加表單效果。當(dāng)鼠標(biāo)點(diǎn)擊表單控件時(shí)，觸發(fā)表單焦點(diǎn)狀態(tài)，此時(shí)控件的邊框顏色會(huì)出現(xiàn)變化。參考代碼請參照書本。在表單的交互效果設(shè)置中，為讓表單顯示的效果更好，可以采用圓角邊框?qū)Ρ韱慰丶M(jìn)行設(shè)置，同時(shí)設(shè)置表單焦點(diǎn)狀態(tài)以及排版布局。效果如圖1-18-9所示。圖1-18-9給我留言效果圖