ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Нажмите для полного просмотра!

ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ, слайд №2

ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ, слайд №3

ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ, слайд №4

ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ, слайд №5

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ. Доклад-сообщение содержит 5 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Слайд 2

Описание слайда:

Блочная модель Web-страницы Все HTML-элементы формируют блок, у которого есть поля margin, границы border и отступы padding. Такие блоки могут быть отдельными блоками – блочного уровня (, , , …) и строчными блоками – внутри строки текста (, , , …). Блочная модель позволяет позиционировать размещение HTML-элементов на странице произвольным образом. Поля блока могут быть заданы с использованием как положительных так и отрицательных значений. Границы блока могут стилизовать рамки вокруг блока сложным образом. Отступы позволяют добавить в блок необходимые сдвиги относительно других элементов страницы

Слайд 3

Описание слайда:

Позиционирование на Web-странице Позиционирование – ядро языка CSS, предоставляет неограниченные возможности по управлению внешним видом Web-страницы. Для позиционирования используются CSS-стили для блоков информации и перемещение этих блоков относительно документа или окна браузера (для создания позиционируемого блока обычно используется дескриптор ). В CSS выделяются понятия: Нормальный поток – нестилизованное позиционирование содержимого страницы в браузере Блок-контейнер – родительский блок для элемента, который необходимо позиционировать Окно просмотра браузера – окно браузера, в котором отображается содержимое документа

Слайд 4

Описание слайда:

Типы позиционирования Абсолютное absolute – относительно корневого элемента или относительно блока-контейнера : {position: absolute; left: 10px; top: 50px; border: 2px solid red;} Относительное relative – относительно нормального потока, когда нет другого позиционирования. Статическое static – позиционирование в нормальном потоке (аналогично относительному). Фиксированное fixed – позволяет закрепить блок в любом месте страницы, фиксируется относительно окна просмотра при прокрутке: {position: fixed; left: 0px; top: 0px; background: red;}

Слайд 5

Описание слайда:

Плавающее позиционирование Плавающее float используется для позиционирования элементов относительно других блоков справа – right или слева – left с обтеканием текстом соответственно слева или справа: {float: right; border: 1px double green; padding: 20px} Очищенное плавающее clear используется для отдельного размещения плавающего элемента без обтекания текстом (справа – right, слева – left, с обоих сторон – both): {float: right; clear: left;} Z-индекс позволяет накладывать элементы друг на друга, задает 3-ю ось в пространстве Web-страницы – чем больше значение z-индекса, тем выше размещен блок на странице: #blok1 {position: fixed; left: 0px; top: 0px; z-index: 2;} #blok2 {position: fixed; left: 20px; top: 50px; z-index: 1;}