Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Пример 3.31. Создание аналога фреймов




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

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

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

<style type="text/css">

body { margin: 0; }

#sidebar, #content { position: absolute; }

#sidebar, #content { overflow: auto; padding: 10px; }

#header {

height: 80px; /* Высота слоя */

background: #FEDFC0; border-bottom: 2px solid #7B5427;

}

#header h1 { padding: 20px; margin: 0; }

#sidebar {

width: 150px; background: #ECF5E4; border-right: 1px solid #231F20;

top: 82px; /* Расстояние от верхнего края */

bottom: 0; /* Расстояние снизу */

}

#content {

top: 82px; /* Расстояние от верхнего края */

left: 170px; /* Расстояние от левого края */

bottom: 0; right: 0;

}

</style>

</head>

<body>

<div id="header"><h1>Плов народов мира</h1></div>

<div id="sidebar">

<p>Плов по-фергански</p><p>Плов узбекский</p>

<p>Плов сибирский</p><p>Плов итальянский</p>

<p>Плов эстонский</p><p>Плов по-американски</p>

<p>Плов по-индейски</p>

</div>

<div id="content">

<h2>Плов по-фергански</h2>

<p>Положить в казан нарезанное кусочками мясо и поджарить его до

образования корочки. Нашинкованный кольцами лук жарить вместе

с мясом до красноватого цвета, затем добавить морковь, нарезанную

соломкой. Положить половину соли, всё перемешать и жарить, пока

морковь не приобретёт золотисто-коричневый цвет. После этого налить

половину необходимого количества воды и дать закипеть.</p>

<p>Засыпать ровным слоем рис, усилить огонь и тотчас налить воду,

чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов

при помощи шумовки собрать к середине горкой, проколоть палочкой в

нескольких местах так, чтобы вода, находящаяся на поверхности,

прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.</p>

<p>Тщательно перемешайте готовый плов, переложите в большое блюдо,

сверху разложите мясо.</p>

</div>

</body>

</html>

Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.

Рис. 3.43. Применение абсолютного позиционирования

В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left, right и top, bottom.

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

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства — position со значением absolute, display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).


Поделиться:

Дата добавления: 2015-04-18; просмотров: 78; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.006 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты