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

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

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

設置單元素交互效果任務分析圖1-18-1D清單網頁表單交互效果分析圖

設置單元素交互效果知識與技能準備表單中默認的文本框是長方形的，比較死板；錄入的文字和文本框邊緣的距離較近，顯得比較擁擠。如圖1-18-2所示。美化文本框一般可以采用設置邊框內邊距、添加圓角邊框效果、設置焦點改變邊框顏色等方式來進行美化。邊框的內邊距padding設置主要是為了讓錄入的文字和文本框邊框的距離留有一定空間，讓瀏覽的效果更好，具體的設置可以參考的內容。圓角邊框效果主要是讓邊框的四個角有個弧度，提高美感，具體的設置可以參考的內容。焦點的觸發狀態可以通過偽類“:focus”對標簽進行設置，類似于偽類。1、美化文本框表1-17-1transition-property屬性值課堂練習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;/*觸發表單焦點狀態*/outline:none;}顯示效果如圖1-18-3和1.18-4所示。圖1-18-3文本框美化效果圖1-18-4文本框觸發焦點狀態效果知識與技能準備表單中默認的按鈕也是長方形的，比較死板；錄入的文字和文本框邊緣的距離較近，顯得比較擁擠。如圖1-18-5所示。美化按鈕一般可以采用設置邊框內邊距、添加圓角邊框效果、背景顏色、鼠標經過時效果等方式來進行美化。2、美化按鈕圖1-18-5默認的按鈕課堂練習1-18-2美化文本框效果顯示效果如圖1-18-6所示：圖1-18-6美化后的按鈕課堂練習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);}知識與技能準備默認狀態下，表單文本框錄入的文字和按鈕的文字是以文字底端對齊的方式，但這種對齊方式對表單的瀏覽效果不好。如圖1-18-7所示。這個時候，我們可以使用vertical-align屬性來設置元素的垂直對齊方式。該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。3、表單控件的對齊方式圖1-18-7默認表單控件的對齊方式語法：vertical-align:取值;知識與技能準備3、表單控件的對齊方式表1-18-1vertical-align課堂練習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; /*左側圓角-左上和左下*

}/*實際高度40+5+5=50px*/.a2{width:80px;height:50px;vertical-align:bottom;border:none; border-radius:010px10px0; /*右側圓角-右上和右下*/background:#55aaff;font:20px黑體;color:#fff;}課堂練習1-18-3制作查詢功能表單顯示效果如圖1-18-8所示。圖1-18-8制作查詢功能表單任務實施為“給我留言”模塊添加表單效果。當鼠標點擊表單控件時，觸發表單焦點狀態，此時控件的邊框顏色會出現變化。參考代碼請參照書本。在表單的交互效果設置中，為讓表單顯示的效果更好，可以采用圓角邊框對表單控件進行設置，同時設置表單焦點狀態以及排版布局。效果如圖1-18-9所示。圖1-18-9給我留言效果圖