css怎么制作评论框

2026-02-12 16:34:52CSS

基本评论框结构

使用HTML和CSS创建一个简单的评论框，包含输入区域和提交按钮。HTML部分定义结构，CSS负责样式设计。

<div class="comment-box">
  <textarea placeholder="请输入评论..."></textarea>
  <button>提交</button>
</div>

.comment-box {
  width: 300px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 20px auto;
}
.comment-box textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
.comment-box button {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.comment-box button:hover {
  background-color: #45a049;
}

带用户头像的评论框

在评论框中加入用户头像和用户名，增强用户体验。

css怎么制作评论框

<div class="comment-box">
  <div class="user-info">
    <img src="avatar.jpg" alt="用户头像">
    <span>用户名</span>
  </div>
  <textarea placeholder="请输入评论..."></textarea>
  <button>提交</button>
</div>

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.user-info span {
  font-weight: bold;
}

响应式评论框

使用媒体查询确保评论框在不同设备上都能正常显示。

css怎么制作评论框

.comment-box {
  max-width: 600px;
  margin: 20px auto;
}

@media (max-width: 768px) {
  .comment-box {
    width: 90%;
    padding: 10px;
  }
  .comment-box textarea {
    height: 80px;
  }
}

带表情符号的评论框

添加表情符号选择功能，丰富评论体验。

<div class="comment-box">
  <textarea placeholder="请输入评论..."></textarea>
  <div class="emoji-picker">😊 😄 😍 😎</div>
  <button>提交</button>
</div>

.emoji-picker {
  margin-bottom: 10px;
}
.emoji-picker span {
  cursor: pointer;
  font-size: 20px;
  margin-right: 5px;
}

多级嵌套评论

实现回复功能，展示评论层级关系。

<div class="comment">
  <div class="comment-content">这是主评论</div>
  <div class="reply">
    <div class="comment-content">这是回复</div>
  </div>
</div>

.comment {
  margin-bottom: 15px;
  padding: 10px;
  border-left: 3px solid #4CAF50;
}
.reply {
  margin-left: 30px;
  margin-top: 10px;
  padding-left: 15px;
  border-left: 2px solid #ccc;
}
.comment-content {
  background: #f9f9f9;
  padding: 8px;
  border-radius: 4px;
}

标签: css