Самоучитель по креативному веб-дизайну. Книга 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

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

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

Полезные ссылки
Случайные записи
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 073
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 093
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 040
  • 04.06.2012">Судья заявил, что у Oracle нет авторских прав на Java API
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 073
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.112
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 013
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.2
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 012
  • 01.02.2010">Модульная сетка. Генераторы и сервисы
  • 13.02.2014">Преимущества МДФ панелей
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 038
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 001
  • 15.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.58
  • 27.07.2011">iPhone 5 получит Bluetooth 4.0!
Опрос

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

View Results

Loading ... Loading ...