Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan susun atur bar navigasi sisi tetap menggunakan HTML dan CSS
Bagaimana untuk melaksanakan susun atur bar navigasi sisi tetap menggunakan HTML dan CSS
- PHPzasal
- 2023-10-28 08:57:27939semak imbas
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.
- Struktur HTML
Pertama, kita perlu mencipta struktur asas dalam fail HTML. Berikut ialah contoh mudah:
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 导航栏内容 -->
</div>
<div class="main-content">
<!-- 页面主要内容 -->
</div>
</div>
</body>
</html>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.
- 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.
- Pengisian kandungan
Seterusnya, kita boleh mengisi kandungan sebenar di bahagian navigasi bar dan kandungan utama mengikut keperluan kita.
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>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.
- Kod penuh
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>
</div>
</body>
</html>.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!