Разделы
Обтекание рисунка текстом
Метки:
Часто требуется расположить рисунок по правому или левому краю веб-страницы, причем, чтобы текст обтекал его с других сторон. За счет этого изображение гармонично встраивается в текст и становится его частью. На рис. 1 продемонстрирован пример такого обтекания.
Рис. 1. Расположение картинки по правому краю и ее обтекание текстом
За выравнивание изображения отвечает стилевой параметр float. Значение left располагает картинку по левому краю, текст при этом обтекается сверху, справа и снизу. Значение right выравнивает рисунок по правому краю, соответственно, текст обтекает его сверху, слева и снизу. В примере 1 показано, как добавить стилевой атрибут к тегу <IMG>.
Пример 1. Выравнивание рисунка по левому краю
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Число зверя</title>
</head>
<body>
<p>- Он Сумасшедший Ученый, а я его Красавица Дочь.</p>
<p><img src="pic/illustr1.gif" width="164" height="236" alt="Красавица Дочь" style="float: left">
Так она прямо и сказала. Самый древний из штампов ранней научной фантастики.
Откуда бы ей, в ее-то возрасте, знать раннюю фантастику?</p>
<p>Когда кто-нибудь говорит глупость, лучше всего сделать вид, что ты
ничего не слышал. Я продолжал танцевать и между делом поглядывал вниз, в
глубокий вырез ее вечернего платья. Там все было как надо. Все явно
натуральное, не резиновое.</p>
<p>Роберт Хайнлайн. Число зверя</p>
</body>
</html>В данном примере к тегу <IMG> добавляется параметр style="float: left", отвечающий за выравнивание картинки и ее обтекание. Во многих случаях применение встроенных стилей не всегда удобно, поэтому лучше будет создать отдельный стилевой класс и для него установить все необходимые параметры (пример 2).
Пример 2. Использование классов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Доклад лейтенанта Бокатуева</title>
<style type="text/css">
IMG.leftpic {
float: left; /* Выравнивание по левому краю */
margin-right: 10px; /* Отступ справа от картинки до текста */
}
</style>
</head>
<body>
<h1>Доклад лейтенанта Бокатуева</h1>
<p><img src="clip_image01.jpg" alt="Лейтенант Д.А. Бокатуев"
width="196" height="317" class="leftpic">
Вчера во время проведения разведоперации наша группа подверглась
нападению неизвестного противника в камуфляжной форме Алиенов.
В результате эффективной обороны и стремительной контратаки многочисленная
группа боевиков была смята и отброшена. Среди личного состава потерь нет.
Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился
в бою взводный М.А. Кудряшев, грамотно использовавший человеческие
ресурсы своего взвода. В результате операции были захвачены элементы внеземной
культуры, которые переданы аналитической группе.</p>
<p>Руководитель разведоперации, лейтенант Д.А. Бокатуев</p>
</body>
</html>В данном примере вводится новый класс с именем leftpic, добавляемый к тегу <IMG> посредством команды class="leftpic". Сами стилевые параметры описаны внутри контейнера <STYLE>.
Графика для Web
© 2006–2011 Написать сообщение автору Ведущая в Воронеже веб-студия - SWS
Сайт работает под управлением системы Drupal Интересное в сети
молодец! всегда про это забываю
__________________________________________________ ___**
__________________________________________________ ___**_***
__________________________________________________ *__****
__________________________________________________ *_******
_________________________$$$$$$$_____$$$$$$______* ***
________________________$$$$$$$$$__$$$$$$$$$$_**** ***
_______________________$$$$$$$$$$$$$$$$$$$$$$**
______________________$$$$$$$$$$$$$$$$$$$$$$$$$
______________________$$$$$$$$$$$$$$$$$$$$$$$$$
______________________$$$$$$$$$$$$*$$$$$$$$$$$$
_______________________$$$$$$$$****$$$$$$$$$$$$
________________________$$$$****$$$$$$$$$$$$$$
___________________*_____****$$$$$$$$$$$$$$$$
__________________**_*****_$$$$$$$$$$$$$$$$
_________________*****_______$$$$$$$$$$$$
________________*******_________$$$$$$
__________________________________$$$
___________________________________$
Отлично. Стока полезного материала. Только обновляйтесь больше )
Отправить комментарий