Практическое применение тега div

Приветствую, друзья. На днях мне пришлось поэкспериментировать с блоками и возможностями их использования в оформлении. Поэтому спешу поделиться с вами парочкой идей.

Если вы хоть раз копались в файлах шаблона, пытаясь усовершенствовать дизайн или расширить функционал сайта, то наверняка сталкивались с блочными элементами. Тег <div> необходим для создания отдельных блоков на странице, содержание и оформление которых можно менять по своему усмотрению. Например, таких:тег div

Сегодня мы рассмотрим практические варианты применения блоков, на конкретных примерах научимся использовать этот простой, но невероятно полезный тег. Рекомендую не просто копировать удачно найденный кусок кода на страницы своего ресурса, а вдумчиво изучить каждую его строчку. Еще лучше — открыть какую-нибудь песочницу для web-программистов (например, https://jsfiddle.net/) и поэкспериментировать на практике. Вы же хотите иметь возможность создать уникальное оформление, настроив его по своему желанию? Тогда нужно понимать суть процесса.

В конце статьи — БОНУС: подробное руководство, как сделать оформление, по-разному отображающееся на компьютерах и мобильных устройствах.

Пояснения для новичков:

  • Html-код нужно вставлять в ту часть страницы или записи, где вы собираетесь размещать выбранный элемент. Чаще всего это файлы single.php, page.php. О том, какие файлы за что отвечают, читайте в статье о структуре шаблона.
  • Часть со строчками CSS определяет оформление блоков, текста и т.д., входящих в пример. Этот кусок кода надо вставить в конце файла style.css.
  • В моих примерах часто использованы строго установленные значения height и width (высоты и ширины). Это сделано для большей наглядности, чтоб все стояло четко на своих местах. У вас свои особенности страниц, так что данные цифры будут отличаться или отсутствовать вовсе. Указать размеры можно как в пикселях, так и в процентах. Последнее предпочтительнее для большей гибкости оформления.

Пример #1: Фоны и изображения. Рамки и тени.

Задача

тег div

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

Решение:

HTML:

CSS:

Пример #2 Вынос картинки за рамку. Оформление блоков цитат и похожих записей.

Задача

тег div

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

Решение:

HTML:

CSS:

Пояснения

Здесь block_1 отвечает за оформление основного блока-фона, а block_2 — за восклицательный знак в углу.

С помощью отрицательного значения margin мы вынесли block_2 в самый угол и даже за пределы основного элемента. 

Для block_1 у меня указана высота. Сделано это больше для наглядности, так как размеры пустой рамки сильно искажались. У вас в ней будет текст, так что строку height можете удалить, чтобы не ставить блоку жестких ограничений. А вот в block_2 ширину-высоту можно оставить, ведь нам нужна иконка конкретного размера.

Пример #3: Рамки и их отсутствие

Задача

тег div

Вот такую элегантную картинку с недостающим border’ом можно сделать, указав отдельно стили для каждой части рамки. Надпись «The end» вам вряд ли пригодится, но ее можно заменить, скажем, на ссылку страницы, статьи или рубрики.

Решение

HTML:

CSS:

Пример #4: Положение блоков относительно друг друга. Выход за границу div.

Задача

тег div

Самый запутанный пример из всех, прекрасно показывающий использование margin. То, что отступы можно указывать как положительные, так и со знаком минус, открывает настоящую свободу действий, позволяя реализовывать самые странные идеи.

HTML:

CSS:

Пояснения

Важный момент: мы отсчитывали отступы (margin) не от одного конкретного блока, а от каждого предыдущего. То есть для первого div — от фонового, для второго — от первого и т.д. А вообще, лучший способ понять смысл происходящего здесь — лично поиграть со значениями, подставляя свои и проверяя результат.

Пример #5: Списки блоков, Округлость и тени.

Задача

тег div

Вот таким симпатичным списком можно оформить меню или списки рубрик.

Решение

HTML:

CSS:

Пояснения 

Float и clear отвечает за выравнивание блоков: в нашем случае по правому краю. Border-radius указывает, какие углы закруглять. Как видите, в нем прописаны 4 значения — по одному для каждого уголка. Если поменять местами 50px и 0px, то результат станет прямо противоположным.

Пример #6: Двойные блоки. Снова об отступах. Да Винчи.

Задача

тег div

Многие блоги имеют где-нибудь на странице блок с краткой информацией об авторе. Вот один из вариантов оформления, а заодно пример использования отступов для корректировки положения элементов. Как видим, на картинке использованы 4 блока, но 2 из них почти не видны под лицевыми. Не уверена, как на такие махинации смотрят поисковые системы, ведь на таких «спрятанных» элементах можно разместить скрытую информацию (см. статью о требованиях Яндекса и Гугла к качеству сайтов). Но в качестве примера сгодится.

Решение

HTML:

CSS:

Пояснение 

В данном примере, оформление каждого куска текста получилось объемным и вынесено отдельно в CSS. С блоками сначала  вышла небольшая путаница, поэтому они идут в тексте не по порядку. 

Пример #7: Несколько блоков, отзывчивых к устройству и его расширению

Ок, а что если вы сделали группу блоков, но на смартфонах она смотрится криво? Вся первоначальная идея может полететь к чертям. Можно (и нужно!) использовать проценты для создания «резиновых элементов», но иногда этого недостаточно.

Решение, которое мы сейчас применим, было бы логичнее разместить в материалах по мобильной верстке. Но мне хотелось собрать интересные варианты работы с div’ами в одном месте, чтобы каждый нашел здесь что-то полезное.

Итак, мы имеем несколько блоков, расположенных в один ряд и оформленных, скажем, с помощью .bl . Размеры в процентах, все ок. Но на маленьких экранах ширина в процентах сделает блоки совсем узенькими и текст внутри отобразится не очень красиво.

тег div

Так блоки будут расположены на больших экранах…

тег div

…А к такому виду мы стремимся на смартфонах

Решено на смартфонах выводить блоки не в ряд, а столбиком на всю ширину экрана каждый. Ну и до кучи задать каждому уникальное оформление: .mob, .mob2, .mob3 и т.д. Вопрос как?

На помощь приходит директива @media, позволяющая задать отдельные стили для конкретных устройств. Добавлять ее нужно в контейнер <head> (файл header.php). В нашем случае условие выглядит так:

Это значит, что на всех гаджетах с шириной экрана меньше 990px будет срабатывать указанное оформление. Вы можете задать любую максимальную ширину, а так же минимальную (min-width), высоту (max-height, min-height) и много других условий, о которых мы поговорим в отдельной статье (подпишитесь на новости сайта, чтобы не пропустить).

Теперь прописываем новый мобильный стиль для каждого блока. В нашем случае, это выглядит так:

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

Осталось указать на странице с блоками, какое оформление использовать:

Теперь наши блоки имеют приличный вид как на мониторе компьютера, так и на смартфонах.

Заключение

Ну как-то так. Если вы заметили какую-либо неточность, ошибку или есть идея, как улучшить приведенные выше решения, пожалуйста, поделитесь своими мыслями в комментариях. Я тоже могу ошибаться. Надеюсь, примеры из этой статьи окажутся вам полезны и подкинут несколько идей использования тега <div> в оформлении сайта.

Вдохновения вам и успехов вашим проектам!

© 2016, blogstu.ru. Все права защищены. Копирование материалов сайта запрещено.

Поделиться:
Сохранить:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

1 × 2 =