langkah divcss

langkah divcss

Dalam pembangunan web, kami biasanya menggunakan HTML dan CSS untuk membina halaman. CSS, atau Cascading Style Sheets, membolehkan kami menyesuaikan gaya seperti reka letak halaman web, warna dan fon. Dalam CSS, gunakan elemen div untuk membahagikan kawasan berbeza halaman web, dan kemudian tetapkan gaya untuk setiap kawasan untuk merealisasikan reka bentuk reka letak dan gaya halaman web.

Jadi, bagaimana untuk menggunakan elemen div untuk reka letak dan penggayaan halaman web? Di bawah adalah langkah-langkah untuk divcss.

1. Susun atur HTML

Pertama, kita perlu mentakrifkan elemen div dalam HTML dan menetapkan atribut kelas atau idnya supaya kita boleh merujuk dan menetapkannya dalam gaya Sepadan CSS :

<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>

Dalam kod di atas, kami mentakrifkan empat elemen div, yang digunakan untuk pengepala, kandungan, bar sisi dan bahagian bawah halaman web. Untuk memudahkan tetapan gaya, kami menetapkan atribut kelas yang sepadan untuk setiap elemen div, dan kelas yang sepadan boleh dirujuk terus dalam tetapan gaya CSS.

2. Tetapan Gaya CSS

Seterusnya, kita perlu menggayakan setiap elemen div dalam CSS. Kami menggunakan Cascading Style Sheets (CSS) untuk menetapkan gaya berbeza untuk elemen div yang berbeza melalui pemilih.

Pertama sekali, kita perlu menetapkan gaya global untuk keseluruhan halaman web, termasuk warna latar belakang, fon dan gaya lalai:

body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

Di sini kami menetapkan warna latar belakang keseluruhan halaman web kepada kelabu muda, dan tetapkan fon Fon ialah Arial, saiz fon ialah 14px, dan ketinggian garisan ialah 1.5 kali.

Seterusnya, kita perlu menggayakan setiap elemen div untuk melaksanakan reka letak dan gaya halaman web.

Untuk elemen kepala, anda boleh menetapkan gaya seperti ketinggiannya, warna latar belakang, warna teks dan penjajaran:

.header {
  height: 80px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding-top: 20px;
}

Dalam kod di atas, kami menetapkan ketinggian elemen kepala kepada 80px , warna latar belakang ditetapkan kepada hitam, warna teks ditetapkan kepada putih, penjajaran ditetapkan ke tengah dan padding atas ditetapkan kepada 20px melalui atribut padding-top untuk meninggalkan ruang tertentu untuk kandungan teks pengepala.

Untuk elemen kandungan, anda boleh menetapkan gaya seperti lebar, jidar dan padding untuk mencapai reka letak utama halaman web:

.content {
  width: 70%;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
}

Dalam kod di atas, kami menetapkan lebar elemen kandungan Tetapkan kepada 70% daripada keseluruhan tetingkap dan selaraskan ke tengah di sebelah kiri dan kanan. Kami menetapkan jidar atas dan bawah kepada 20px melalui atribut margin, dan jidar kiri dan kanan kepada automatik, iaitu, penjajaran berpusat Pada masa yang sama, kami menetapkan jidar dalam kepada 20px melalui atribut padding untuk meninggalkan ruang tertentu untuk teks kandungan.

Untuk elemen bar sisi, anda boleh menetapkan gaya seperti lebar, warna latar belakang dan jidarnya:

.sidebar {
  width: 25%;
  float: right;
  background-color: #f2f2f2;
  padding: 20px;
  margin-left: 30px;
}

Dalam kod di atas, kami menetapkan lebar elemen bar sisi ke seluruh tetingkap 25% dan apungkannya ke kanan melalui atribut apungan. Kami menetapkan warna latar belakangnya kepada kelabu muda dan menetapkan padding kepada 20px melalui atribut padding untuk meninggalkan sejumlah ruang untuk kandungan bar sisi. Pada masa yang sama, jidar kiri ditetapkan kepada 30px melalui atribut kiri jidar untuk meninggalkan jarak tertentu dari elemen kandungan.

Untuk elemen bawah, anda boleh menetapkan ketinggian, warna latar belakang, warna teks dan gaya penjajarannya untuk mencapai gaya reka letak di bahagian bawah halaman web:

.footer {
  height: 40px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding-top: 10px;
  clear: both;
}

Dalam kod di atas, kita akan Ketinggian elemen ditetapkan kepada 40px, warna latar belakang adalah hitam, warna teks adalah putih, dan penjajaran dipusatkan. Pelapik atas ditetapkan kepada 10px melalui atribut padding-top untuk meninggalkan sejumlah ruang untuk kandungan teks bawah. Terapung di bawah elemen ditetapkan melalui atribut yang jelas untuk memastikan elemen bawah berada di bahagian bawah dan tidak bertindih dengan elemen lain.

3. Pratonton keputusan

Akhir sekali, kami menggabungkan kod HTML dan CSS untuk pratonton reka letak dan gaya halaman web yang dilaksanakan. Anda boleh membuka fail HTML dalam penyemak imbas untuk melihat kesan paparan akhir.

Apabila menggunakan divcss untuk susun atur halaman web dan reka bentuk gaya, anda perlu memberi perhatian kepada perkara berikut:

• Bahagikan dengan jelas elemen div setiap kawasan dalam HTML dan tetapkan kelas atau Atribut seperti id supaya pelayar boleh menggunakan CSS untuk penggayaan.
• Gunakan pemilih dalam CSS untuk menggayakan elemen div yang berbeza. Pastikan ketepatan dan keutamaan pemilih untuk mengelakkan konflik dan menulis ganti.
• Apabila berbilang elemen disusun dalam satu baris atau lajur, anda perlu memberi perhatian untuk menggunakan teknik seperti apungan dan apungan jelas untuk memastikan susunan dan susun atur elemen yang betul.
• Apabila reka letak halaman adalah kompleks, teknologi CSS seperti reka letak grid dan reka letak kotak fleksibel boleh digunakan untuk mencapai kesan reka letak yang lebih maju.

Ringkasnya, apabila membangunkan halaman web, menguasai langkah dan teknik divcss boleh membantu kami dengan cepat dan fleksibel melaksanakan reka bentuk dan gaya reka bentuk halaman web, serta meningkatkan kecekapan dan kualiti pembangunan.

Atas ialah kandungan terperinci langkah divcss. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!