Cara menggunakan HTML dan CSS untuk melaksanakan reka letak bar navigasi sisi tetap

Bar navigasi ialah bahagian yang sangat penting dalam reka letak halaman web dan reka letak bar navigasi sisi tetap ialah corak reka bentuk biasa. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak bar navigasi sisi tetap yang ringkas dan memberikan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu mencipta struktur asas dalam fail HTML. Berikut ialah contoh mudah:

Dalam kod di atas, kami mencipta elemen bekas bernama "bekas", yang mengandungi dua elemen anak, iaitu "bar sisi" dan "kandungan utama". "bar sisi" digunakan untuk meletakkan bar navigasi, dan "kandungan utama" digunakan untuk meletakkan kandungan utama halaman.

2. Gaya CSS

Seterusnya, kita perlu menggunakan CSS untuk menentukan gaya bekas dan bar navigasi. Berikut ialah contoh gaya mudah:

.container { display: flex; } .sidebar { width: 20%; background-color: #f1f1f1; position: fixed; height: 100%; } .main-content { margin-left: 20%; padding: 20px; }

Dalam kod di atas, kami mencapai susunan kiri dan kanan bar navigasi dan kandungan utama dengan menetapkan "bekas" kepada susun atur "flex". Tetapkan lebar "bar sisi" kepada 20%, warna latar belakang kepada kelabu, dan letakkannya kepada tetap supaya ia ditetapkan pada sebelah kiri skrin. Jidar kiri "kandungan utama" ditetapkan kepada 20% dan beberapa padding ditambahkan untuk memastikan kandungan tidak dikaburkan oleh bar navigasi.

3. Pengisian kandungan

Seterusnya, kita boleh mengisi kandungan sebenar di bahagian navigasi bar dan kandungan utama mengikut keperluan kita.

 
 
首页
 
关于我们
 
产品
 
联系我们
 
 
 
 
欢迎访问我们的网站
 
这里是主要内容区域，您可以在这里显示具体的页面内容。
 

Dalam kod di atas, kami telah mencipta senarai tidak tertib dalam elemen "bar sisi" dan menambah beberapa pautan navigasi dalam item senarai. Dalam elemen "kandungan utama", kami menambah tajuk dan teks untuk memaparkan kandungan utama halaman.

4. Kod penuh

     
  
 
 
 
首页
 
关于我们
 
产品
 
联系我们
 
 
 
 
欢迎访问我们的网站
 
这里是主要内容区域，您可以在这里显示具体的页面内容。
 
 
  

.container { display: flex; } .sidebar { width: 20%; background-color: #f1f1f1; position: fixed; height: 100%; } .main-content { margin-left: 20%; padding: 20px; }

Dengan contoh kod di atas, kami telah berjaya melaksanakan susun atur bar navigasi sisi tetap yang mudah. Anda boleh melaraskan gaya dan mengisi kandungan mengikut keperluan anda untuk mencapai kesan yang lebih kompleks dan pelbagai. Ini adalah contoh asas yang saya harap akan membantu pembelajaran dan amalan anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur bar navigasi sisi tetap menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!