Лабораторная работа 7 (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 код


</span></font></font><font face="Times New Roman, serif"><font size="2" class="CL_15">Слои</font></font><font face="Times New Roman, serif"><font size="2" class="CL_15"><span lang="en-US">

вмсс, лабораторная работа" name="keywords"/>

Слои

</span></font></font><font face=Карта" id="z1"/>

</span></font></font><font face=Карта" id="z2"/>

</span></font></font><font face=Карта" id="z3"/>

alt="Valid XHTML 1.1"

height="31" width="88"/>

src="http://jigsaw.w3.org/css-validator/images/vcss-blue"

alt="Правильный CSS!"/>


Случайные файлы

Файл
304.rtf
154547.rtf
66600.rtf
54280.doc
144335.rtf




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.