LAB7 Логинов А. А. (Лабораторная работа 7)
Описание файла
Файл "LAB7 Логинов А. А." внутри архива находится в папке "Лабораторная работа 7". Документ из архива "Лабораторная работа 7", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.
Онлайн просмотр документа "LAB7 Логинов А. А."
Текст из документа "LAB7 Логинов А. А."
Национальный исследовательский университет
Московский Энергетический Институт
Лабораторная работа №7.
Использование слоев.
Выполнил: Логинов Андрей
группа А-13-08
Преподаватель: Куриленко Иван Евгеньевич
Москва, 2012.
Цель работы:
Научиться использовать слои при форматировании текста.
Подготовка к работе:
-
Ознакомиться с способом организации и отображения слоев в HTML
-
Ознакомиться с стилями, применимыми к слоям
-
Ознакомиться с моделью позиционирования слоев
Порядок выполнения работы:
-
Разработать страницу, содержащую слои
-
Реализовать наслоение изображений (по принципу колоды карт) с помощью слоев и настройки Z-индексов. Задание определить по номеру в журнале.
Элемент является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.
Как и при использовании других блочных элементов, содержимое тега всегда начинается с новой строки. После него также добавляется перенос строки.
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.
"http://www.w3.org/TR/html4/strict.dtd">
Лаб. 7
Слой 1
Слой 2
Слой 3
Стили:
* {
margin: 0;
}
body {
font-size: 20px;
font-family: Arial
}
.div1 {
width: 120px;
height: 120px;
position: absolute;
top: 100px;
left: 50px;
z-index: 1;
background-color: silver;
padding: 3px
}
.div2 {
width: 120px;
height: 120px;
position: absolute;
top: 50px;
left: 120px;
z-index: 2;
background-color: red;
padding: 3px
}
.div3 {
width: 120px;
height: 120px;
position: absolute;
top: 0;
left: 190px;
z-index: 3;
background-color: green;
padding: 3px
}
img {
width: 550px
}
.div4 {
position: absolute;
top: 340px;
left: 50px;
z-index: 1
}
.div5 {
position: absolute;
top: 170px;
left: 350px;
z-index: 2
}
.div6 {
position: absolute;
top: 0;
left: 650px;
z-index: 3
}
