В прошлом совете я рассказывал, как управлять отступами в тексте и как раскладывать элементы на странице флоатами и позиционированием. В этом совете — о том, как верстать картинки, списки и таблицы.
Добавим иллюстрацию в резюме Остапа Бендера:
<style>
body {
/*
* Настраиваем основной текст:
* Бюросериф, кегль 20 пикселей,
* интерлиньяж 27 пикселей.
* Если Бюросерифа нет — Джорджия.
*/
font-family: Bureauserif, Georgia, serif;
font-size: 20px;
line-height: 27px;
}
h3 {
/*
* Для заголовков третьего уровня
* используем жирный Бюросанс.
* Если Бюросанса нет — Гельветика.
*/
font-family: Bureausans, Helvetica Neue,
sans-serif;
font-weight: bold;
/*
* Добавляем отступ снизу,
* чтобы попасть в интерлиньяж.
*/
margin: 0 0 .1em 0;
}
p {
/*
* Выставляем нижний отступ
* в 88% от кегля.
*/
margin: 0 0 .88em 0;
}
img {
/*
* Делаем изображения
* блочными элементами.
*/
display: block;
/*
* Делаем изображения «резиновыми»:
* задаем максимальную ширину в 100%.
*/
max-width: 100%;
height: auto;
/*
* Добавляем увеличенный отступ
* после изображений.
*/
margin-bottom: 2em;
}
</style>
<section>
<h3>Аферы</h3>
<p>
В Пятигорске продавал отдыхающим билеты
для входа в открытый для всех «Провал»
«с целью капитального ремонта Провала.
Чтобы не слишком проваливался»:
</p>
<!--
src — ссылка на картинку,
alt — альтернативный текст,
который видят скринридеры
и ребята с отключенными картинками.
Задаём width и height, чтобы
браузер сразу знал, сколько места
резервировать для картинки.
Если их не задать, браузер
определит размеры картинки после
её загрузки и страница «прыгнет».
-->
<img
src="http://bureau.ru/bb/soviet/20170831/proval.jpg"
alt="Пятигорск, вход в «Провал»"
width="1200" height="883">
<p>
В городе Арбатове выдал себя за сына
лейтенанта Шмидта и получил
от председателя горисполкома
небольшую материальную помощь.
</p>
</section>
Списки
Нумерованные списки задаются тегом <ol> (ordered list), ненумерованные — тегом <ul> (unordered list). В обоих случаях элементы списка задаются тегом <li> (list item):
<style>
ol, ul {
/*
* Убираем отступы списков,
* которые браузеры ставят
* по умолчанию.
*/
margin: 0;
padding: 0;
}
ol li {
/*
* Для элементов нумерованного
* списка используем
* арабские числа.
*/
list-style: decimal outside;
/*
* Каждому элементу списка
* добавляем нижний отступ,
* чтобы они не слипались
* друг с другом.
*/
margin: 0 0 .44em 0;
}
ul li {
/*
* Прячем маркеры
* элементов ненумерованного
* списка.
*/
list-style: none;
/*
* Каждому элементу списка
* добавляем нижний отступ,
* чтобы они не слипались
* друг с другом.
*/
margin: 0 0 .44em 0;
/*
* Задаём левый внутренний
* отступ для втяжки.
*/
padding-left: 30px;
}
.first {
/*
* Обнуляем нижний отступ
* у абзацев, идущих перед
* списками.
*/
margin-bottom: 0;
}
</style>
<p class="first">
Четыре факта о пешеходах, которые необходимо
помнить автомобилистам:
</p>
<ol>
<li>
Пешеходы составляют большую часть
человечества.
Мало того — лучшую его часть.
Пешеходы создали мир.
</li>
<li>
Автомобиль тоже был изобретён пешеходами.
Но автомобилисты об этом как-то
сразу забыли.
Кротких и умных пешеходов стали давить.
Улицы, созданные пешеходами,
перешли во власть автомобилистов.
</li>
<li>
В большом городе пешеходы ведут
мученическую жизнь.
Для них ввели некое транспортное гетто.
Пешеходам разрешают переходить улицы
только на перекрёстках,
то есть именно в тех местах,
где движение сильнее всего и где волосок,
на котором обычно висит жизнь пешехода,
легче всего оборвать.
</li>
<li>
Если пешеходу иной раз удаётся выпорхнуть
из-под серебряного носа машины —
его штрафует милиция за нарушение
правил уличного катехизиса.
</li>
</ol>
<p class="first">Коллектив «Рогов и копыт»:</p>
<ul>
<li>
зицпредседатель Фунт;
</li>
<li>
управляющий отделением Остап Бендер;
</li>
<li>
уполномоченный по рогам
и копытам Шура Балаганов;
</li>
<li>
курьер Михаил Самуэлевич Паниковский.
</li>
</ul>Таблицы
Таблицы задаются тегом <table>, шапка таблицы — тегом <thead> (table header), содержимое — тегом <tbody> (table body). Строки таблицы задаются тегом <tr> (table row). Ячейки задаются тегом <td> (table data cell) в содержимом, <th> (table header cell) в шапке.
Сверстаем таблицу с экранизациями погони Остапа Бендера за гражданином Корейко:
<style>
table {
/*
* Убираем отступы между
* ячейками таблицы.
*/
border-collapse: collapse;
}
td {
/*
* Настраиваем шрифт для ячеек:
* Бюросанс, 14/17 пк.
*/
font-family: Bureausans, Helvetica Neue,
sans-serif;
font-size: 14px;
line-height: 17px;
/*
* Добавляем ячейкам отступы:
* 14 пк справа, 7 пк сверху.
*/
padding: .5em 1em 0 0;
/*
* Выравниваем содержимое ячеек
* влево вверх.
*/
text-align: left;
vertical-align: top;
}
th {
/*
* Настраиваем шрифт для шапки:
* жирный Бюросанс, 14/17 пк.
*/
font-family: Bureausans, Helvetica Neue,
sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 17px;
/*
* Добавляем нижнюю рамку к шапке.
* Толщиной в 0,5 пикселя, сплошная,
* черного цвета с прозрачностью 25%.
*/
border-bottom: .5px solid rgba(0, 0, 0, .25);
/*
* Добавляем ячейкам шапки отступ
* 14 пк справа.
*/
padding: 0 1em 0 0;
/*
* Выравниваем содержимое шапки
* влево вниз.
*/
text-align: left;
vertical-align: bottom;
}
</style>
<table>
<thead>
<tr>
<th>Год</th>
<th>Страна</th>
<th>Название</th>
<th>Режиссёр</th>
</tr>
</thead>
<tbody>
<tr>
<td>1968</td>
<td>СССР</td>
<td>Золотой телёнок</td>
<td>Михаил Швейцер</td>
</tr>
<tr>
<td>1969</td>
<td>Чехословакия</td>
<td>Командовать парадом буду я</td>
<td>Ярослав Мах</td>
</tr>
<tr>
<td>1974</td>
<td>Венгрия</td>
<td>Золотой телёнок</td>
<td>Миклош Синетар</td>
</tr>
<tr>
<td>1993</td>
<td>Россия, Франция</td>
<td>Мечты идиота</td>
<td>Василий Пичул</td>
</tr>
<tr>
<td>2006</td>
<td>Россия</td>
<td>Золотой телёнок</td>
<td>Ульяна Шилкина</td>
</tr>
</tbody>
</table>| Год | Страна | Название | Режиссёр |
|---|---|---|---|
| 1968 | СССР | Золотой телёнок | Михаил Швейцер |
| 1969 | Чехословакия | Командовать парадом буду я | Ярослав Мах |
| 1974 | Венгрия | Золотой телёнок | Миклош Синетар |
| 1993 | Россия, Франция | Мечты идиота | Василий Пичул |
| 2006 | Россия | Золотой телёнок | Ульяна Шилкина |
Что запомнить
Для картинок — тег
<img>. Лучше указать размеры изображения в атрибутах width и height, чтобы не было «упячки».Для нумерованного и ненумерованного списков — теги
<ol>и<ul>. Элементы списка —<li>.Для таблиц — тег
<table>. Строки таблицы —<tr>, ячейки —<td>.
Что дальше
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.