📌  相关文章
📜  whatsapp 聊天 html 代码 - Html (1)

📅  最后修改于: 2023-12-03 15:21:08.642000             🧑  作者: Mango

WhatsApp 聊天 HTML 代码

<!DOCTYPE html>
<html>
<head>
  <title>WhatsApp 聊天</title>
  <style>
    .message {
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      width: 300px;
    }

    .sender {
      font-weight: bold;
      color: #075e54;
    }

    .timestamp {
      font-size: 0.8em;
      color: #777;
    }

    .content {
      margin-top: 5px;
    }

    .media {
      margin-top: 10px;
    }

    .media img {
      max-width: 100%;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="message">
    <span class="sender">John Doe</span>
    <span class="timestamp">09:30 AM</span>
    <div class="content">
      Hello! How are you?
    </div>
  </div>

  <div class="message">
    <span class="sender">Jane Smith</span>
    <span class="timestamp">09:32 AM</span>
    <div class="content">
      Hi John! I'm doing well, thanks for asking. How about you?
    </div>
  </div>

  <div class="message">
    <span class="sender">John Doe</span>
    <span class="timestamp">09:35 AM</span>
    <div class="content">
      I'm good too. Just working on a new project. Would you like to see a preview?
    </div>
    <div class="media">
      <img src="preview.png" alt="Project Preview">
    </div>
  </div>
</body>
</html>

以上是一个示例的 WhatsApp 聊天的 HTML 代码。该代码使用了简单的 HTML 和 CSS 样式来模拟 WhatsApp 中的聊天界面。

通过<div>元素来表示每条消息，可以在其中包含发送者姓名、时间戳和消息内容。添加.message类来设置整个消息区域的样式，.sender和.timestamp类用于设置发送者姓名和时间戳的样式，.content类用于设置消息内容的样式。

如果需要在消息中显示图片或其他媒体，可以在.message内部添加一个.media容器，并在其中插入相关的媒体元素，例如<img>标签来显示图片。

可以根据需要自定义样式，例如修改颜色、字体大小等。

请注意，上述代码只是一个示例，并不包含完整的 WhatsApp 聊天功能。编写完整的 WhatsApp 聊天应用程序需要更复杂的逻辑和后端支持。