用 CSS 创建微信聊天界面 - 简单示例 - 常规

下面是一个简单的示例，展示了如何使用CSS创建一个微信聊天界面。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>微信聊天界面</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="chat-container">
    <div class="chat">
      <div class="message received">
        <div class="sender">Tom</div>
        <div class="content">Hello, how are you?</div>
      </div>
      <div class="message sent">
        <div class="sender">Me</div>
        <div class="content">I'm fine, thanks!</div>
      </div>
      <div class="message received">
        <div class="sender">Tom</div>
        <div class="content">That's great!</div>
      </div>
    </div>
    <div class="input-area">
      <input type="text" placeholder="Type a message...">
      <button>Send</button>
    </div>
  </div>
</body>
</html>

CSS代码（style.css）：

.chat-container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

.chat {
  height: 300px;
  overflow-y: scroll;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.received {
  background-color: #f2f2f2;
  text-align: left;
}

.sent {
  background-color: #007bff;
  color: #fff;
  text-align: right;
}

.sender {
  font-weight: bold;
}

.input-area {
  margin-top: 20px;
}

input[type="text"] {
  width: 300px;
  padding: 5px;
  border-radius: 5px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

在浏览器中打开该HTML文件，您将看到一个带有聊天消息和输入框的微信聊天界面。