留言板是一个网站必不可少的交互功能，而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可以为留言板增加不同的样式和布局，让我们的网站更加美观和易用。希望这篇文章能对你的样式设计有所启发。