QQ联系人界面
时间: 2023-08-27 20:05:37 浏览: 174
QQ联系人界面主要分为两个部分:联系人列表和聊天窗口。以下是一个简单的 QQ 联系人界面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>QQ联系人</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
}
.contact-list {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
float: left;
margin-right: 20px;
}
.contact-list h2 {
font-size: 20px;
margin-bottom: 10px;
}
.contact-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.contact-list li {
margin-bottom: 5px;
}
.contact-list li a {
display: block;
padding: 5px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.contact-list li a:hover {
background-color: #f2f2f2;
}
.chat-window {
width: 400px;
border: 1px solid #ccc;
padding: 10px;
float: left;
}
.chat-window h2 {
font-size: 20px;
margin-bottom: 10px;
}
.chat-window .message {
margin-bottom: 10px;
}
.chat-window .message .sender {
font-weight: bold;
margin-right: 5px;
}
.chat-window .message .time {
font-size: 12px;
color: #999;
margin-left: 5px;
}
.chat-window form {
margin-top: 10px;
}
.chat-window input[type="text"] {
width: 80%;
padding: 5px;
border: 1px solid #ccc;
}
.chat-window input[type="submit"] {
padding: 5px 10px;
background-color: #0099CC;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="contact-list">
<h2>联系人</h2>
<ul>
<li><a href="#">张三</a></li>
<li><a href="#">李四</a></li>
<li><a href="#">王五</a></li>
</ul>
</div>
<div class="chat-window">
<h2>与张三聊天中</h2>
<div class="message">
<span class="sender">我:</span>
<span class="content">你好,张三。</span>
<span class="time">10:00 AM</span>
</div>
<div class="message">
<span class="sender">张三:</span>
<span class="content">你好,我有什么可以帮你的吗?</span>
<span class="time">10:01 AM</span>
</div>
<div class="message">
<span class="sender">我:</span>
<span class="content">我想问一下你的近况。</span>
<span class="time">10:02 AM</span>
</div>
<form>
<input type="text" name="message" placeholder="请输入消息...">
<input type="submit" value="发送">
</form>
</div>
</body>
</html>
```
上面的示例中,联系人列表位于左侧,聊天窗口位于右侧。聊天窗口包括消息记录和发送消息的表单。你可以根据自己的需要修改 HTML 代码和 CSS 样式。