基于html5,设计一个和b战评论区相似的界面
时间: 2024-06-11 17:06:32 浏览: 9
抱歉,作为AI语言模型,我无法提供图形用户界面。但是,我可以提供一些HTML和CSS代码来实现该设计:
HTML代码:
```
<div class="container">
<div class="header">
<h1>视频标题</h1>
<p>视频描述</p>
</div>
<div class="comments">
<h2>评论区</h2>
<ul>
<li>
<div class="user-info">
<img src="user-avatar.jpg" alt="用户头像">
<p>用户名</p>
</div>
<div class="comment-content">
<p>评论内容</p>
<span class="timestamp">发布时间</span>
</div>
</li>
<!-- 添加更多评论 -->
</ul>
</div>
<div class="comment-form">
<h3>发表评论</h3>
<form>
<input type="text" placeholder="输入评论...">
<button type="submit">发表</button>
</form>
</div>
</div>
```
CSS代码:
```
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
}
.header h1 {
font-size: 36px;
margin-bottom: 10px;
}
.header p {
font-size: 18px;
color: #888;
}
.comments {
margin-top: 40px;
}
.comments h2 {
font-size: 24px;
margin-bottom: 20px;
}
.comments ul {
list-style: none;
margin: 0;
padding: 0;
}
.comments li {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.user-info img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.user-info p {
font-size: 18px;
font-weight: bold;
margin: 0;
}
.comment-content p {
font-size: 16px;
margin-bottom: 10px;
}
.comment-content .timestamp {
font-size: 14px;
color: #888;
}
.comment-form {
margin-top: 40px;
}
.comment-form h3 {
font-size: 24px;
margin-bottom: 20px;
}
.comment-form input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
.comment-form button[type="submit"] {
padding: 10px 20px;
background-color: #f60;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
.comment-form button[type="submit"]:hover {
background-color: #ff8533;
}
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)