当前位置：首页 > CSS

css制作留言

2026-02-12 23:36:48CSS

基础留言板布局

使用CSS创建一个简单的留言板容器，设置宽度、背景色和边框：

.message-board {
  width: 80%;
  max-width: 600px;
  margin: 20px auto;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

留言样式设计

为单个留言设置样式，包含用户头像和内容区域：

css制作留言

.message {
  display: flex;
  margin-bottom: 15px;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: #e0e0e0;
}

.message-content {
  flex: 1;
}

.username {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.text {
  color: #555;
  line-height: 1.4;
}

.time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

输入框样式

设计留言输入区域的样式：

.message-input {
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  min-height: 80px;
}

.submit-btn {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.submit-btn:hover {
  background-color: #45a049;
}

响应式设计

添加媒体查询确保在小屏幕上正常显示：

css制作留言

@media (max-width: 480px) {
  .message-board {
    width: 95%;
    padding: 10px;
  }

  .message {
    flex-direction: column;
  }

  .avatar {
    margin-bottom: 8px;
  }
}

动画效果

为留言添加简单的出现动画：

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message {
  animation: fadeIn 0.3s ease-out;
}

完整HTML结构示例

配合上述CSS的HTML结构参考：

<div class="message-board">
  <div class="message">
    <div class="avatar"></div>
    <div class="message-content">
      <div class="username">用户1</div>
      <div class="text">这是一条示例留言内容</div>
      <div class="time">10分钟前</div>
    </div>
  </div>

  <textarea class="message-input" placeholder="写下你的留言..."></textarea>
  <button class="submit-btn">提交</button>
</div>