Приклади використання тега div

Вітаю, друзі. Днями мені довелося поекспериментувати з блоками і можливостями їх використання в оформленні. Тому поспішаю поділитися з вами парочкою ідей.

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

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

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

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

Тут block_1 відповідає за оформлення основного блоку-фону, а block_2 - за знак оклику в кутку.

За допомогою від'ємного значення margin ми винесли block_2 в самий кут і навіть за межі основного елемента.

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

Приклад # 3: Рамки і їх відсутність

Ось таку елегантну картинку з відсутньою border'ом можна зробити, вказавши окремо стилі для кожної частини рамки. Напис «The end» вам навряд чи стане в нагоді, але її можна замінити, скажімо, на посилання сторінки, статті або рубрики.

В даному прикладі, оформлення кожного шматка тексту вийшло об'ємним і винесено окремо в CSS. З блоками спочатку вийшла невелика плутанина, тому вони йдуть в тексті не один за одним.

Приклад # 7: Кілька блоків, чуйних до пристрою і його розширення

Рішення, яке ми зараз застосуємо, було б логічніше розмістити в матеріалах по мобільному верстці. Але мені хотілося зібрати цікаві варіанти роботи з div'амі в одному місці, щоб кожен знайшов тут щось корисне.

Отже, ми маємо кілька блоків, розташованих в один ряд і оформлених, скажімо, за допомогою .bl. Розміри в процентах, все ок. Але на маленьких екранах ширина у відсотках зробить блоки зовсім вузенькими і текст всередині відобразиться не дуже красиво.

Так блоки будуть розташовані на великих екранах ...

На допомогу приходить директива @media, що дозволяє задати окремі стилі для конкретних пристроїв. Додавати її потрібно в контейнер (Файл header.php). У нашому випадку умова виглядає так: