当前位置：首页 > CSS

css制作留言

2026-01-28 05:11:51CSS

制作留言框的基本CSS样式

留言框通常需要一个容器、输入框和提交按钮。以下是一个基础留言框的CSS样式：

.message-container {
  width: 400px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.message-submit {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

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

留言列表样式

显示已提交留言的样式可以这样设计：

css制作留言

.message-list {
  margin-top: 30px;
}

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

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

.message-content {
  color: #666;
  line-height: 1.5;
}

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

响应式设计

为了让留言框在不同设备上都能良好显示，可以添加媒体查询：

css制作留言

@media (max-width: 600px) {
  .message-container {
    width: 90%;
    padding: 15px;
  }

  .message-input {
    min-height: 80px;
  }
}

动画效果

添加简单的过渡效果增强用户体验：

.message-item {
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.message-item.show {
  opacity: 1;
  transform: translateY(0);
}

.message-submit {
  transition: background-color 0.3s;
}

完整的HTML结构示例

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

<div class="message-list">
  <div class="message-item show">
    <div class="message-author">张三</div>
    <div class="message-content">这是一个测试留言内容。</div>
    <div class="message-time">2023-05-15 14:30</div>
  </div>
</div>

高级样式技巧

使用CSS变量便于主题定制：

:root {
  --primary-color: #4CAF50;
  --secondary-color: #f5f5f5;
  --text-color: #333;
  --border-radius: 4px;
}

.message-container {
  background-color: var(--secondary-color);
}

.message-submit {
  background-color: var(--primary-color);
}

这些CSS样式可以创建一个美观且功能完整的留言系统，根据实际需求可以进一步调整颜色、间距和动画效果。