hujung hadapan web
html tutorial
Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS
Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur halaman sembang yang mudah
Dengan perkembangan teknologi moden, orang ramai semakin bergantung pada Internet untuk komunikasi dan komunikasi. Dalam halaman web, halaman sembang adalah keperluan susun atur yang sangat biasa. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman sembang yang mudah, dan memberikan contoh kod khusus.
Pertama, kita perlu mencipta fail HTML, anda boleh menggunakan mana-mana editor teks. Mengambil index.html sebagai contoh, mula-mula buat struktur HTML asas: index.html为例，先创建一个基本的HTML结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<div class="chat-messages">
<!-- 这里是聊天消息的显示区域 -->
</div>
<div class="chat-input">
<!-- 这里是聊天输入框 -->
</div>
</div>
</body>
</html>在上述代码中，我们定义了一个chat-container的容器，其中包括两个部分：chat-messages和chat-input。前者用于展示聊天消息，后者用于用户输入。
接下来，我们需要添加CSS样式来美化这个聊天页面布局。在同一目录下创建一个名为style.css的CSS文件，然后添加以下样式代码：
/* Reset some default styles */
body, html {
margin: 0;
padding: 0;
}
/* Set container width, height and center it */
.chat-container {
width: 400px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}
/* Message display area */
.chat-messages {
height: 400px;
overflow-y: scroll;
padding: 10px;
background-color: #f7f7f7;
}
/* Chat input area */
.chat-input {
height: 100px;
padding: 10px;
background-color: #fff;
border-top: 1px solid #ccc;
}
/* Style placeholder text in input area */
.chat-input input[type="text"]::placeholder {
color: #999;
}
/* Style the send button in input area */
.chat-input input[type="submit"] {
background-color: #3498db;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
/* Style the chat message bubble */
.chat-message {
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}上述CSS代码中，我们设置了几个基本样式。除了一些简单的边框和背景色，还设置了消息展示区域的滚动和聊天气泡的样式。
现在我们可以尝试预览一下效果了。将index.html和style.css文件保存在同一个目录下，然后在浏览器中打开index.html
// 获取聊天消息展示区域和聊天输入框
var messageContainer = document.querySelector(".chat-messages");
var chatInput = document.querySelector(".chat-input input[type='text']");
// 当用户在聊天输入框中按下回车键时，将消息添加到展示区域中
chatInput.addEventListener("keydown", function(event) {
if (event.keyCode === 13) { // 13代表回车键的键码值
event.preventDefault();
// 获取用户输入的消息内容
var messageText = chatInput.value;
// 创建聊天消息元素
var messageBubble = document.createElement("div");
messageBubble.classList.add("chat-message");
messageBubble.textContent = messageText;
// 将消息添加到展示区域中
messageContainer.appendChild(messageBubble);
// 清空聊天输入框
chatInput.value = "";
}
});chat-container, yang merangkumi dua Bahagian: mesej-sembang dan input-sembang. Yang pertama digunakan untuk memaparkan mesej sembang, dan yang kedua digunakan untuk input pengguna. Seterusnya, kita perlu menambah gaya CSS untuk mencantikkan reka letak halaman sembang. Cipta fail CSS bernama style.css dalam direktori yang sama, dan kemudian tambahkan kod gaya berikut: rrreee
Dalam kod CSS di atas, kami telah menetapkan beberapa gaya asas. Selain beberapa sempadan dan warna latar belakang yang ringkas, gaya tatal dan gelembung sembang bagi kawasan paparan mesej juga ditetapkan. Sekarang kita boleh cuba pratonton kesannya. Simpan failindex.html dan style.css dalam direktori yang sama, kemudian buka fail index.html dalam penyemak imbas, anda akan Lihat susun atur halaman sembang yang mudah. Akhir sekali, kami perlu melaksanakan interaksi halaman sembang melalui JavaScript. Di sini kami meninggalkan kod tertentu dan hanya memberikan contoh mudah: 🎜rrreee🎜Melalui kod di atas, kami menyedari bahawa apabila pengguna menekan kekunci Enter dalam kotak input sembang, mesej yang dimasukkan ditambahkan ke kawasan paparan mesej, dan Kosongkan kotak input sembang. 🎜🎜Dengan contoh kod HTML, CSS dan JavaScript di atas, kami boleh melaksanakan reka letak halaman sembang yang mudah dan melaksanakan fungsi paparan dan input mesej. Sudah tentu, ini hanyalah contoh asas dan anda boleh memanjangkan dan mengoptimumkannya mengikut keperluan dan kreativiti anda sendiri. 🎜🎜Saya harap artikel ini akan membantu anda memahami cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman sembang yang mudah! 🎜Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Bagaimana untuk melaksanakan susun atur topeng skrin penuh menggunakan HTML dan CSS
Oct 20, 2023 pm 03:46 PM
Melaksanakan reka letak topeng skrin penuh ialah salah satu keperluan biasa dalam reka bentuk web, yang boleh menambah rasa misteri dan kesan unik yang kuat pada halaman web. Dalam artikel ini, HTML dan CSS akan digunakan untuk melaksanakan reka letak topeng skrin penuh yang ringkas dan contoh kod khusus akan diberikan. Mula-mula, mari buat struktur HTML. Dalam fail HTML, kami akan menggunakan elemen div sebagai bekas untuk topeng dan menambah kandungan di dalamnya, seperti yang ditunjukkan di bawah: <!DOCTYPEhtml><html>
Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS
Oct 16, 2023 am 09:07 AM
Cara membuat halaman susun atur slaid menggunakan HTML dan CSS Pengenalan: Susun atur slaid digunakan secara meluas dalam reka bentuk web moden dan sangat menarik dan interaktif apabila memaparkan maklumat atau gambar. Artikel ini akan memperkenalkan cara membuat halaman susun atur slaid menggunakan HTML dan CSS, dan memberikan contoh kod khusus. 1. Struktur susun atur HTML Pertama, kita perlu mencipta struktur susun atur HTML, termasuk bekas slaid dan berbilang item slaid. Kodnya kelihatan seperti ini: <!DOCTYPEhtml&
Cara menggunakan:nth-child(-n+5) pseudo-class pemilih untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5
Nov 20, 2023 am 11:52 AM
Cara menggunakan:nth-child(-n+5) pemilih kelas pseudo untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5. Dalam CSS, pemilih kelas pseudo ialah alat berkuasa yang boleh dipilih melalui kaedah pemilihan tertentu Elemen tertentu dalam dokumen HTML. Antaranya, :nth-child() ialah pemilih kelas pseudo yang biasa digunakan yang boleh memilih elemen anak pada kedudukan tertentu. :nth-child(n) boleh memadankan elemen anak ke-nth dalam HTML dan :nth-child(-n) boleh memadankan
Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman
Oct 19, 2023 am 08:40 AM
Kemahiran susun atur HTML: Cara menggunakan susun atur kedudukan untuk mengawal kedudukan mutlak halaman Dalam pembangunan Web, susun atur halaman adalah elemen yang sangat kritikal. Reka letak penentududukan ialah kaedah reka letak yang biasa digunakan yang membolehkan pembangun mengawal kedudukan elemen pada halaman dengan lebih fleksibel. Artikel ini akan memperkenalkan cara menggunakan reka letak kedudukan untuk mengawal kedudukan mutlak halaman dan memberikan contoh kod khusus. 1. Gambaran Keseluruhan Susun Atur Kedudukan Susun atur kedudukan merujuk kepada menentukan kedudukan elemen pada halaman berdasarkan atribut kedudukannya. Dalam CSS, terdapat tiga kaedah penentududukan utama: kedudukan relatif,
Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS
Oct 18, 2023 am 08:42 AM
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur halaman sembang yang mudah Dengan perkembangan teknologi moden, orang ramai semakin bergantung pada Internet untuk komunikasi dan komunikasi. Dalam halaman web, halaman sembang adalah keperluan susun atur yang sangat biasa. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman sembang yang mudah, dan memberikan contoh kod khusus. Pertama, kita perlu membuat fail HTML, anda boleh menggunakan mana-mana editor teks. Mengambil index.html sebagai contoh, mula-mula buat HTML asas
Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS
Oct 25, 2023 am 10:42 AM
Cara membuat reka letak dinding kad responsif menggunakan HTML dan CSS Dalam reka bentuk web moden, reka letak responsif adalah teknologi yang sangat penting. Dengan menggunakan HTML dan CSS, kami boleh mencipta reka letak dinding kad responsif yang menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza. Berikut adalah pandangan yang lebih dekat tentang cara membuat reka letak dinding kad responsif yang mudah menggunakan HTML dan CSS. Bahagian HTML: Pertama, kita perlu menyediakan struktur asas dalam fail HTML. Kita boleh menggunakan senarai tidak tersusun (<ul>) dan
Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS
Oct 20, 2023 am 09:54 AM
Cara menggunakan HTML dan CSS untuk melaksanakan susun atur halaman terperinci HTML dan CSS ialah teknologi asas untuk mencipta dan mereka bentuk halaman web Dengan menggunakan kedua-dua ini dengan sewajarnya, kita boleh mencapai pelbagai reka letak halaman web yang kompleks. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman terperinci dan memberikan contoh kod khusus. Mencipta Struktur HTML Mula-mula, kita perlu mencipta struktur HTML untuk meletakkan kandungan halaman kita. Berikut ialah struktur HTML asas: <!DOCTYPEhtml&g
Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur
Oct 27, 2023 pm 03:24 PM
Panduan Susun Atur HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Susun Atur Berbilang Lajur Semasa menyemak imbas halaman web, kita sering melihat reka letak yang terdiri daripada berbilang lajur, seperti halaman utama laman web berita, halaman paparan produk, dsb. Reka letak berbilang lajur ini menjadikan halaman web lebih teratur dan cantik dengan membahagikan kandungan kepada lajur dan memaparkannya bersebelahan. Dalam HTML, kita boleh menggunakan elemen terapung untuk mencapai susun atur berbilang lajur sedemikian. Artikel ini akan menunjukkan kepada anda cara menggunakan elemen terapung untuk melaksanakan reka letak berbilang lajur dan memberikan contoh kod khusus. Konsep asas dalam menggunakan elemen terapung untuk melaksanakan susun atur berbilang lajur
