Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menulis divcss
Bagaimana untuk menulis divcss
- PHPzasal
- 2023-05-21 11:38:08593semak imbas
Div (Division) dan CSS (Cascading Style Sheets) ialah dua elemen yang sangat penting dalam reka bentuk web. Dalam artikel ini, kita akan membincangkan cara menulis susun atur div menggunakan CSS.
Dalam CSS, kami boleh menggunakan tag div untuk menentukan kawasan yang berbeza pada halaman. Kawasan ini boleh mengandungi elemen seperti teks, imej, jadual, video, dsb. Menggunakan tag div, kami boleh menentukan reka letak dan gaya halaman, menjadikannya kelihatan lebih cantik dan profesional.
Berikut ialah kod untuk halaman HTML ringkas, yang mengandungi tiga teg div:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
.container {
width: 90%;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
.header {
background-color: #eee;
text-align: center;
padding: 20px;
}
.footer {
background-color: #eee;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>欢迎来到我的网页！</h1>
</div>
<div class="content">
<p>这是我的第一个网页，希望大家喜欢！</p>
</div>
<div class="footer">
<p>版权所有 © 2021</p>
</div>
</div>
</body>
</html>Dalam contoh ini, kami mempunyai tiga teg div:
- bekas : Teg ini mengandungi keseluruhan halaman dan menetapkan beberapa gaya asas, seperti lebar halaman, warna latar belakang dan jidar.
- pengepala: Teg ini mengandungi tajuk halaman dan menetapkan beberapa gaya, seperti warna latar belakang, pemusatan teks dan pelapik.
- pengaki: Teg ini mengandungi maklumat hak cipta dan menetapkan beberapa gaya, seperti warna latar belakang, pemusatan teks dan pelapik.
Kami menggunakan CSS untuk menentukan gaya teg div ini. Dalam contoh di atas, kami menggunakan pemilih kelas untuk memilih setiap div dan menentukan gaya secara individu.
Dalam kelas .container, kami menetapkan lebar halaman web kepada 90% dan memusatkannya. Kami juga menetapkan warna latar belakang, warna sempadan dan padding. Ini menjadikan keseluruhan halaman kelihatan lebih bersih dan lebih mudah dibaca.
Dalam kelas .header, kami menetapkan warna latar belakang, pemusatan teks dan padding tajuk. Ini menjadikan tajuk lebih mudah dibaca dan mengklik pada tajuk membawa anda kembali ke bahagian atas halaman.
Dalam kelas .footer, kami juga menetapkan warna latar belakang, pemusatan teks dan padding. Ini menjadikan maklumat hak cipta lebih mudah dibaca dan boleh didapati di bahagian bawah halaman.
Selain contoh di atas, kami juga boleh menggunakan pemilih CSS yang berbeza seperti pemilih kedudukan dan pemilih id untuk memilih dan mentakrifkan gaya teg div. Sebagai contoh, kita boleh menggunakan kod berikut untuk meletakkan dua teg div di sebelah kiri dan kanan halaman:
<style>
.left {
float: left;
width: 50%;
background-color: #eee;
padding: 20px;
}
.right {
float: right;
width: 50%;
background-color: #eee;
padding: 20px;
}
</style>
<div class="left">
<p>这个div位于页面的左侧。</p>
</div>
<div class="right">
<p>这个div位于页面的右侧。</p>
</div>Dalam contoh ini, kami menggunakan pemilih kedudukan (float) dan atribut lebar untuk meletakkan kiri Div sisi dan div kanan diletakkan pada kedua-dua belah halaman. Kami juga menetapkan warna latar belakang dan padding untuk setiap tag div.
Akhir sekali, terdapat beberapa amalan terbaik yang perlu kita perhatikan apabila menggunakan div dan CSS:
- Gunakan tag div sesedikit mungkin. Menggunakan terlalu banyak tag div akan menjadikan kod bersepah dan sukar untuk diselenggara.
- Gunakan teg semantik dan bukannya teg div. Teg semantik termasuk pengepala, navigasi, bahagian, artikel, tepi, pengaki, dsb. Tujuannya adalah untuk mentakrifkan struktur dan kandungan halaman dengan jelas.
- Sentiasa tetapkan kelas atau id kepada teg div untuk menggayakannya.
- Jangan gunakan terlalu banyak teg !penting dalam CSS, kerana ini boleh mengacaukan kod dan menyukarkan penyelenggaraan.
- Sentiasa ikuti amalan terbaik CSS, seperti mengumpulkan gaya berkaitan bersama, menggunakan pemilih bersarang, dsb. Ini menjadikan kod lebih bersih dan lebih mudah dibaca dan difahami.
Dalam artikel ini, kami membincangkan cara menulis reka letak div menggunakan CSS. Kami melihat cara memilih dan menggayakan teg div menggunakan pemilih CSS seperti pemilih kelas, pemilih kedudukan dan pemilih id, serta beberapa amalan terbaik. Dengan pengetahuan ini, anda boleh menggunakan tag div dan CSS untuk membina halaman web yang lebih baik, lebih cantik dan lebih profesional.
Atas ialah kandungan terperinci Bagaimana untuk menulis divcss. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!