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.
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.
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.
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.
.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!