Разберём простой, но рабочий шаблон страницы для блога. Он уже включает адаптивную вёрстку, семантические теги и CSS-переменные — то, что реально пригодится в первых проектах. Без лишней теории: смотрим на код и сразу понимаем, за что отвечает каждая часть.
HTML: каркас страницы
HTML-код задаёт структуру: где будет шапка, контент, боковые панели и подвал.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Блог: полезные статьи</title> <link rel="stylesheet" href="site.css"> </head> <body> <div class="site-wrapper"> <header> <div class="container header-content"> <a href="/" class="logo">Website</a> <nav> <ul> <li><a href="/">Главная</a></li> <li><a href="/articles">Статьи</a></li> <li><a href="/about">О проекте</a></li> </ul> </nav> </div> </header> <div class="main-wrapper"> <aside class="sidebar-left"> Левая панель </aside> <main class="container"> Статьи </main> <aside class="sidebar-right"> Правая панель </aside> </div> <footer> <p>© 2026 Website. Все права защищены.</p> </footer> </div> </body> </html>
Что здесь важно
<!DOCTYPE html>— сообщает браузеру, что это современный HTML5. Без него браузер может включить «режим совместимости», и вёрстка поедет.<html lang="ru">— указывает язык страницы. Это полезно и для поисковиков, и для скринридеров.<meta charset="utf-8">— кодировка, без которой вместо русских букв могут появиться «кракозябры».<meta name="viewport" ...>— ключевой тег для адаптивности: страница будет корректно масштабироваться на телефонах и планшетах.- Семантические теги (
header,main,aside,footer) делают код понятным не только человеку, но и поисковым роботам.
Как устроена сетка
Структура построена на обёртках и Flexbox:
.site-wrapper— ограничивает ширину сайта и центрирует его..main-wrapperсdisplay: flexвыстраивает левую панель, основной контент и правую панель в ряд.- На мобильных устройствах (через медиа-запросы) боковые панели скрываются, а блоки встают друг под другом.
CSS: стили и адаптивность
CSS делает страницу аккуратной и удобной. Здесь использованы CSS‑переменные, чтобы легко менять цветовую схему в одном месте.
:root { --bg-body: #f5f7fa; --bg-card: #ffffff; --text-main: #2c3e50; --text-muted: #7f8c8d; --accent: #3498db; --accent-hover: #2980b9; --border: #e0e6ed; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg-body); color: var(--text-main); line-height: 1.6; } a { text-decoration: none; color: inherit; } ul { list-style: none; } .site-wrapper { max-width: 1400px; margin: 0 auto; padding: 0 10px; } header { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 20px 10px; margin-top: 10px; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.5rem; color: var(--accent); } nav ul { display: flex; gap: 24px; } nav a:hover { color: var(--accent); } .main-wrapper { display: flex; gap: 10px; margin: 10px 0; } .sidebar-left, .sidebar-right { border: 1px solid var(--border); background: var(--bg-card); padding: 20px; border-radius: 5px; flex: 0 0 240px; } main.container { flex: 1; border: 1px solid var(--border); background: var(--bg-card); border-radius: 5px; padding: 20px; } footer { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; text-align: center; padding: 15px 0; color: var(--text-muted); font-size: 0.9rem; margin-top: 10px; }
Практические примеры
Пример 1: меняем цветовую тему.
Допустим, вы хотите сделать сайт в тёмных тонах. Достаточно поменять значения в :root:
:root { --bg-body: #1a1a1d; --bg-card: #2b2b30; --text-main: #e0e0e0; --text-muted: #999; --accent: #4facfe; --accent-hover: #00c6ff; --border: #444; }
Вся страница сразу станет тёмной — и не придётся переписывать десятки правил.
Пример 2: добавляем иконку к логотипу.
Можно вставить SVG прямо в HTML:
<a href="/" class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 9h18M3 15h18M5 3v18M19 3V21"/> </svg> Website </a>
И в CSS чуть подправить выравнивание:
.logo { display: flex; align-items: center; gap: 8px; /* остальные стили остаются как раньше */ }
Пример 3: делаем кнопки в сайдбаре.
В левой панели можно разместить быстрые ссылки-кнопки:
<aside class="sidebar-left"> <h3>Навигация</h3> <ul> <li><a href="/tags" class="btn-link">Все теги</a></li> <li><a href="/archive" class="btn-link">Архив</a></li> </ul> </aside>
А стили:
Адаптивность: как сайт ведёт себя на разных экранах
В конце CSS есть медиа-запросы — они меняют поведение макета при уменьшении ширины экрана:
- При ширине до 1024 px боковые панели остаются, но выстраиваются вертикально.
- При ширине до 768 px сайдбары скрываются (
display: none), а навигация переносится под логотип и выравнивается по центру.
Это простой, но надёжный способ сделать сайт читаемым и на компьютере, и на смартфоне.
Загрузка...