意見反饋框是現代web應用程序中的常見功能。用戶可以在此處提供對應用程序的反饋,同時產品團隊可以通過這些反饋改進產品。本文將介紹如何使用CSS來創建一個簡單的意見反饋框。
首先,我們需要創建一個HTML表單,包含用戶反饋的輸入框和提交按鈕。以下是示例代碼:
<form action="#" method="post"> <label for="feedback">請輸入您的反饋:</label> <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea> <button type="submit">提交反饋</button> </form>
接下來,我們需要使用CSS來美化我們的反饋框。首先,我們可以設置輸入框的樣式:
textarea { display: block; width: 100%; padding: 10px; border: solid 1px #ccc; border-radius: 3px; resize: none; }
上面這個CSS規則設置了輸入框的一些基本樣式,例如寬度、內邊距、邊框以及圓角等。
我們還可以使用CSS修改提交按鈕的樣式:
button { display: inline-block; margin-top: 10px; padding: 10px 20px; background-color: #3498db; border: none; color: #fff; border-radius: 3px; cursor: pointer; }
上面這個CSS規則使提交按鈕看起來與輸入框相似,同時設置了一些樣式屬性,例如背景顏色、邊框、顏色以及圓角等。
最后,我們可以為表單添加額外的樣式:
form { max-width: 600px; margin: 0 auto; }
上面這個CSS規則將表單的最大寬度設置為600px,并將其水平居中放置在頁面上。
通過上述CSS規則,我們可以為我們的意見反饋框添加基本的樣式。我們還可以添加其他的樣式,例如提示信息、錯誤信息等。通過CSS,我們可以通過添加簡單的樣式規則使意見反饋框看起來更加專業和現代。