Создание адаптивной веб-страницы с несколькими секциями — это важный навык для современных веб-разработчиков. В этой статье я расскажу вам, как это сделать, используя HTML и CSS.
Адаптивная страница — это страница, которая хорошо отображается на различных устройствах, таких как настольные компьютеры, планшеты и мобильные телефоны. Для достижения этой цели мы будем использовать гибкие макеты, медиа-запросы и относительные единицы измерения.
Шаг 1: Создание структуры HTML
Начнем с создания базовой структуры HTML. В этом примере мы создадим страницу с несколькими секциями: заголовком, о нас, услугами и контактной информацией.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивная страница</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Добро пожаловать на наш сайт</h1>
</header>
<section id="about">
<h2>О нас</h2>
<p>Мы - компания, занимающаяся разработкой веб-сайтов и приложений.</p>
</section>
<section id="services">
<h2>Наши услуги</h2>
<ul>
<li>Разработка веб-сайтов</li>
<li>Создание мобильных приложений</li>
<li>SEO-оптимизация</li>
</ul>
</section>
<section id="contact">
<h2>Контакты</h2>
<p>Вы можете связаться с нами по электронной почте: <a href="mailto:in**@ex*****.com" data-original-string="gxeANhYRdRu1BRXEnhCqtA==8c9uH+B8IpbPZeOdBW+sHGkhF40fPd9MFe+uXcZxrwqUOo=" title="Этот контакт закодирован плагином Anti-Spam by CleanTalk. Нажмите на текст для декодирования. Также убедитесь, что в вашем браузере включён JavaScript.">in**@ex*****.com</a></p>
</section>
<footer>
<p>© 2023 Наша компания</p>
</footer>
</body>
</html>
Шаг 2: Стилизация с помощью CSS
Теперь, когда у нас есть структура HTML, давайте добавим стили с помощью CSS. Мы будем использовать Flexbox для создания адаптивного макета.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
}
section {
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
h2 {
color: #333;
}
footer {
text-align: center;
padding: 1em 0;
background-color: #f2f2f2;
}
@media (max-width: 600px) {
body {
padding: 0 10px;
}
section {
margin: 5px 0;
}
}
В этом CSS мы определили базовые стили для тела страницы, заголовка, секций и подвала. Мы также добавили медиа-запрос, чтобы изменить отступы и размеры элементов на мобильных устройствах.
Шаг 3: Проверка адаптивности
Чтобы убедиться, что наша страница адаптивна, откройте ее в браузере и измените размер окна. Вы должны увидеть, как элементы страницы перестраиваются в зависимости от ширины экрана. Это достигается благодаря использованию Flexbox и медиа-запросов.
Таким образом, мы создали простую адаптивную страницу с несколькими секциями. Это базовый пример, который можно расширять и улучшать, добавляя больше стилей, интерактивности с помощью JavaScript и других технологий.
Использование HTML и CSS для создания адаптивных страниц — это ключевой навык, который поможет вам в веб-разработке. Надеюсь, это руководство было полезным!