LAB7 Кобец С.Ю (544753)

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла

Национальный Исследовательский Университет

Московский Энергетический Институт (Технический Университет)

Кафедра прикладной математики

Лабораторная работа №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="https://s.studizba.com/z.php?f=/uploads/unziped/real/14325/doc/12084/vcss-blue"

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

Характеристики

Тип файла документ

Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.

Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.

Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.

Список файлов лабораторной работы