Лабораторная работа 7 (LAB7 Апухтин М.А.)

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

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ









Лабораторная работа по ВМСС № 7.

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






Выполнил

студент группы А-13-08

Апухтин М.А.


Преподаватель

Куриленко И.Е.


















Москва, 2012

Оглавлени



Слои. 3

Абсолютное позиционирование 3

Относительное позиционирование 3

Выполнение работы 3

layer.htm 3

layer.css 4

Список использованных источников 4









































Слои.

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

Абсолютное позиционирование

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

При использовании наложения требуется присвоить свойству position значение absolute. Само положение слоя регулируется свойствами left, top, right и bottom которые задают координаты соответственно от левого, верхнего, правого и нижнего края. Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, приведенный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок также можно менять с помощью свойства z-index. Чем больше его значение, тем выше располагается текущий слой относительно других слоев.

Относительное позиционирование

Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая свойству position значение absolute. Второй слой, расположенный поверх первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у свойства position. Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием left и top.

Выполнение работы

layer.htm

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Слоиtitle>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" href="layer.css" />

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />

<meta name="author" content="Апухтин Михаил" />

<meta name="keywords" content="монеты,рубли" />

<meta name="description" content="Монеты" />

<meta name="robots" content="index, nofollow" />

head>

<body>

<p class="header">

Слоиp>

<p>

<a href="index.htm" title="Главная">Главнаяa><br />

p>

<div class="picture1">

<img src="0006-004-Korol.jpg" alt="Король" />

div>

<div class="picture2">

<img src="0004-003-Tuz.jpg" alt="Туз" />

div>

<div class="picture3">

<img src="0008-005-Dama.jpg" alt="Дама" />

div>

<p class="icon">

<a href="http://validator.w3.org/check?uri=referer">

<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31"

width="88" />a>

p>

body>

html>

layer.css

.picture1 {position: absolute;

left: 100px;

top: 150px;

width:380px;

height:530px;

z-index: 1;}

.picture2 {position:absolute;

left:500px;

top:150px;

width:380px;

height:530px;

z-index:2;}

.picture3 {position:absolute;

left:250px;

top:275px;

width:380px;

height:530px;

z-index:3;}


Список использованных источников

  • http://ru.html.net/tutorials/css/lesson15.php

  • http://htmlbook.ru/content/fiksirovannyy-dizayn-nalozhenie-sloev



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

Файл
5452.rtf
70598-1.rtf
22374.rtf
CBRR5490.DOC
23930.rtf




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