首页html聊天界面模板

html聊天界面模板

时间: 2023-07-01 15:14:19 浏览: 222

以下是一个简单的 HTML 聊天界面模板： ```html <!DOCTYPE html> <html> <head> <title>聊天界面</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; } .container { padding: 10px; max-width: 600px; margin: 0 auto; } .message { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 10px; } .message .sender { font-weight: bold; margin-bottom: 5px; } .message .content { background-color: #fff; padding: 10px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); max-width: 80%; } .message .self { align-items: flex-end; } .message .self .content { background-color: #dcf8c6; } .input-container { display: flex; margin-top: 10px; align-items: center; } .input-container input { flex: 1; padding: 10px; border-radius: 5px; border: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .input-container button { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; margin-left: 10px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="message"> <div class="sender">John</div> <div class="content">Hi there!</div> </div> <div class="message self"> <div class="sender">Me</div> <div class="content">Hey!</div> </div> <div class="input-container"> <input type="text" placeholder="Type your message here..."> <button>Send</button> </div> </div> </body> </html> ``` 你可以根据需要进行修改和扩展。

阅读全文