用html写一个聊天界面
时间: 2023-05-17 18:06:24 浏览: 55
好的,以下是一个简单的 HTML 聊天界面的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>聊天界面</title>
<style>
.chat-box {
border: 1px solid #ccc;
padding: 10px;
height: 400px;
overflow-y: scroll;
}
.chat-input {
margin-top: 10px;
display: flex;
}
.chat-input input[type="text"] {
flex: 1;
margin-right: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.chat-input input[type="submit"] {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="message">
<p><strong>小明:</strong>你好啊!</p>
<p><strong>小红:</strong>你好!</p>
<p><strong>小明:</strong>最近怎么样?</p>
<p><strong>小红:</strong>还好,你呢?</p>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="输入消息...">
<input type="submit" value="发送">
</div>
</body>
</html>
```
这是一个简单的聊天界面,包含一个消息框和一个输入框,用户可以在输入框中输入消息并发送。消息框会显示所有的聊天记录。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)