В прошлом совете я рассказывал, как управлять отступами в тексте и как раскладывать элементы на странице флоатами и позиционированием. В этом совете — о том, как верстать картинки, списки и таблицы.

Добавим иллюстрацию в резюме Остапа Бендера:

<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы