Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Июль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто!:

 

 

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «Размещение блоков на странице».

 

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

 

<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>

 

 

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

 

 

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

 

В блоке

 

<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. Вы увидите, что картинка переместилась на другое место.

 

На сегодня все, до новых встреч.

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

 

 
В избранное