Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Пример 2. Использование float




<!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=utf-8">

<title>Плавающие элементы</title>

<style type="text/css">

.figure {

float: left; /* Выравнивание рисунка по левому краю */

background: #d6d3a2; /* Цвет фона */

padding: 4px; /* Поля вокруг картинки */

margin: 0 6px 4px 0; /* Отступы */

}

</style>

</head>

<body>

<p><img src="images/figure.jpg" width="100" height="111"

class="figure" alt="Картинка"></p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem

nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>

</html>


В данном примере рисунок выравнивается по левому краю окна браузера путем использования значения left у свойства float, а текст обтекает картинку по правому и нижнему краю. Цвет фона и поля вокруг изображения предназначены для красоты и не являются обязательными.

Создание врезок

Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает ее с других сторон (рис. 2).

Рис. 2. Вид врезки

Чтобы врезка выделялась в тексте, у нее обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведенный выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3).


Поделиться:

Дата добавления: 2015-04-18; просмотров: 67; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.008 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты