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

Видео урок: Размещение изображения и названия

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

Теперь, когда HTML динамически загружается в файл index.html в области верхнего колонтитула, нам нужно стилизовать этот контент. Давайте перейдем к файлу large.css в текстовом редакторе. Ищем здесь элемент header, а затем якорный тег с классом для лого. Заходим сюда и находим свойство для правой позиции. Меняем его на left, и теперь у нас будет атрибут top равный 28 пикселям, left - 30 пикселям. Спускаемся вниз. Здесь мы переопределяем отступ и нижний колонтитул.

Нажимаем несколько раз Return, и теперь мы добавим правила, которые будут нацелены на id равное hero и будут стилизовать hero HTML, который был загружен из внешнего HTML файла. Первое правило состоит в том, что мы нацелимся на контейнер hero. Итак, решетка, hero. Мы установим свойство для высоты на 275 пикселей. Устанавливаем свойство position на relative, а свойство overflow на hidden. Следующее правило: мы нацеливаемся на панели внутри hero. Итак, решетка, hero, пробел, .panel, и мы устанавливаем ширину на 100%, а высоту на 275 пикселей, свойство position мы устанавливаем на absolute, а overflow на hidden.

Далее мы нацелимся на изображение внутри панели, то есть решетка, hero, .panel, пробел, img, position. Мы установим для него значение absolute. Значение для top прописываем как 0 пикселей, значение для right тоже как 0 пикселей. Далее мы нацелимся на заголовок. Решетка, hero, пробел, .panel, пробел, .caption. Свойство position устанавливаем на absolute. Свойство top на 95 пикселей. Свойство left на 0 пикселей.

Ширину устанавливаем на 45%. Далее идет background color, и мы будем использовать тут RGBA. Итак, RGBA, 45 для red, 50 для green, 79 для blue, и 0,85 для opacity. Для свойства padding устанавливаем 25 для top, 20 для right, 15 для bottom и 35 пикселей для left. Когда все это сделано, нажимаем Save. Теперь давайте перейдем в браузер и нажмем Reload. Как только страница перезагрузилась, мы видим, что логотип поменял позицию.

График, который гораздо шире, чем эта область, поскольку у нас будет анимация, сейчас сжат из-за этой настройки overflow. Здесь мы видим полупрозрачный задний фон, а также абсолютное позиционирование div для заголовка. Теперь, когда у нас все на месте, давайте вернемся в текстовый редактор. Обратимся к среднему размеру экрана. Давайте зайдем сюда и найдем якорный тег с классом для логотипа. Меняем свойство top с 20 на 12, нажимаем Save. Давайте перейдем вниз CSS файла. Несколько раз нажимаем Return. А теперь мы добавим несколько переопределений для области hero.

Итак, решетка, hero. Высоту мы устанавливаем на 200 пикселей. Теперь мы переходим к панели. Решетка, hero, пробел, .panel. Устанавливаем ширину на 100%, а высоту на 200 пикселей. Теперь идем к hero, пробел, .panel, пробел, .caption. Здесь ширину мы устанавливаем на 40%. Свойство top будет 64 пикселя. Мы все сделали, теперь нажимаем Save. Теперь переходим к верстке для маленького экрана. Давайте найдем якорный тег с классом для логотипа в области верхнего колонтитула.

Давайте зайдем сюда и поменяем свойство right на left. И вместо 15 пикселей мы установим его на 10 пикселей. Спускаемся вниз. Внизу документа давайте создадим переопределенную версию для области hero для маленьких экранов. Пишем решетка, hero, пробел. Устанавливаем высоту на 100 пикселей. И здесь мы установим свойство background. Первым свойством будет URL. Мы укажем на маленький баннер. Итак, точка, точка, слэш, чтобы перейти к корневой папке, images, слэш, banner, нижнее подчеркивание, small.jpg, и мы установим его на no repeat, затем мы устанавливаем right для позиции X и 0 пикселей для позиции Y.

Для маленьких экранов мы возьмем созданный нами контейнер hero и присвоим его обратно графической настройке, поскольку мы не собираемся загружать специальный контент для маленьких экранов. Следующее правило: для маленьких экранов мы спрячем заголовок. Решетка, hero, пробел, .panel, пробел, .caption. Свойство display устанавливаем на none. Теперь, когда все правила на месте, нажимаем Save. Возвращаемся в браузер. Нажимаем Reload. Вот наш большой экран. Сворачиваем его. Вводим средний размер. Мы видим, что логотип стал меньше, а заголовок переместился.

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