写一个带背景适配移动端的html5 可以post的聊天界面
时间: 2023-12-14 18:38:58 浏览: 17
以下是一个简单的带背景适配移动端的HTML5聊天界面:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.chat-container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.chat-header {
background-color: #4CAF50;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24px;
border-radius: 10px 10px 0 0;
}
.chat-header h2 {
margin: 0;
}
.chat-body {
padding: 10px;
height: 400px;
overflow-y: scroll;
}
.chat-message {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.chat-message p {
margin: 0;
padding: 5px;
border-radius: 10px;
}
.chat-message.sent p {
background-color: #4CAF50;
color: #fff;
align-self: flex-end;
}
.chat-message.received p {
background-color: #f1f1f1;
color: #333;
align-self: flex-start;
}
.chat-input {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
padding: 10px;
border-radius: 0 0 10px 10px;
}
.chat-input input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 20px;
font-size: 16px;
margin-right: 10px;
}
.chat-input button {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>Chat App</h2>
<button>Logout</button>
</div>
<div class="chat-body">
<div class="chat-message sent">
<p>Hello!</p>
</div>
<div class="chat-message received">
<p>Hi there!</p>
</div>
<div class="chat-message sent">
<p>How are you?</p>
</div>
<div class="chat-message received">
<p>I'm good, thanks. How about you?</p>
</div>
<div class="chat-message sent">
<p>Same here.</p>
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message...">
<button>Send</button>
</div>
</div>
</body>
</html>
```
这个聊天界面包括一个聊天框和一个输入框,其中聊天框中包含了一些样例消息,可以根据需要进行修改。这个聊天界面还包括了一个标题和一个登出按钮,但是这些功能的实现需要使用JavaScript,因此并未在这个示例中包含。