Абсолютное позиционирование Блок Секция Контейнер DIV

Зарегистрируйтесь, чтобы просмотреть полный документ!

РЕГИСТРАЦИЯ

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

Блок (Секция /Контейнер) <DIV>. . . </DIV> ALIGN =<=LEFT|RIGHT|CENTER > (выравнивание) • Общие атрибуты STYLE

Абсолютное позиционирование Top Left Width Height STYLE ="POSITION: absolute; Z-INDEX: [значение]; LEFT: [значение 1] ; TOP: [значение 2] ; WIDTH: [значение 3] ; HEIGHT: [значение 4] "

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

<BODY MS_POSITIONING="Grid. Layout" onload="to_main(); "> <DIV language="javascript" id="DIV 2" style="DISPLAY: inline; Z-INDEX: 101; LEFT: 8 px; WIDTH: 416 px; POSITION: absolute; TOP: 24 px; HEIGHT: 192 px; BACKGROUND-COLOR: #ffffcc" onclick="return DIV 2_onclick()" align="center" > <P class="a" style="TEXT-INDENT: 0 cm“ > <I>Важным направлением деятельности турфирмы «Млечный путь» является экологический туризм. </I> </P> <P class="a" style="TEXT-INDENT: 0 cm“ > <I>Он предусматривает не только организацию экологических троп и проведение эколого-просветительских туров, но и внедрение новых, не разрушающих природу технологий в строительство и энергообеспечение турбаз: В первую очередь – это альтернативная энергетика, использование возобновляемых источников энергии и экологичных материалов в строительстве. </I> </P> </DIV>

<IMG style="Z-INDEX: 110; LEFT: 584 px; WIDTH: 204 px; POSITION: absolute; TOP: 208 px; HEIGHT: 17 px" alt="" src="imageshr. jpg" > <DIV id="DIV 24" style="Z-INDEX: 111; LEFT: 424 px; WIDTH: 376 px; POSITION: absolute; TOP: 152 px; HEIGHT: 80 px“ > <P > <A style="FONT-SIZE: 10 pt; FONT-STYLE: normal" href="order. aspx"> <U><FONT color="#800080">Приезжайте в кемпинг "Млечный путь"! </FONT> </U> </A> </P> </DIV>

<DIV language="javascript" id="DIV 16" style="Z-INDEX: 109; LEFT: 8 px; WIDTH: 416 px; POSITION: absolute; TOP: 368 px; HEIGHT: 221 px; BACKGROUND-COLOR: white" onclick="return DIV 3_onclick() " > <P style="FONT-SIZE: 8 pt; COLOR: navy" align="center"> Летом 2005 года в кемпинге был построен дом из прессованных соломенных блоков. Солома - очень экологичный и дешевый материал с прекрасными теплоизоляционными качествами, что позволяет домам из нее выдерживать и самые суровые зимы. А главное - это восполняемый материал, который вполне может заменить дерево, и, тем самым, охранить наши леса. Строила дом интернациональная бригада добровольцев при содействии общественных огранизаций Фонда "Алтай-21 век" и "Строителей без границ" </P> </DIV>

Изображение HTML-страницы в разных браузерах Microsoft Internet Explorer

Изображение HTML-страницы в разных браузерах Netscape Navigator

Внутренние стили <[элемент] STYLE=“[атрибут]: [значение] ; …” > ЗАДАЕТ стили для элемента HTML- страницы

Внутренние стили

Внутренние стили (слева) (справа)

ЕДИНИЦЫ ИЗМЕРЕНИЯ Относительные единицы <html> <head> <style>. em, . ex, . percent { font-family: Verdana, Arial, sans-serif } Единица Описание. em { font-size: 2 em }. ex { font-size: 4 ex } . px { font-size: 30 px } em Высота шрифта текущего элемента. percent { font-size: 200% } Высота символа x ex </style> px Пиксел <body> % Процент <span class=em>Размер в em</span> <span class=ex>Размер в ex</span> <span class=px>Размер в пикселях</span> <span class=percent>Размер в процентах</span> </body> </html>

ЕДИНИЦЫ ИЗМЕРЕНИЯ Абсолютные единицы <html> <head> <style> Единица Описание. in, . mm, . pt { font-family: Verdana, Arial, sansserif }. in { font-size: 0. 5 in } in Дюйм (1 дюйм равен 2, 54 см). mm { font-size: 8 mm } cm Сантиметр. pt { font-size: 24 pt } mm Миллиметр </style> pt Пункт (1 пункт равен 1/72 дюйма) pc Пика (1 пика равна 12 пунктам) <body> <span class=in>Размер в дюймах</span> <span class=mm>Размер в миллиметрах</span> <span class=pt>Размер в пунктах</span> </body> </html>

Скачать презентацию Абсолютное позиционирование Блок Секция Контейнер DIV

HTML4_ABS_POS.ppt

Количество слайдов: 16