Привет) Для создания вертикальных блоков и контейнеров на веб-сайте с использованием HTML и CSS, необходимо следовать некоторым шагам.
1. Создание HTML-структуры:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vertical Blocks Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<div class="block" id="block1">
<p>Block 1</p>
</div>
<div class="block" id="block2">
<p>Block 2</p>
</div>
<div class="block" id="block3">
<p>Block 3</p>
</div>
</div>
</body>
</html>
```
2. Создание CSS-стилей в файле styles.css:
```css
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
background-color: lightgray;
}
.block {
width: 100%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
#block1 {
background-color: lightblue;
}
#block2 {
background-color: lightgreen;
}
#block3 {
background-color: lightcoral;
}
```
3. Результат:
В данном примере мы создали контейнер с тремя вертикальными блоками, используя flexbox в CSS для управления их расположением и стилями. Каждый блок имеет равную высоту и цвет фона, а контейнер занимает всю высоту экрана (100vh) и выравнивает блоки по центру. Вы можете настраивать свойства CSS для достижения желаемого визуального эффекта. Надеюсь, это поможет вам создать вертикальные блоки на вашем веб-сайте. Если у вас есть другие вопросы, не стесняйтесь обращаться!