Создай страницу с помощью HTML и CSS, в котором будут находится 3 квадрата, находящиеся друг за другом. Первый будет, второй синим, третий зеленый.
html
<!DOCTYPE html>
<html>
<head>
<title>Три квадрата</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="square red"></div>
<div class="square blue"></div>
<div class="square green"></div>
</body>
</html>
Здесь у нас есть три элемента div с классами "square red" (красный квадрат), "square blue" (синий квадрат) и "square green" (зеленый квадрат).
Теперь создадим файл styles.css, чтобы добавить стили к нашим квадратам.
css
.square {
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
Здесь мы задали общие стили для всех квадратов с классом "square", такие как ширина, высота и отступ снизу. Затем мы определили цвета для каждого отдельного класса: красный для класса "red", синий для класса "blue" и зеленый для класса "green".
Теперь, когда у нас есть файл стилей и HTML-структура, мы можем сохранить оба файла в одном каталоге и открыть файл HTML в веб-браузере. Вы должны увидеть три квадрата один за другим, красный, синий и зеленый. Каждый квадрат имеет размеры 100 на 100 пикселей и имеет отступ снизу 20 пикселей.
Здесь у нас есть простой пример создания страницы с тремя квадратами разных цветов. Конечно, это только начало, и вы можете дополнить эту страницу различными элементами и стилями, чтобы сделать ее более интересной и интерактивной.Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет
Нажимая «Регистрация» или «Войти через Google», вы соглашаетесь с Публичной офертой, даете Согласие на обработку персональных данных, а также подтверждаете что вам есть 18 лет