h5聊天界面
时间: 2023-06-29 17:04:19 浏览: 237
html5 web微信聊天窗口界面模板
5星 · 资源好评率100%
您可以使用HTML5和CSS3来创建一个简单的聊天界面。以下是一个简单的示例:
HTML代码:
```
<div class="chat-container">
<div class="chat-box">
<div class="message received">Hello!</div>
<div class="message sent">Hi there!</div>
<div class="message received">How are you?</div>
<div class="message sent">I'm good, thanks. How about you?</div>
<div class="message received">I'm doing well, thanks.</div>
</div>
<form class="chat-form">
<input type="text" placeholder="Type your message here...">
<button type="submit">Send</button>
</form>
</div>
```
CSS代码:
```
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-box {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.message {
display: inline-block;
margin-bottom: 10px;
padding: 5px 10px;
border-radius: 10px;
max-width: 80%;
}
.received {
background-color: #f1f0f0;
align-self: flex-start;
}
.sent {
background-color: #0084ff;
color: #fff;
align-self: flex-end;
}
.chat-form {
display: flex;
margin-top: 10px;
}
.chat-form input {
flex: 1;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
}
.chat-form button {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #0084ff;
color: #fff;
cursor: pointer;
}
```
这个简单的聊天界面包括一个包含聊天消息的框和一个输入框和发送按钮的表单。通过CSS,我们为接收到的消息和发送的消息设置不同的背景颜色和对齐方式。
阅读全文