在網站中,留言板是很重要的交流工具。制作一個美觀且易用的留言板需要用到CSS樣式表。
CSS可以控制留言板的樣式,使其更加美觀。例如,可以設置留言板的背景顏色、字體類型、字體大小、邊框等等。
以下是一個基本的CSS留言板樣式:
.message-board { background-color: #f2f2f2; padding: 20px; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px; } .message { padding: 10px; margin: 10px 0; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 2px #ccc; } .message h4 { margin-top: 0; } .message p { margin-bottom: 0; } .message form { display: flex; flex-direction: column; } .message form label { margin: 10px 0; } .message form label input { width: 100%; padding: 5px; border: 1px solid #ccc; }
使用以上樣式,留言板將具有以下功能:
- 留言板具有灰色的背景色、帶有邊框的白色留言區域。
- 每條留言具有10像素的上下邊距,留言之間相隔10像素。
- 每條留言包括一個標題和正文,標題具有14像素的字體,正文具有12像素的字體。
- 留言表單具有灰色的背景色、白色的邊框和陰影。表單具有一個標題和一些輸入字段,所有的字段都有10像素的邊距。
通過CSS樣式,可以輕松展示留言板,并且讓用戶有更好的體驗。