留言板是一個網站必不可少的交互功能，而CSS能夠為留言板增加不少美觀度和易用性。本文將介紹如何使用CSS來自定義留言板的樣式。 首先需要明確留言板的基本結構。一個最簡單的留言板通常包含一個表單和一個展示區。表單用于輸入留言，展示區則用于展示已有的留言。

<form>
<input type="text" name="username" placeholder="請輸入用戶名">
<textarea name="message" placeholder="請輸入留言"></textarea>
<button type="submit">提交留言</button>
</form>
<div class="message-board">
<h2>留言板</h2>
<ul class="message-list">
<li class="message-item">
<p class="username">用戶名</p>
<p class="message">留言內容</p>
</li>
<li class="message-item">
<p class="username">用戶名</p>
<p class="message">留言內容</p>
</li>
<!-- more messages -->
</ul>
</div>

接下來，我們可以使用CSS為留言板添加樣式，比如調整字體大小和顏色，改變背景顏色等等。以下是一個基本的CSS樣式：

/* 調整表單樣式 */
form input[type="text"], form textarea {
font-size: 16px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 16px;
width: 100%;
}
form button[type="submit"] {
font-size: 16px;
padding: 8px 16px;
background-color: #4285f4;
color: #fff;
border: none;
border-radius: 6px;
}
/* 調整留言展示區樣式 */
.message-board {
background-color: #f5f5f5;
padding: 16px;
border: 1px solid #ccc;
border-radius: 6px;
}
.message-board h2 {
font-size: 24px;
margin-bottom: 16px;
}
.message-list {
list-style: none;
padding: 0;
margin: 0;
}
.message-item {
background-color: #fff;
padding: 16px;
border-bottom: 1px solid #ccc;
}
.username {
font-weight: bold;
margin-bottom: 8px;
}
.message {
font-size: 16px;
line-height: 1.2;
}

以上CSS樣式會為表單和展示區分別添加一些樣式，比如設置字體大小、背景顏色、邊框、圓角等等?？梢愿鶕约旱南埠谜{整留言板的樣式。 最后，需要注意的一點是，為了實現響應式設計，我們應該為留言板添加一些媒體查詢規則，以便在不同設備上都能夠正確地展示和使用留言板。 總之，CSS可以為留言板增加不同的樣式和布局，讓我們的網站更加美觀和易用。希望這篇文章能對你的樣式設計有所啟發。