在網頁設計中,表單填寫頁是非常常見的一種頁面。為了讓表單填寫更加美觀、易用,我們可以利用CSS樣式來對表單進行美化。
/* 表單整體樣式 */ form { display: block; margin: 0 auto; width: 500px; background-color: #F8F8F8; padding: 20px; border: 1px solid #CCC; } /* 表單元素樣式 */ form input[type=text], form input[type=password], form select, form textarea { width: 100%; padding: 10px; border: 1px solid #DDD; border-radius: 3px; margin-bottom: 10px; font-size: 14px; } /* 表單提交按鈕樣式 */ form input[type=submit] { background-color: #008CBA; color: #FFF; padding: 10px; border: 0; border-radius: 3px; cursor: pointer; font-size: 16px; font-weight: bold; } /* 表單標題樣式 */ form h2 { margin-top: 0; font-size: 28px; font-weight: normal; color: #333; } /* 表單標簽樣式 */ form label { display: block; margin-bottom: 5px; font-size: 16px; font-weight: bold; color: #333; }
通過以上CSS樣式定義,表單元素將會變得更加美觀易用,同時也能減少用戶入手門檻,提升用戶體驗。