Hướng dẫn tạo trang web chat GPT với giao diện CSS nâng cao
<!DOCTYPE html>
<html>
<head>
<title>GPT Chat</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>GPT Chat</h1>
</div>
<div class="chat-messages">
<div class="message received">
<p>Hello! How can I help you today?</p>
</div>
<div class="message sent">
<p>I have a question about your products.</p>
</div>
<div class="message received">
<p>Sure, what do you need to know?</p>
</div>
<!-- More chat messages here -->
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here">
<button>Send</button>
</div>
</div>
</body>
</html>
<pre><code class="language-css">.chat-container {
width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.chat-header {
text-align: center;
margin-bottom: 10px;
}
.chat-messages {
max-height: 300px;
overflow-y: scroll;
margin-bottom: 10px;
}
.message {
padding: 5px;
margin-bottom: 5px;
}
.received {
background-color: #f2f2f2;
}
.sent {
background-color: #e2f2e2;
}
.chat-input input {
width: 80%;
padding: 5px;
border-radius: 5px;
}
.chat-input button {
padding: 5px 10px;
border-radius: 5px;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
</code></pre>
<p>Trong ví dụ trên, chúng ta tạo một container chứa chat box với tiêu đề "GPT Chat" và một phần chứa các tin nhắn chat. Các tin nhắn được thiết kế với hai kiểu: nhận và gửi. Chúng ta cũng có một phần để người dùng nhập tin nhắn và nút gửi. Các thuộc tính CSS được sử dụng để tạo giao diện hợp lý và thuận tiện cho người dùng.</p>
原文地址: https://www.cveoy.top/t/topic/o7iW 著作权归作者所有。请勿转载和采集!