Cara membuat susun atur bar sisi web menggunakan HTML dan CSS

HTML dan CSS ialah dua teknologi yang paling biasa digunakan dalam reka bentuk web moden. Ia boleh digunakan untuk mencipta pelbagai jenis reka letak halaman web yang berbeza, termasuk reka letak bar sisi. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara menggunakan HTML dan CSS untuk mencipta reka letak bar sisi halaman web yang mudah, dengan contoh kod khusus.

Pertama, buat struktur dokumen HTML asas. Dalam teg

tambahkan teg untuk merujuk fail helaian gaya CSS. Kemudian, tambahkan kod berikut dalam teg sebagai struktur asas reka letak bar sisi:

<div class="container">
  <div class="sidebar">
    <ul class="sidebar-menu">
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</div>

Dalam kod di atas, bekas digunakan untuk membalut bar sisi dan kawasan kandungan(kandungan). Bar sisi menggunakan senarai tidak tertib (ul) sebagai bekas untuk item menu.

Seterusnya, gunakan CSS untuk menggayakan reka letak bar sisi. Tambahkan kod berikut dalam fail helaian gaya CSS luaran:

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #F2F2F2;
  padding: 20px;
}

.sidebar-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.content {
  flex-grow: 1;
  padding: 20px;
}

Dalam kod di atas, reka letak bar sisi dilaksanakan dengan menggunakan reka letak flexbox. Kelas .container ditetapkan kepada display: flex;, menjadikannya kotak yang fleksibel. .container类被设置为display: flex;，使其变为一个弹性盒子。

.sidebar类定义了侧边栏的样式，包括宽度（200px），背景颜色（#F2F2F2），和内边距（20px）。

.sidebar-menu类定义了菜单项的样式，包括去除了默认的列表样式（list-style-type: none;），并设置了0的内边距和边距。

.sidebar-menu li类定义了每个菜单项的样式，包括下边距（10px）。

.content类定义了内容区域的样式，使用flex-grow: 1;来填满剩余空间，并设置了内边距（20px）。

这样就完成了一个简单的网页侧边栏布局。你可以根据需要修改<li>

Kelas .sidebar mentakrifkan gaya bar sisi, termasuk lebar (200px), warna latar belakang (#F2F2F2) dan padding (20px).

Kelas .sidebar-menu mentakrifkan gaya item menu, termasuk mengalih keluar gaya senarai lalai (list-style-type: none;) dan menetapkannya kepada 0 padding dan margin.

Kelas .sidebar-menu li mentakrifkan gaya setiap item menu, termasuk jidar bawah (10px). 🎜🎜Kelas .content mentakrifkan gaya kawasan kandungan, menggunakan flex-grow: 1; untuk mengisi ruang yang tinggal dan menetapkan padding (20px). 🎜🎜Ini melengkapkan reka letak bar sisi web yang ringkas. Anda boleh mengubah suai item menu dalam teg <li> mengikut keperluan, atau menambah elemen HTML lain pada kawasan kandungan. 🎜🎜Untuk meringkaskan, anda boleh membuat reka letak bar sisi halaman web dengan mudah menggunakan HTML dan CSS. Dengan menggunakan flexbox dan beberapa definisi gaya asas, susun atur yang mudah tetapi berkesan boleh dicapai. Saya harap artikel ini membantu anda memahami dan menggunakan HTML dan CSS untuk membuat reka letak bar sisi! 🎜🎜(bilangan perkataan: 455)🎜

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