前后端不分离jquery项目
时间: 2023-11-17 17:07:25 浏览: 45
感谢您的提问,以下是用HTML生成一个简单的聊天界面的代码示例:
```html
<html>
<head>
<title>聊天界面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑', sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
padding-top: 20px;
}
.chatbox {
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
}
.user {
color: #007bff;
font-weight: bold;
}
.bot {
color: #28a745;
font-weight: bold;
}
.time {
font-size: 12px;
color: #9a9a9a;
margin-left: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.inputbox {
display: flex;
margin-top: 20px;
}
.textbox {
flex-grow: 1;
margin-right: 10px;
padding: 10px;
border: none;
border-radius: 10px;
font-size: 16px;
box-sizing: border-box;
}
.sendbtn {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.sendbtn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<div class="chatbox">
<div class="bot">您好,请问有什么需要帮助的吗?</div>
<div class="time">2021-10-01 10:00</div>
</div>
<div class="chatbox">
<div class="user">我想了解一下产品的价格。</div>
<div class="time">2021-10-01 10:03</div>
</div>
</div>
<div class="inputbox">
<textarea class="textbox" placeholder="请输入您想说的话"></textarea>
<button class="sendbtn">发送</button>
</div>
</body>
</html>
```
注意:这个聊天界面只是一个示例,您可以根据需要自行调整样式和功能。另外,这里只涉及HTML代码,实际开发中您还需要考虑如何响应用户的输入并与后端进行交互,这里不再赘述。