写一个带头像的评论区html
时间: 2024-01-22 07:42:41 浏览: 30
以下是一个带头像的评论区HTML模板:
```
<div class="comment-section">
<div class="comment">
<img src="avatar-1.jpg" alt="Avatar" class="avatar">
<div class="comment-content">
<h4>用户名</h4>
<p>评论内容</p>
</div>
</div>
<div class="comment">
<img src="avatar-2.jpg" alt="Avatar" class="avatar">
<div class="comment-content">
<h4>用户名</h4>
<p>评论内容</p>
</div>
</div>
<!-- 更多评论... -->
<div class="new-comment">
<img src="avatar-default.jpg" alt="Avatar" class="avatar">
<form>
<input type="text" placeholder="输入您的用户名">
<textarea placeholder="输入您的评论"></textarea>
<button type="submit">提交评论</button>
</form>
</div>
</div>
```
CSS样式:
```
.comment-section {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.comment {
display: flex;
margin-bottom: 20px;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.comment-content {
display: flex;
flex-direction: column;
}
h4 {
margin: 0;
font-size: 16px;
}
p {
margin: 5px 0 0 0;
}
.new-comment {
display: flex;
margin-top: 20px;
}
.new-comment form {
display: flex;
flex-direction: column;
}
.new-comment input,
.new-comment textarea {
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}
.new-comment textarea {
height: 100px;
}
.new-comment button {
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #3498db;
border: none;
border-radius: 5px;
cursor: pointer;
}
.new-comment button:hover {
background-color: #2980b9;
}
```
注意:需要替换图片的路径和默认头像的图片名称。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)