LAB7 Кобец С.Ю (Лабораторная работа 7)
Описание файла
Файл "LAB7 Кобец С.Ю" внутри архива находится в папке "Лабораторная работа 7". Документ из архива "Лабораторная работа 7", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.
Онлайн просмотр документа "LAB7 Кобец С.Ю"
Текст из документа "LAB7 Кобец С.Ю"
Национальный Исследовательский Университет
Московский Энергетический Институт (Технический Университет)
Кафедра прикладной математики
Лабораторная работа №7 по дисциплине ВМСС
Использование слоев
Выполнил: Кобец С. Ю.
А-13-08
Преподаватель: Куриленко И. Е.
Москва
2012г.
Общая информация
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значениеposition задано как absolute, fixed или relative.
Синтаксис
z-index: число | auto | inherit
В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузере Firefox до версии 2.0 включительно.
Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя.
Выполнение работы
В рамках лабораторной работы были разработаны страницы, содержащие слои, в результате чего боковое меню остается неподвижным относительно основного контента страницы при прокрутке. Также была добавлена страница, на которой было реализовано наслоение изображений с помощью слоев и настройки z-индексов.
Слои
Модификации CSS кода style.css для плавающего меню
#column_left {
float:left;
width: 20%;
}
#column_center {
float:left;
width: 60%;
background-color: #E0E6FF;
padding-left:10px;
padding-right:10px;
left: 20%;
position: relative;
}
#column_right {
float:left;
width: 20%;
}
#menu {position: fixed;}
CSS код layer.css
#z1 {
position: relative;
left: 30%;
top: 10px;
z-index: 1;
}
#z2 {
position: relative;
left: 15%;
top: 25px;
z-index: 2;
}
#z3 {
position: relative;
left: 0%;
top: 40px;
z-index: 3;
}
HTML код
Слои
Слои
Меню
Главная
Примеры работы программы
Формула
Таблицы
Списки
Слои
alt="Valid XHTML 1.1"
height="31" width="88"/>
src="/uploads/unziped/real/14325/doc/12084/vcss-blue"
alt="Правильный CSS!"/>
