以上代码加一个好看的样式
时间: 2023-10-14 15:05:00 浏览: 40
好的,以下是一个简单的样式:
```html
<style>
#chatbox {
background-color: #F0F0F0;
border: 1px solid #CCC;
border-radius: 5px;
width: 400px;
height: 500px;
overflow-y: scroll;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
}
#chatbox p {
margin: 10px 0;
}
#inputbox {
border: 1px solid #CCC;
border-radius: 5px;
width: 400px;
height: 30px;
padding: 5px;
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
<div id="chatbox">
<p><strong>Me:</strong> Hello</p>
<p><strong>ChitGPT:</strong> Hi there, how can I assist you today?</p>
<p><strong>Me:</strong> Can you help me with some coding questions?</p>
<p><strong>ChitGPT:</strong> Of course, what specific coding questions do you have in mind?</p>
</div>
<input type="text" id="inputbox" placeholder="Type your message here...">
```
这里使用了一些基本的 CSS 样式来装饰我们的聊天框和输入框,使其更加美观。你可以根据需要进行修改。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)