Предыдущий ролик Следующий ролик  

Видео урок: «Подгон» CSS для навигации

Создание отзывчивого веб-дизайна

Теперь мы внесем некоторые изменения в наш HTML файл. Мы переходим к этому HTML файлу и открываем его в предпочитаемом текстовом редакторе. Внутри HTML файла давайте выполним прокрутку вниз. Находим элемент навигации. Вот мы его видим. Давайте выберем весь элемент навигации, включая якорные ссылки, находящиеся внутри. Нажмите Cmd или Ctrl+X, чтобы скопировать это. Давайте перейдем в HTML. Находим элемент header. Нажимаем Return и вставляем элемент навигации прямо после элемента header. Таким образом навигация всегда будет следовать за элементом header, независимо от размера экрана. Теперь, когда элемент nav перемещен, давайте перейдем к проекту myWebsite.

Открываем папку CSS. И давайте откроем верстку для экрана large.css. Здесь находим элемент nav. Теперь удалим абсолютную позицию. Теперь навигация будет просто перетекать с оставшейся частью HTML контента. Давайте перейдем к Large Layout Screens. Находим элемент header. Заходим в него и удаляем настройку высоты в 275 пикселей. А поскольку в навигации не должно быть отступа, поскольку мы перемещаем ее позицию, давайте перейдем к элементу article и поменяем свойство padding top с 60 до 30.

С этим изменением давайте вернемся к проекту myWebsite. Теперь открываем верстку medium.css. Здесь внутри переходим в header. Удаляем высоту в 200 пикселей. Теперь находим элемент nav, где находится свойство top со значением 200, и давайте полностью удалим это правило. Затем мы переходим в проект myWebsite. Давайте отроем Layout Small. Здесь давайте избавимся от высоты в 75, заданной в header. Для элемента nav нажимаем Ctrl и удаляем свойство position, снова нажимаем Ctrl и удаляем свойство background. Внутри элемента nav мы определили AnkerLINKS.

Давайте зайдем сюда и удалим настройки цвета. Для свойства margin давайте поменяем 15 пикселей на 0. Для свойства border меняем все на просто border bottom. А также мы поменяем здесь цвет. Мы установим его равным f5a06e. Также мы удаляем настройки border radius. И наконец, мы переходим к элементу навигации и устанавливаем свойство padding на 0. Таким образом, у нас не будет никакого дополнительного промежутка в области навигации, когда мы перейдем к маленькому экрану.

Как только мы внесли эти изменения, давайте убедимся, что все файлы сохранены. Возвращаемся к проекту и перегружаем его в браузере. В браузере мы видим, что область верхнего колонтитула полностью свернута. Мы избавились от всех настроек высоты. Далее мы будем динамически загружать контент в область верхнего колонтитула. Но мы видим, что логотип все еще находится с правой стороны. Если мы рассмотрим правила для среднего экрана, то увидим, что все они работают. Логотип стал меньше и область с промо-акциями переделана. А затем мы переходим к маленькому экрану и видим, что навигация остается наверху. Рамка у нас есть только внизу каждого отдельного элемента.

Мы удалили фиолетовый задний фон, а цвет текста остался постоянным для двух других размеров экрана. Теперь у нас все на месте и мы можем начать работать над динамической загрузкой контента, основываясь на размере экрана.