Лабораторная работа 7 (LAB7 Логинов А. А.)

Посмотреть архив целиком

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

Московский Энергетический Институт











Лабораторная работа №7.

Использование слоев.













Выполнил: Логинов Андрей

группа А-13-08

Преподаватель: Куриленко Иван Евгеньевич













Москва, 2012.

Цель работы:

Научиться использовать слои при форматировании текста.

Подготовка к работе:

  1. Ознакомиться с способом организации и отображения слоев в HTML

  2. Ознакомиться с стилями, применимыми к слоям

  3. Ознакомиться с моделью позиционирования слоев

Порядок выполнения работы:

  1. Разработать страницу, содержащую слои

  2. Реализовать наслоение изображений (по принципу колоды карт) с помощью слоев и настройки Z-индексов. Задание определить по номеру в журнале.

























Элемент

является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.

Как и при использовании других блочных элементов, содержимое тега

всегда начинается с новой строки. После него также добавляется перенос строки.

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже.

"http://www.w3.org/TR/html4/strict.dtd">

</span>Лаб<span lang="en-US">. 7





Слой 1

Слой 2

Слой 3

Xavier Hernandez Creus

Andres Injesta Lujan

Lionel Andres Messi




Стили:

* {

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

}





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

Файл
1963.rtf
25457.doc
147356.rtf
145540.doc
114689.rtf




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