在現代網站設計中,用戶意見反饋是非常重要的環節。為了提升用戶體驗,開發者們需要為網站添加一個干凈、明顯的意見反饋樣式,使用戶能夠方便地找到并提交反饋信息。
.feedback-form { width: 400px; margin: 0 auto; } .feedback-form label { display: block; margin-bottom: 10px; font-weight: bold; color: #333; } .feedback-form input[type="text"], .feedback-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; background-color: #f5f5f5; color: #333; font-size: 14px; margin-bottom: 15px; } .feedback-form textarea { height: 150px; } .feedback-form input[type="submit"] { background-color: #007bff; color: #fff; border: none; padding: 10px 15px; font-size: 16px; border-radius: 5px; cursor: pointer; } .feedback-form input[type="submit"]:hover { background-color: #0069d9; }
以上是一個簡單的意見反饋表單樣式。容易注意到,樣式是基于通用元素和類名設計的,而表單元素本身并沒有什么特別之處。這是一個好的實踐,因為這樣可以讓表單在不同的頁面和布局中重復使用,無需進行大范圍的修改。
在這個樣式中,我們使用了標準的form元素,并為其添加了.feedback-form的類名。接下來,我們為表單中的每個輸入元素添加了一些樣式。它們的寬度被設置為100%,顏色為#333,背景色為#f5f5f5,邊框為1像素的灰色邊框,通用文本字體,14像素的字體大小。此外,為了突出表單的提交按鈕,我們添加了一些額外的樣式。按鈕的背景色為藍色,懸停時深藍色。
最后,這個樣式極易被自定義,以符合不同的網站主題。調整字體顏色、背景色、邊框、按鈕大小、圓角或漸變,都可以非常方便地實現。