Самоучитель по креативному веб-дизайну. Книга 2, стр.14

для посетителя ничем не лучше страницы, содержащей только текст. Поэтому при создании Web-сайта большая часть работы по расположению элементов на странице будет связна с организацией обтекания текста вокруг изображений. В

прошлом дизайнеры имели в своем распоряжении только атрибут align, кото — рый при использовании его с дескриптором заставлял Web-браузер обте- кать изображение текстом слева или справа. Теперь появилось свойство floa t каскадных списков стилей, которое позволяет задавать обтекание текстом не только изображений, но, как показано на рис. 4.19, и других элементов Web-страницы.



ПРАКТИКУМ

При применении свойства floa t каскадных списков стилей к элементу вы изы —

маете элемент из нормального потока и делаете из него «плавающий» элемент, который будет находиться слева или справа от элемента, следующего за ним. Предположим, например, что HTML-код Web-страницы содержит дескриптор

, за которым следует текст абзаца. В «нормальном» режиме Web-браузер по — местит на страницу изображение, а затем перед выводом на экран текста перей — дет на следующую строку. Чтобы изображение «плавало» слева от текста абзаца (как показано на рис. 4.19) задайте в дескрипторе свойство float, как по — казано в следующем примере:

216 Глава 4. Каскадные списки стилей





Аналогично, чтобы текст абзаца находился слева от изображения, укажите

Web-браузеру, что изображение должно «плавать» справа от следующего элемента

HTML-кода:



src=»images/Shakespeare. gif» widths»110″ height=»132″>

Как уже упоминалось, атрибут floa t можно использовать с любым элементом Web-страницы, а не только с изображениями. Например, для изменения стиля заголовка 6, чтобы он находился слева от текста абзаца (как показано на рис.

4.19) вставьте в список стилей страницы следующее правило:

h6 {float:left}

Фактически плавающим можно сделать любой контейнер и объект, помещенный

в контейнер. Предположим, например, что необходимо создать начальную заглав — ную букву, скажем, ш, с которой начинается последний абзац на странице, показан — ной на рис. 4.19. Для этого создадим следующий класс каскадного списка стилей:

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.10
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 116
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 140
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 115
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 067
  • 14.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.80
  • 23.08.2011">Приложение для Iphone на Ipad
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.68
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.85
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 048
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 002
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.12
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 070
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 151
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.98
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...