Бесплатный курс по Java: от основ до продвинутого уровня
Что такое div блок и зачем он нужен
Рассмотрим тег <div></div>.
Это наверное один из самых часто встречающихся тегов в любом html документе.
div сам по себе ничего не делает, но с ним можно вытворять различные вещи с помощью css и он может содержать в себе другие html теги.
Сейчас на примере убедитесь в его полезности.
Создадим новый класс, который будет применяться к div блоку.
.divblock {
/* задаем ширину div блоку */
width: 410px;
/* задаем высоту div блоку */
height: 300px;
/* цвет фона div блоку */
background: #f1f1f1;
/* float:left означает, что html элемент,
который будет идти за html элементом,
на котором применяется данный класс,
будет обтекать его с левой стороны. */
float: left;
/* margin делает отступ блока div от других
html элементов вокруг него.
В пикселях указываем отступы справа и снизу.
0 – расстояние отступа сверху,
15px – справа, 15px – снизу, 0 – слева */
margin: 0 15px 15px 0;
/* Содержимое div блока будет располагаться
по центру в нем. Также сам div блок должен
от этого располагаться по центру страницы,
но он не будет, так как выше использовали float,
а он все располагает по левому краю */
text-align: center;
/* padding делаем отступы в блоке div.
То есть все элементы ВНУТРИ блока div
будут иметь отступы от краев этого div. */
padding: 5px 15px 15px 5px;
/* Можем задать тень блоку.
Пикселями настраиваем расположение тени,
с помощью кода #888888 задаем серый цвет тени.
И у цветов есть код. Меняя цифры в этом коде
можно менять цвет и его оттенки. */
box-shadow: 5px 10px #888888;
}
/* ниже из прошлых уроков */
.imagePropsClass {
/* изменим размеры картинки */
width: 400px;
height: 170px;
}
h1, h2 {
font-weight: 600;
font-family: ‘Brush Script MT’, cursive;
}
h3 {
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Создадим страницу с тремя div блоками и применим к ним свойства созданного класса.
Page tab text
Патрик учит div и CSS
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Патрик учит div и CSS
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Патрик учит div и CSS
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Какой-то текст в теге p.Какой-то текст в теге p.
Давайте откроем только что написанную страницу в браузере.
Как видим, свойства класса divblock были успешно применены к div блокам:
Размеры блоков 410 на 300, цвет фона #f1f1f1, то есть светло серый.
Рамка, как видим, 5 пикселей справа и 10 пикселей снизу цвета #888888, то есть темно серый.
Блоки обтекают друг друга – значит float работает.
Все элементы внутри div-ов расположены по середине – значит text-align: center работает.
Видим, что картинка и текст внутри div имеют отступы от краев div (справа и слева по 15 пикселей, снизу и сверху по 5 пикселей) – значит padding работает.
И также видим, что вокруг блоков div есть отступы (справа и слева по 15 пикселей, можно увидеть пространство между div-ами) – значит margin работает.
Изучите CSS-селекторы: контекстные, дочерние и псевдоклассы. Уменьшайте количество классов в верстке с помощью правильного выбора селектора.
Time to read: 17
Тестирование в Java с помощью JUnit
Руководство по JUnit тестированию в Java: создание тестовых классов, использование assertEquals, assertTrue и других методов для проверки корректности работы кода.
