Галерея изображений средствами CSS Урок 15

Верстка блоками DIV
НTML код:
Блок 1
Блок 2
Для того, чтобы каждому блоку задать своё оформление, элементам
присваиваем собственный класс .
Стили каждого класса прописываем в стилевом файле.
div.name1 {
…;
}

Верстка блоками DIV
НTML код:
Блок 1
Блок 2
Блок – прямоугольная область на странице, которая по умолчанию занимает все доступную ширину и начинается с новой строки.
Самым распространённым элементом, используемым в блочной верстке, является универсальный элемент
.

Практическая работа
Урок 15

Практическая работа
Дополняем наш стилевой файл!
Открываем файл с помощью SublimeText

Практическая работа
Записать в файл index.html код, добавляющий на страницу 4 изображения, открывающиеся по ссылке в отдельной вкладке.
Образец представлен ниже.

Практическая работа
Записать в файл index.html код, присваивающий изображению класс gallery. Образец представлен ниже.
Записать в файл style.css правила оформления объектов класса gallery.

Практическая работа
Записать в файл index.html код, добавляющий подпись к изображению. Образец представлен ниже.
Записать в файл style.css правила оформления объектов класса desc (подпись к изображению).

Практическая работа
Записать в файл style.css
Изменение при наведении курсора.
Задает размеры изображения, загружаемого в блок.
Теперь можно в файле index.html убрать размеры изображения.

Практическая работа
Записать в файл style.css
position:
fixed
relative
Добавить после position (смещение элемента)