首页用HTML代码写一个聊天机器人。屏幕最下面有个棱角输入框。输入框旁边有个棱角发送按钮。用来发送消息给机器人

用HTML代码写一个聊天机器人。屏幕最下面有个棱角输入框。输入框旁边有个棱角发送按钮。用来发送消息给机器人

时间: 2024-05-31 22:07:25 浏览: 80

<!DOCTYPE html> <html> <head> <title>Chatbot</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { max-width: 800px; margin: 0 auto; padding: 20px; box-sizing: border-box; } .message { display: inline-block; padding: 10px; margin-bottom: 10px; border-radius: 10px; max-width: 60%; } .user-message { background-color: #cfe2f3; float: right; margin-left: 40%; } .bot-message { background-color: #e2f3cf; float: left; margin-right: 40%; } .input-box { display: flex; margin-top: 20px; } .message-input { flex: 1; padding: 10px; border-radius: 10px; border: none; font-size: 16px; } .send-button { margin-left: 10px; padding: 10px; border-radius: 10px; background-color: #4CAF50; color: white; font-size: 16px; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="message bot-message">Hi there! How can I assist you today?</div> <div class="input-box"> <input type="text" class="message-input" placeholder="Type your message here..."> <button class="send-button">Send</button> </div> </div> </body> </html>

阅读全文