CSS表單樣式一直是網頁設計中的重點,其中表單留言樣式更是需要被重視的一部分。為了讓頁面更美觀與易用,我們需要運用一些CSS代碼來優化表單留言的樣式。
/*表單留言樣式*/ .form { width: 100%; max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; font-size: 16px; } .form h2 { font-size: 28px; font-weight: bold; text-align: center; margin-top: 30px; } .form input[type="text"], .form textarea { width: 100%; padding: 16px; border-radius: 5px; border: none; margin: 10px 0; box-sizing: border-box; resize: none; outline: none; } .form input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 16px 32px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color .3s; } .form input[type="submit"]:hover { background-color: #2E8B57; } .form label { display: block; margin-bottom: 10px; font-weight: bold; } .form textarea { height: 200px; }
在上述CSS代碼中,我們首先設置表單的整體樣式,包括寬度、居中、字體與字號等;其次,我們針對表單的輸入框、提交按鈕、以及留言標簽等分別設定了樣式,實現了輸入框與按鈕的圓角化、邊框顏色去除、自適應寬度等;最后,我們還可以通過設置:hover偽類,使得按鈕在鼠標懸浮時的背景色發生變化,從而提高用戶體驗。