去创作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>社交平台评论区</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
color: #333;
}
.comment-section {
max-width: 700px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 20px;
}
.comment-header {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.comment-item {
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-user {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #e0e0e0;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #888;
font-size: 14px;
}
.user-info {
display: flex;
align-items: center;
font-size: 14px;
}
.user-name {
font-weight: bold;
margin-right: 8px;
}
.user-location {
color: #666;
margin-right: 10px;
}
.comment-time {
color: #999;
font-size: 12px;
}
.comment-content {
margin: 10px 0;
line-height: 1.5;
font-size: 15px;
}
.comment-actions {
display: flex;
align-items: center;
justify-content: space-between;
}
.reply-btn {
color: #666;
background: none;
border: none;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
}
.like-section {
display: flex;
align-items: center;
color: #666;
font-size: 13px;
}
.like-btn {
background: none;
border: none;
cursor: pointer;
margin-right: 5px;
font-size: 14px;
}
.emoji {
display: inline-block;
margin: 0 2px;
}
</style>
</head>
<body>
<div class="comment-section">
<div class="comment-header">评论区</div>
<div class="comment-list">
<!-- 第一条评论 -->
<div class="comment-item">
<div class="comment-user">
<div class="user-avatar">摘</div>
<div class="user-info">
<span class="user-name">摘下星星送给你</span>
<span class="user-location">江苏</span>
<span class="comment-time">6天前</span>
</div>
</div>
<div class="comment-content">
我都是送给隔壁大妈，省得她到垃圾桶里捡了
</div>
<div class="comment-actions">
<button class="reply-btn">回复</button>
<div class="like-section">
<button class="like-btn">👍</button>
<span>268</span>
</div>
</div>
</div>
<!-- 第二条评论 -->
<div class="comment-item">
<div class="comment-user">
<div class="user-avatar">P</div>
<div class="user-info">
<span class="user-name">Polly</span>
<span class="user-location">广东</span>
<span class="comment-time">6天前</span>
</div>
</div>
<div class="comment-content">
这个好，互惠互利，应该全国推广
</div>
<div class="comment-actions">
<button class="reply-btn">回复</button>
<div class="like-section">
<button class="like-btn">👍</button>
<span>77</span>
</div>
</div>
</div>
<!-- 第三条评论 -->
<div class="comment-item">
<div class="comment-user">
<div class="user-avatar">忘</div>
<div class="user-info">
<span class="user-name">忘仔羊羊</span>
<span class="user-location">广西</span>
<span class="comment-time">6天前</span>
</div>
</div>
<div class="comment-content">
你送给她也不妨碍她继续去别的地方捡的
</div>
<div class="comment-actions">
<button class="reply-btn">回复</button>
<div class="like-section">
<button class="like-btn">👍</button>
<span>24</span>
</div>
</div>
</div>
<!-- 第四条评论 -->
<div class="comment-item">
<div class="comment-user">
<div class="user-avatar">放</div>
<div class="user-info">
<span class="user-name">放弃拥有人…</span>
<span class="user-location">四川</span>
<span class="comment-time">6天前</span>
</div>
</div>
<div class="comment-content">
回复 Polly: 等到哪天你不给大妈或者给大妈导致她受伤了，你就知道厉害了
</div>
<div class="comment-actions">
<button class="reply-btn">回复</button>
<div class="like-section">
<button class="like-btn">👍</button>
<span>20</span>
</div>
</div>
</div>
<!-- 第五条评论 -->
<div class="comment-item">
<div class="comment-user">
<div class="user-avatar">T</div>
<div class="user-info">
<span class="user-name">Titanium</span>
<span class="user-location">广西</span>
<span class="comment-time">6天前</span>
</div>
</div>
<div class="comment-content">
大妈: 最近感觉空气质量不佳
</div>
<div class="comment-actions">
<button class="reply-btn">回复</button>
<div class="like-section">
<button class="like-btn">👍</button>
<span>5</span>
</div>
</div>
</div>
</div>
</div>
<script>
// 简单的点赞功能实现
document.querySelectorAll('.like-btn').forEach(button => {
button.addEventListener('click', function() {
const likeSection = this.parentElement;
const likeCount = likeSection.querySelector('span');
let count = parseInt(likeCount.textContent);
if (this.textContent === '👍') {
this.textContent = '👍';
likeCount.textContent = count + 1;
this.style.color = '#ff6b6b';
} else {
this.textContent = '👍';
likeCount.textContent = count - 1;
this.style.color = '';
}
});
});
// 回复按钮功能
document.querySelectorAll('.reply-btn').forEach(button => {
button.addEventListener('click', function() {
const commentItem = this.closest('.comment-item');
const userName = commentItem.querySelector('.user-name').textContent;
alert(`回复给 ${userName}`);
});
});
</script>
</body>
</html>
评论网页设计（没有回复）版本3
一次购买，永久免费
评论
{{item.path.join('.')}}
{{item.item.name}}