css中怎样制作小型留言板

在现代网页设计中，一个小巧精致的留言板非常重要。利用CSS，我们可以很容易地制作出一个小型留言板，让用户能够轻松快捷地发表意见和建议。
首先，我们需要定义一个最外层的容器div，命名为“message-board”，然后设置一些基本样式，例如宽度、边框、背景色和内边距等。这是设置留言板整体外观的基础。

.message-board {
  width: 600px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  padding: 20px;
} 

然后，我们可以开始设计留言板中的每一条留言了。每一条留言都需要一个容器，我们可以用div标签来实现。在留言容器内，我们可以放置头像、用户名、留言内容和发布时间等信息。可以在样式表中定义不同的类名，以便单独设置不同的样式。

.message {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.avatar {
  float: left;
  margin-right: 10px;
}

.username {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.content {
  margin-top: 10px;
  color: #666;
}

.time {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  text-align: right;
} 

接着，我们就可以在HTML代码中添加留言内容了。为了方便，可以在后台数据库中读取留言信息，并使用循环语句来输出每一条留言的内容。

<div class="message-board">
  <div class="message">
    <img src="avatar.jpg" class="avatar">
    <div>
      <div class="username">用户A</div>
      <div class="content">这里是留言内容</div>
      <div class="time">2022/11/11 11:11:11</div>
    </div>
  </div>
  
  <div class="message">
    <img src="avatar.jpg" class="avatar">
    <div>
      <div class="username">用户B</div>
      <div class="content">这里是留言内容</div>
      <div class="time">2022/11/11 11:11:11</div>
    </div>
  </div>
  
  <!-- 此处省略若干留言 -->
</div> 

最后，对于留言板中的输入框和按钮，我们可以使用与上面类似的方法进行设计和布局。使用CSS，我们可以很轻松地控制按钮样式、调整输入框大小和位置等。
总结一下，制作一个小型留言板非常简单，只需要定义好外层容器、每个留言的样式，添加相关内容即可，同时也可以使用CSS对布局和样式进行调整和优化，让留言板看上去更加美观和易用。