[分享]css写qq聊天界面

CSS是一种用于网页渲染的样式表语言，它可以为网页设置字体、颜色、布局等样式，从而使网页看上去更具规范和美观。下面我们来看看如何使用CSS写一个QQ聊天界面。/ 定义一些通用的样式 / body { ...

CSS是一种用于网页渲染的样式表语言，它可以为网页设置字体、颜色、布局等样式，从而使网页看上去更具规范和美观。下面我们来看看如何使用CSS写一个QQ聊天界面。

/* 定义一些通用的样式 */
body {
  background-color: #efefef;
  font-family: Arial, sans-serif;
}

.chat {
  width: 500px;
  height: 600px;
  border: 1px solid #ccc;
  margin: 0 auto;
}

.chat-header {
  background-color: #f5f5f5;
  height: 40px;
  border-bottom: 1px solid #ccc;
}

.chat-header h1 {
  font-size: 16px;
  margin-left: 20px;
  line-height: 40px;
}

.chat-body {
  height: 500px;
  overflow-y: scroll;
  padding: 10px;
}

.chat-message {
  margin-bottom: 10px;
}

.chat-message .avatar {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.chat-message .content {
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  display: inline-block;
  max-width: 70%;
}

.chat-message .name {
  font-weight: bold;
  margin-bottom: 5px;
}

.chat-message .time {
  font-size: 12px;
  color: #888;
}

以上代码定义了一个名为.chat的聊天窗口，其中包括一个头部（chat-header）和一个消息区域（chat-body），消息区域使用了overflow-y:scroll样式，实现了消息过多时的滚动效果。每个消息由头像（avatar）、名字（name）、时间（time）和内容（content）组成，这些都有对应的样式定义。

在HTML中引入以上样式表后，即可实现基本的QQ聊天界面效果。如果需要更详细的样式调整，可以根据需求对以上样式进行微调。