評論是網頁中非常重要的功能之一,它可以讓用戶與網站進行交互,分享自己的看法和經驗。而實現評論功能的關鍵之一就是CSS樣式的設計。下面我們來看一下如何使用CSS實現發表評論功能。
.comment-form { display: flex; flex-direction: column; } .comment-form input[type=text], .comment-form textarea { padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; } .comment-form label { font-weight: bold; margin-bottom: 5px; } .comment-form input[type=submit] { background-color: #428bca; color: #fff; padding: 10px 20px; border-radius: 5px; border: none; } .comment-form input[type=submit]:hover { background-color: #3071a9; cursor: pointer; }
在上述代碼中,我們首先創建了一個評論表單的樣式,通過flex布局實現了表單內元素的垂直排列。然后設置了input和textarea元素的padding、margin、邊框和圓角效果,讓表單看起來更加美觀。在label元素中,我們通過font-weight屬性設置了文本的粗細程度。
在最后兩行代碼中,我們設置了提交按鈕的背景色為#428bca,文字顏色為白色。同時,我們還設置了按鈕的padding、邊緣半徑和邊框,讓按鈕看起來更加立體。當鼠標懸停在按鈕上時,背景色會變為#3071a9,鼠標指針會變成手型,提示用戶可以點擊該按鈕。
通過以上樣式設計,我們可以讓評論表單看起來更加優美,增加用戶的使用體驗。當然,還有很多其他的設計元素可以加入到評論表單中,比如表單驗證、字數限制等等。
上一篇mysql三個表如何查詢
下一篇mysql三個條件的查詢