首页帮我用html写一个聊天机器人

帮我用html写一个聊天机器人

时间: 2023-03-24 10:05:02 浏览: 192

好的，以下是一个简单的 HTML 聊天机器人代码： <!DOCTYPE html> <html> <head> <title>聊天机器人</title> <meta charset="UTF-8"> <style> .container { width: 50%; margin: auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 10px rgba(,,,.3); } .user { background-color: #4CAF50; color: white; margin-right: 50%; padding: 10px; border-radius: 5px; margin-bottom: 10px; } .bot { background-color: #2196F3; color: white; margin-left: 50%; padding: 10px; border-radius: 5px; margin-bottom: 10px; } .input { width: 100%; padding: 10px; border: none; border-radius: 5px; margin-bottom: 10px; box-shadow: 10px rgba(,,,.3); } .button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; box-shadow: 10px rgba(,,,.3); } </style> </head> <body> <div class="container"> <div class="bot">你好，我是聊天机器人，请问有什么可以帮助您的？</div> <div class="user">你好，我想问一下天气怎么样？</div> <div class="bot">抱歉，我还不会查询天气，您可以去百度上查询。</div> <div class="user">好的，谢谢。</div> <div class="bot">不客气，有什么其他问题吗？</div> <input type="text" class="input" placeholder="请输入您的问题"> <button class="button">发送</button> </div> </body> </html> 你可以根据需要修改样式和添加 JavaScript 代码来实现聊天机器人的功能。

阅读全文