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

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

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

Полезные ссылки
Случайные записи
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.107
  • 18.03.2011">Руководство по actionscript. часть 2, стр. 132
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.41
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 097
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.7
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 096
  • 28.07.2011">Выживет только лучший
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 029
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 100
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.62
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.98
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.46
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 003
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 107
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.8
Опрос

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

View Results

Loading ... Loading ...