Еще в версии CSS 2.1 был селектор, соответствующий первому элементу списка: li:first-child.
Однако в CSS3 появился селектор, который соответствует последнему элементу списка Li:last-child.
Если использовать эти селекторы сообща, то у нас не будет необходимости в дополнительных классах в нашей разметке.
Откорректируем навигацию сайта And the winner isn’t., задействовав эти селекторы в сочетании со свойством display: table. На рисунке 5.7 показано, как все выглядит на текущий момент.
Теперь взглянем на графический макет (рисунок 5.8).
Ссылки на навигационной панели растянуты на всю ширину дизайна, и нам необходимо это воспроизвести. Наша разметка для навигационной области выглядит так:
<nav role="navigation">
<ul>
<li><a href="#">Why?</a></li>
<li><a href="#">Synopsis</a></li>
<li><a href="#">Stills/Photos</a></li>
<li><a href="#">Videos/clips</a></li>
<li><a href="#">Quotes</a></li>
<li><a href="#">Quiz</a></li>
</ul>
</nav>
Страница сайта And the winner isn’t. с обычной навигацией.
Сначала мы сделаем так, чтобы элемент nav отображался как таблица:
Nav { display: table;
/* еще код… */
}
Затем мы обеспечим отображение <ul> в виде строки таблицы:
Nav ul { display: table-row;
/* еще код… */
}
И наконец, сделаем так, чтобы элементы списка отображались как ячейки таблицы:
Nav ul li { display: table-cell;
/* еще код… */
}
Рисунок 5.8. Макет страницы, к которому мы стремимся
Это означает, что при добавлении дополнительных элементов списка они будут автоматически расставляться с соответствующими промежутками. И наконец, используем наши CSS-селекторы для выравнивания первого и последнего элементов списка по правому и левому краям:
Nav ul li:last-child { text-align: right;
}
Nav ul li:first-child { text-align: left;
}
Затем, открыв страницу в браузере, мы увидим, что навигационная область стала больше походить на ту, что приводилась в оригинальной композиции (рисунок 5.9).
НЕ БЕСПОКОИТЕСЬ, ВСЕ ЭТИ ТАБЛИЦЫ ИСПОЛЬЗУЮТСЯ ТОЛЬКО ДЛЯ ВИЗУАЛЬНОГО ПРЕДСТАВЛЕНИЯ!
Вы, возможно, задаетесь вопросом: «О чем же я, в конце концов, думаю?», решив, что мы используем таблицы для навигационного макета. Однако не стоит забывать, что все эти.
Таблицы предназначены только для визуального представления. Это означает, что они существуют лишь в CSS и не имеют отношения к разметке. Мы просто сообщаем браузеру, что желаем, чтобы соответствующие элементы отображались и вели себя так, как если бы они были таблицами, а не чтобы они на самом деле были ими. Отображение элементов разметки в такой манере также не помешает нам задействовать иной тип макета для областей просмотра с другой шириной, например display: inline-block для областей просмотра шириной менее 768 пикселов.
Теперь строка навигации растянута на ширину страницы.
Добавить комментарий