Rumah > Artikel > hujung hadapan web > div set html
div set html
- PHPzasal
- 2023-05-21 17:47:07704semak imbas
Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan HTML untuk membina struktur halaman web, manakala CSS digunakan untuk mencantikkan dan menggayakan halaman web. Dalam CSS, menggunakan teg div ialah cara yang sangat biasa untuk membahagikan elemen dalam halaman web kepada blok yang berbeza untuk memudahkan penetapan gaya dan reka letak. Artikel ini akan memperkenalkan cara menggunakan teg div untuk menetapkan struktur dan gaya halaman web dalam HTML.
1. Apakah itu teg div?
Teg div ialah teg bekas dalam HTML yang boleh digunakan untuk membahagikan elemen HTML lain kepada blok yang berbeza. Blok ini boleh mempunyai gaya dan susun atur yang berbeza, seperti pengepala halaman web, bar navigasi, kawasan kandungan utama, bar sisi, dsb. Berbanding dengan teg HTML lain, teg div tidak mempunyai semantik khusus Ia adalah teg bekas umum.
2. Gunakan teg div untuk menyediakan struktur halaman web
Menggunakan teg div dalam HTML adalah sangat mudah. Anda hanya perlu menambah teg dc6dce4a544fdca2df29d5ac0ea9906b dibahagikan kepada blok. Contohnya, dalam halaman web, kita mungkin perlu mengasingkan kawasan pengepala halaman dan kawasan kandungan. Ia boleh dinyatakan seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>使用div标签设置网页结构</title>
<style>
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.content {
margin: 0 auto;
width: 80%;
padding: 20px;
}
</style>
</head>
<body>
<div>
<header>
<h1>这是网页的头部</h1>
</header>
<div class="content">
<p>这是网页的内容区域。</p>
</div>
</div>
</body>
</html>Dalam kod di atas, kami menggunakan lapisan luar dc6dce4a544fdca2df29d5ac0ea9906b untuk membalut elemen 1aa9e5d373740b65a0cc8f0a02150c53 dan .content, dengan itu membahagikannya kepada dua blok berbeza . Teg 1aa9e5d373740b65a0cc8f0a02150c53 mewakili kawasan pengepala dan .content mewakili kawasan kandungan. Dalam gaya CSS, kami melaksanakan tetapan gaya untuk blok yang berbeza dengan menyasarkan nama kelas yang berbeza.
3. Gunakan tag div untuk reka letak halaman web
Selain pembahagian struktur, tag div juga boleh digunakan untuk melaksanakan reka letak halaman web. Sebagai contoh, kita boleh mencapai reka letak keseluruhan halaman web dengan menetapkan gaya div yang berbeza. Secara khusus, terdapat dua kaedah reka letak biasa:
(1) Reka letak model kotak
Reka letak model kotak memperlakukan bahagian halaman web yang berbeza sebagai kotak yang berbeza Dengan menetapkan Sifat kotak seperti lebar,. ketinggian, dan margin melaksanakan susun atur keseluruhan. Sebagai contoh, kami menetapkan kawasan pengepala dan kawasan kandungan dalam halaman web:
<!DOCTYPE html>
<html>
<head>
<title>使用div标签进行网页布局</title>
<style>
.header {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
.content {
margin: 0 auto;
width: 80%;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">这是网页的头部</div>
<div class="content">
<h2>这是网页的内容区域。</h2>
<p>在这里填写网页内容……</p>
</div>
</body>
</html>Dalam kod di atas, kami menetapkan gaya dua kelas: .header dan .content, .header sepadan dengan kawasan pengepala , kandungan sepadan dengan kawasan kandungan. Antaranya, ketinggian .header ialah 100 piksel dan atribut seperti warna latar belakang, pemusatan dan gaya teks ditetapkan. Lebar .content ialah 80%, sejajar tengah dan padding ditetapkan. Dengan tetapan ini, kami boleh melaksanakan reka letak halaman web yang mudah.
(2) Reka letak grid
Selain reka letak model kotak, anda juga boleh menggunakan reka letak grid CSS untuk melaksanakan reka letak halaman web. Susun atur grid membahagikan keseluruhan kawasan halaman web kepada berbilang grid Kami boleh meletakkan elemen berbeza dalam grid berbeza untuk mencapai susun atur keseluruhan.
Sebagai contoh, kami boleh menyediakan reka letak halaman web dengan pengepala, bar navigasi dan kawasan kandungan seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>使用div标签进行网页布局</title>
<style>
.container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 100px auto;
grid-template-areas:
"header header"
"nav content";
grid-gap: 10px;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #f6f6f6;
}
.header {
grid-area: header;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
.nav {
grid-area: nav;
background-color: #777;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
grid-area: content;
padding: 20px;
background-color: #fff;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">这是头部</div>
<div class="nav">这是导航栏</div>
<div class="content">这是内容区域</div>
</div>
</body>
</html>Dalam kod di atas, kami menggunakan reka letak grid untuk mencapai reka letak keseluruhan daripada halaman web. Kelas .container menetapkan reka letak grid untuk keseluruhan halaman web, yang dibahagikan kepada dua lajur dan dua baris Saiz setiap grid dikira secara automatik. Pada masa yang sama, kami juga menetapkan kedudukan grid khusus untuk setiap blok, yang ditetapkan melalui atribut kawasan grid. Melalui susun atur yang begitu terperinci, kita boleh mendapatkan halaman web dengan pengepala, bar navigasi dan kawasan kandungan.
Ringkasan
Teg div ialah teg bekas umum yang digunakan untuk membahagikan blok dalam HTML. Dengan menggunakan tag div, kami boleh melaksanakan tetapan struktur dan susun atur halaman web dengan cepat dan mudah. Dalam gaya CSS, kita boleh menetapkan gaya blok yang berbeza melalui nama kelas yang berbeza, dan mencapai susun atur keseluruhan melalui susun atur model kotak atau susun atur grid. Menguasai kemahiran menggunakan tag div untuk pembangunan web boleh membantu kami mencapai kerja pembangunan web dengan lebih cekap.
Atas ialah kandungan terperinci div set html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!