Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки HTML arrow Уроки web-программирования (HTML, div, style, css, href, left, top): "Размещение блоков"
24.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Уроки web-программирования (HTML, div, style, css, href, left, top): "Размещение блоков" Печать E-mail
Автор megabax   
09.08.2009 г.
Добрый день

Уроки web-программирования (HTML, div, style, css, href, left, top): «Размещение блоков на странице».

 

Помните в прошлый раз мы добавили в текст картинку, а она у нас появилась внизу. Теперь давайте сделаем ее сбоку. Попробуйте такой пример:

 

<HTML>

<HEAD>

<TITLE>Урок 5. Расположение блоков текста</TITLE>

            <STYLE TYPE="text/css">

            <!--

            #pict {

                        position:absolute;

                        left:300px;

                        top:0px;

            }

            -->

            </STYLE>

</HEAD>

<BODY>

<font size=5>

<A href=index.htm>О Компании</a><br>

<A href=news.htm>Новости</a><br>

<A href=steklom.htm>Стекломагниевый лист</a><br>

<A href=cement.htm>Цемент</a><br>

<A href=plitka.htm>Потолочная плитка</a><br>

<A href=profil.htm>Профиля</a><br>

<A href=zamki.htm>Дверные замки, ручки</a><br>

<A href=siding.htm>Сайдинг</a><br>

<A href=dekor.htm>Потолочная плика</a><br>

<A href=contacts.htm>Контакты</a><br>

<div id="pict">

            <img src="girl.jpg">

</div>

</font>

</BODY>

</HTML>

 

 

Если мы его запустим, то увидим вот такую картинку:

 

Размещение блоков на странице (div, style, css, postion, left, top)

 

Теперь немного комментариев к тексту:

 

В блоке

 

<STYLE TYPE="text/css">

            <!--

            #pict {

                        position:absolute;

                        left:300px;

                        top:0px;

            }

            -->

            </STYLE>

 

мы задаем стили оформления отдельных элементов текста. Вы уже знакомы с ними по уроку 3. Напомню, что в тэге <STYLE></STYLE> задаются правила оформления для заданных селекторов. Селектор #pict обозначает элемент с идентификатором «pict». В данном тексте этот идентификатор задан для тэга <div id="pict">, внутри которого как раз находиться тэг картинки <img src="girl.jpg">. Тэг <div></div> задает блок. Внешне он никак не проявляется, он просто помечает вложенный в него текст как блок. В данном случае, поместив нашу картинку в блок <div></div> и присвоив ему идентификатор, мы в тэге <STYLE></STYLE> имеем возможность задать правила оформления для нее.

Теперь разберем само правило:

 

position:absolute; - мы задаем расположение блока как абсолютное, не зависимое от расположения других блоков.

left:300px; - задаем расположение верхнего левого угла блока по горизонтали.

top:0px; - задаем расположение верхнего левого угла блока по вертикали.

 

Попробуйте поменять значения left и top. Вы увидите, что картинка переместилась на другое место.

 

 

 

 

Последнее обновление ( 07.09.2010 г. )
 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги