用css搭建一个h5聊天界面
下面是一个简单的H5聊天界面样式示例，使用了基本的CSS来构建界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5聊天界面</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.chat-container {
width: 100%;
max-width: 500px;
background-color: #e6e6e6;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.chat-header {
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.message-input {
width: 100%;
padding: 10px;
margin-top: 20px;
}
.message-input textarea {
width: 100%;
height: 100px;
resize: none;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.message-input button {
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
background-color: #555;
color: white;
cursor: pointer;
border-radius: 5px;
}
.message-container {
margin-top: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
.message {
margin-bottom: 20px;
}
.message p {
margin: 0;
word-wrap: break-word;
}
.message-user {
text-align: right;
}
.message-user p {
background-color: #555;
color: white;
border-radius: 10px;
padding: 10px;
margin-bottom: 0;
}
.message-bot {
text-align: left;
}
.message-bot p {
background-color: #ddd;
border-radius: 10px;
padding: 10px;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>聊天室</h2>
</div>
<div class="message-container">
<!-- 消息列表 -->
</div>
<div class="message-input">
<textarea placeholder="输入消息..."></textarea>
<button>发送</button>
</div>
</div>
</body>
</html>这个例子提供了一个简单的聊天界面框架，你可以根据需要添加JavaScript以实现发送消息、接收消息等功能。
评论已关闭