首页给上面代码添加css样式

给上面代码添加css样式

时间: 2023-12-20 10:53:51 浏览: 71

可以通过给HTML元素添加style属性或者外部引入CSS文件的方式添加样式。以下是给上面代码添加样式的示例： ```html <!DOCTYPE html> <html> <head> <title>聊天机器人</title> <style> .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } .message { margin: 10px; padding: 10px; background-color: #fff; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); border-radius: 5px; font-size: 16px; line-height: 1.5; } .user-message { background-color: #ddf3ff; } .bot-message { background-color: #e6ffe6; } </style> </head> <body> <div class="container"> <div class="message user-message"> <p>你好，机器人！</p> </div> <div class="message bot-message"> <p>你好，有什么可以帮助你的？</p> </div> </div> </body> </html> ``` 在上述样式中，`.container`类表示整个聊天窗口的容器，设置了最大宽度、居中、边距、背景色和阴影效果。`.message`类表示每个聊天消息的容器，设置了边距、内边距、背景色、阴影效果、圆角和字体大小。`.user-message`和`.bot-message`类分别表示用户发送的消息和机器人回复的消息的样式，分别设置了不同的背景色。注意：在实际开发中，应该根据具体需求和设计规范来定义样式。

阅读全文