Comment créer une mise en page de barre latérale Web en utilisant HTML et CSS

HTML et CSS sont deux des technologies les plus couramment utilisées dans la conception Web moderne. Ils peuvent être utilisés pour créer différents types de mises en page de pages Web, y compris des mises en page de barre latérale. Dans cet article, nous présenterons en détail comment utiliser HTML et CSS pour créer une mise en page simple de la barre latérale d'une page Web, avec des exemples de code spécifiques.

Tout d’abord, créez une structure de document HTML de base. Dans la balise

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

Dans le code ci-dessus, un conteneur est utilisé pour envelopper la barre latérale et la zone de contenu (contenu). La barre latérale utilise une liste non ordonnée (ul) comme conteneur pour les éléments de menu.

Ensuite, utilisez CSS pour styliser la disposition de la barre latérale. Ajoutez le code suivant dans le fichier de feuille de style CSS externe :

.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;
}

Dans le code ci-dessus, la disposition de la barre latérale est implémentée à l'aide de la disposition flexbox. La classe .container est définie sur display: flex;, ce qui en fait une boîte flexible. .container类被设置为display: flex;，使其变为一个弹性盒子。

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

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!