Как сделать боковую панель в html css

Для создания боковой панели в HTML и CSS можно использовать несколько подходов.

1. Метод с использованием position:absolute:

<div class="sidebar">
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
  </ul>
</div>

.sidebar {
  position: absolute; /* установка позиционирование абсолютно */
  top: 0; /* установка позиции сверху */
  left: 0; /* установка позиции слева */
  width: 200px; /* установка ширины боковой панели */
  height: 100%; /* установка высоты боковой панели */
  background-color: #f1f1f1;
}

.sidebar ul {
  list-style: none; /* удаление стиля маркировки */
  padding: 0; /* удаление отступов вокруг списка */
  margin: 0; /* удаление внешних отступов */
}

.sidebar li {
  padding: 10px; /* установка внутренних отступов для элементов списка */
}

.sidebar a {
  text-decoration: none; /* удаление стиля декорации ссылок */
  color: #333; /* установка цвета текста ссылок */
}

2. Метод с использованием flexbox:

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">Ссылка 1</a></li>
      <li><a href="#">Ссылка 2</a></li>
      <li><a href="#">Ссылка 3</a></li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget est a felis tempus euismod. Fusce vitae elit ut mi mattis tristique. Nam a urna viverra, faucibus magna vel, imperdiet neque. Nam tortor felis, lacinia nec nisl sed, ullamcorper fermentum urna.</p>
  </div>
</div>

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
}

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

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

.sidebar li {
  padding: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #333;
}

В этом примере контейнер с классом «container» выстраивается при помощи flexbox. Элемент с классом «content» занимает все свободное пространство. Затем задается ширина, высота и цвет фона боковой панели. Ей также задается список элементов, который форматируется аналогично предыдущему методу.

Использование flexbox предпочтительнее, так как его гибкость позволяет более точно управлять позиционированием элементов внутри контейнера.