Блочная и строчная модель. Часть 2: display и строчные элементы
Чтение — около 6 минут· без учёта практики
В предыдущем уроке мы задали отступы блоков. У строчных элементов они ведут себя иначе. Разберём это поведение и выстроим меню сайта в строку.
Строчные элементы
До сих пор мы рассматривали блоки, которые стоят друг под другом. Но браузер располагает так не все элементы. По тому, как элемент встаёт в поток документа, их делят на два основных типа:
- блочные (англ. block);
- строчные (англ. inline).
Блочный элемент начинается с новой строки, и после него следующий элемент тоже начинается с новой строки. По
ширине обычный блок с width: auto занимает доступное место с учётом отступов.
Таблицы и изображения имеют особые правила размеров и не обязаны растягиваться. Блочные элементы — это абзацы
<p>,
заголовки, списки
<ul>
и
<ol>,
их пункты
<li>,
таблицы
<table>,
разделы
<section>,
блоки
<div>
и другие элементы. Это примеры, а не полный список.
Строчный элемент не начинается с новой строки, а располагается в строке вместе с текстом и при нехватке места
переносится, как слова. Например, слово, выделенное элементом
<b>,
остаётся в той же строке абзаца. Строчные элементы — это ссылки <a>, выделения
<strong>, <em>, <span> и другие элементы внутри текста.
К обоим типам можно применять цвет, фон, шрифт и рамки, а вот отступы строчных элементов работают по-другому:
Отступы строчного элемента: попробуйте сами
Чтобы увидеть расположение строк без лишних переносов, разверните пример на весь экран или перетащите разделитель между кодом и результатом, расширив область результата. Слова «три года» раздвинулись только по горизонтали. Фон и рамка вышли за строку и наложились на соседние строки, но сами строки не раздвинулись. Попробуйте margin: 0 30px — по вертикали ничего не изменится.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Отступы строчного элемента</title>
<style>
b {
margin: 30px; /* внешние отступы: работают только слева и справа */
padding: 30px; /* внутренние отступы: расширяют фон, но не раздвигают строки */
background-color: khaki;
border: 1px solid;
}
</style>
</head>
<body>
<p>Я карликовый пинчер. Мне <b>три года</b>, я вешу 8 кг и люблю гулять в любую погоду.</p>
<p>Хозяин бросает мне канат с мячиком, а я приношу его обратно.</p>
</body>
</html>
Мы задали элементу <b> отступы со всех сторон по 30px, рамку и фон. Результат:
- Внешние отступы работают только слева и справа: сверху и снизу браузер их не учитывает.
- Внутренние отступы сверху и снизу расширяют фон и рамку, но не раздвигают строки: высота строки остаётся прежней.
- Поэтому фон и рамка наслаиваются на соседние строки.
Блочно-строчные элементы
Если элементу нужно остаться в строке, но получить отступы как у блока, используйте свойство
display
со значением inline-block:
Блочно-строчный элемент: попробуйте сами
Те же отступы, но теперь элемент b раздвигает строку по вертикали и не наезжает на соседние строки. Удалите display: inline-block и сравните.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Блочно-строчный элемент: inline-block</title>
<style>
b {
display: inline-block; /* остаётся в строке, но отступы работают как у блока */
margin: 30px;
padding: 30px;
background-color: khaki;
border: 1px solid;
}
</style>
</head>
<body>
<p>Я карликовый пинчер. Мне <b>три года</b>, я вешу 8 кг и люблю гулять в любую погоду.</p>
<p>Хозяин бросает мне канат с мячиком, а я приношу его обратно.</p>
</body>
</html>
Такой элемент снаружи участвует в строчном расположении как единое целое, а внутри размещает содержимое по блочным правилам. У него учитываются все отступы, ему можно задать ширину и высоту. Такие элементы называют блочно-строчными. Этим приёмом мы выстроим в строку меню сайта Тони.
Свойство display
display.
Тип элемента задают стили браузера, но его можно изменить свойством display. Строчным элемент станет так:
селектор {
display: inline;
}
Блочным — так:
селектор {
display: block;
}
Значение none скрывает элемент: он не показывается и не занимает места на странице. Им скрывают элементы
на устройствах определённого размера (это пригодится в адаптивной вёрстке) или по действию пользователя с помощью
скриптов.
Свойство display: попробуйте сами
Вторая ссылка стала блочной и заняла всю строку, пункты списка выстроились в строку, а третий абзац скрыт. Уберите display: none — абзац появится между двумя другими.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Свойство display: block, inline и none</title>
<style>
.as-block {
display: block; /* ссылка занимает всю строку */
background-color: linen;
}
.as-inline {
display: inline; /* пункты списка стоят в строку */
}
.hidden {
display: none; /* элемент не показывается и не занимает места */
}
</style>
</head>
<body>
<p>Ссылки: <a href="#">обычная</a> и <a href="#" class="as-block">ставшая блочной</a></p>
<ul>
<li class="as-inline">Главная</li>
<li class="as-inline">Мои игрушки</li>
<li class="as-inline">Запись на прогулку</li>
</ul>
<p>Видимый абзац.</p>
<p class="hidden">Этот абзац скрыт.</p>
<p>Ещё один видимый абзац.</p>
</body>
</html>
У свойства display есть и другие значения, например flex и grid, которые
выстраивают вложенные элементы в ряды и сетки; внешние отступы между этими элементами не схлопываются.
Подробнее об этих способах расположения элементов вы узнаете дальше в учебнике — в уроках о
Flexbox и
Grid.
Скрыть элемент или сделать прозрачным
Если временно ненужный блок должен исчезнуть вместе со своим местом, подходит display: none.
Когда место нужно сохранить, используют
visibility: hidden.
Знакомое по уроку о цвете opacity: 0 делает элемент полностью прозрачным: его не видно,
но он сохраняет место на странице, а ссылки и кнопки по-прежнему могут принимать нажатия и фокус с клавиатуры.
| Правило | Место на странице | Взаимодействие |
|---|---|---|
display: none | Не занимает | Элемент и его потомки недоступны для нажатия и перехода по Tab. |
visibility: hidden | Сохраняется | Скрытый элемент не получает фокус и нажатия. Потомок с явно заданным visibility: visible может быть видимым и доступным. |
opacity: 0 | Сохраняется | Ссылка или кнопка остаётся доступной для нажатия и перехода по Tab, хотя её не видно. |
display: none и скрытое состояние visibility обычно исключают содержимое из дерева
доступности (представления страницы для вспомогательных программ, например программ экранного чтения,
которые озвучивают содержимое пользователю); одна прозрачность этого не делает. Поэтому не скрывайте неактивную панель только через
opacity: 0: невидимые элементы управления будут мешать посетителю.
В примере выше замените у скрытого абзаца display: none сначала на
visibility: hidden, затем на opacity: 0. Сравните расстояние между соседями.
Верните абзац и примените эти правила по очереди ко второй ссылке. Кликните по первой ссылке в результате,
затем нажмите Tab: при прозрачности фокус сможет попасть на невидимую ссылку.
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
Задание
Ожидаемый результат: на всех страницах пункты меню стоят в строку (в узком окне последний переносится, как
слово в тексте), шапка и подвал занимают всю ширину окна, а
основной текст отступает от краёв. Фон вводного блока на главной начинается вплотную над заголовком, а текст внутри
отделён от края блока. Перейдите к меню клавишей Tab: рамка фокуса охватывает пункт вместе с внутренними
отступами. Объясните, почему без display: inline-block у ссылок меню вертикальные отступы не
раздвигают шапку.
Выполните задание
Условие задания
css/style.css
/* Общие стили сайта Тони */
/* Шрифт заголовков Nunito (лицензия SIL Open Font License): кириллица и латиница в разных файлах */
@font-face {
font-family: "Nunito";
src: url("../assets/nunito-cyrillic-800-normal.woff2") format("woff2");
font-weight: 800;
font-display: swap; /* пока шрифт загружается, текст виден запасным шрифтом */
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Nunito";
src: url("../assets/nunito-latin-800-normal.woff2") format("woff2");
font-weight: 800;
font-display: swap;
unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
body {
background-color: linen;
color: #2b211b; /* цвет для потомков без собственного значения */
font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* системный шрифт устройства */
line-height: 1.6; /* множитель: у каждого элемента интервал от его собственного размера шрифта */
margin: 0; /* убираем отступ браузера: шапка и подвал во всю ширину окна */
}
/* Поля основного содержимого: текст не прижимается к краям окна */
main {
padding: 1.5rem 1rem;
}
/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
color: saddlebrown;
font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
font-weight: 800;
line-height: 1.2; /* крупному тексту хватает меньшего интервала */
}
/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
text-align: center;
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
/* Вводный блок главной страницы */
.intro {
background-color: hsl(30, 80%, 95%);
padding: 1.5rem; /* фон вокруг текста; заодно не выпускает margin заголовка за пределы блока */
}
/* Ширина вводных абзацев ограничена 60ch; количество букв в строке зависит от шрифта и текста */
.intro p {
max-width: 60ch;
}
/* Важное предупреждение во вводном блоке — темнее основного акцента */
.intro strong {
color: #6e3510;
}
/* Оглавление главной страницы */
.toc {
background-color: white;
border: 1px solid tan;
}
/* Подчёркивание ссылок чуть ниже букв: не задевает выносные элементы */
a {
text-underline-offset: 3px;
}
/* Ссылки меню в шапке — селектор потомков */
nav a {
color: saddlebrown;
text-decoration: none;
}
/* Ссылки оглавления главной страницы */
.toc a {
color: #6b5d52; /* тёплый серый: контраст 6.34:1 на белом фоне оглавления */
}
figcaption {
color: #6b5d52; /* тёплый серый: контраст 5.64:1 на фоне linen */
font-size: 0.95rem;
}
footer {
background-color: hsl(30, 50%, 90%);
text-align: center;
padding: 1rem;
}
/* Ссылка в подвале берёт цвет текста подвала */
footer a {
color: inherit;
}
/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
font: inherit;
}
/* Ссылки темнеют при наведении указателя */
a:hover {
color: #5c2d0c;
}
/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
}
/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
outline: 3px solid #1f6feb;
outline-offset: 3px;
}
/* Цитата из книги — шрифтом с засечками и курсивом */
blockquote {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
}
/* Подпись под цитатой — у правого края */
blockquote + figcaption {
text-align: right;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<div class="intro">
<h1 id="top">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
</div>
<ul class="toc">
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section>
<h2 id="toy">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption>Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2>Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule">Мой режим дня</h2>
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="progress">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2>Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
<title>Запись на прогулку с Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label><br>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
<title>Игрушки Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul>
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul>
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
<title>Где гуляет Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Продолжите в VS Code
Добавьте те же правила в css/style.css своей папки my-site, сохраните файл и пройдите все
четыре страницы сайта. Проверьте на вкладке Computed схему блочной модели вводного блока. Если результат отличается,
нажмите в редакторе «Показать решение» и сравните его со своим кодом.
Дополнительные задачи
Задача 1. Вертикальное меню. Оформите список ссылок как меню на всю ширину страницы: чёрный фон, белый текст
без подчёркивания, внутренние отступы у ссылок, при наведении фон ссылки — orangered. Уберите маркеры и
отступы списка: list-style: none, margin: 0 и padding: 0 у <ul>
(подробнее о списках — в уроке
«Работа со списками»).
Подсказка: подумайте, что нужно сделать со ссылками, чтобы их внутренние отступы работали со всех сторон, а подсветка занимала всю строку меню.
Ожидаемый результат: четыре пункта меню друг под другом на чёрном фоне; при наведении на пункт подсвечивается вся его строка, а не только текст.
Дополнительное задание: вертикальное меню
Расположите четыре пункта друг под другом и сделайте подсветку всей строки при наведении.
Условие задания
Подсказка
Уберите маркеры и стандартные отступы списка. Блочная ссылка занимает ширину строки; отступы и фон при наведении задавайте самой ссылке.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Дополнительная задача: вертикальное меню</title>
<style>
ul {
list-style: ???; /* без маркеров */
margin: 0;
padding: ???;
background-color: ???; /* фон всего меню: промежутки между пунктами тоже чёрные */
}
a {
display: ???; /* у блочной ссылки работают все отступы, и она кликабельна по всей ширине */
padding: ???;
color: white;
text-decoration: none;
}
a:hover {
background-color: ???;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</body>
</html>
Задача 2. Горизонтальное меню. Сделайте из того же списка меню в одну строку.
Подсказка: что нужно сделать с пунктами списка, чтобы они выстроились в строку?
Ожидаемый результат: пункты стоят в строку на чёрной полосе во всю ширину; при наведении подсвечивается весь
пункт. Между пунктами видны небольшие промежутки — это пробелы между элементами <li> в HTML-коде:
блочно-строчные элементы стоят в строке, как слова.
Дополнительное задание: горизонтальное меню
Расположите пункты в строку на общей чёрной полосе. Подсветка должна занимать весь пункт.
Условие задания
Подсказка
Сделайте li блочно-строчными, а ссылки — блочными. Фон полосы задайте ul. Пробелы между li остаются промежутками, как между словами.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Дополнительная задача: горизонтальное меню</title>
<style>
li {
display: ???; /* пункты выстраиваются в строку */
}
ul {
list-style: ???; /* без маркеров */
margin: 0;
padding: ???;
background-color: ???; /* фон всего меню: промежутки между пунктами тоже чёрные */
}
a {
display: ???; /* у блочной ссылки работают все отступы, и она кликабельна по всей ширине */
padding: ???;
color: white;
text-decoration: none;
}
a:hover {
background-color: ???;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</body>
</html>