html微信聊天页面代码
时间: 2023-09-16 20:09:05 浏览: 93
以下是一个简单的HTML微信聊天页面的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>微信聊天页面</title>
<style>
.chat-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.message {
margin-bottom: 10px;
}
.sender {
font-weight: bold;
}
.timestamp {
font-size: 12px;
color: #999;
}
.content {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="message">
<span class="sender">小明:</span>
<span class="timestamp">2021-01-01 10:00</span>
<div class="content">你好,最近过得怎么样?</div>
</div>
<div class="message">
<span class="sender">小红:</span>
<span class="timestamp">2021-01-01 10:05</span>
<div class="content">我很好,谢谢你!你呢?</div>
</div>
<div class="message">
<span class="sender">小明:</span>
<span class="timestamp">2021-01-01 10:10</span>
<div class="content">我也很好,谢谢!</div>
</div>
</div>
</body>
</html>
```
这段代码创建了一个简单的微信聊天页面。使用`<div>`元素和CSS样式来布局和美化聊天消息。每条消息都包含发送者、时间戳和内容。你可以根据需要修改样式和添加更多的消息。