- •Фиксированный дизайн. Свойство float
- •Использование свойства float
- •Пример 1. Добавление свойства float
- •Добавление margin для создания двухколонного макета
- •Пример 2. Двухколонный макет
- •Пример 3. Применение свойства clear
- •Результат данного примера показан на рис. 1.
- •Объектная модель
- •Браузеры
- •Фиксированная ширина, использование float
- •Пример 1. Использование float
- •Пример 2. Модификация кода
- •Пример 3. Создание макета с двумя колонками
- •Результат данного примера показан на рис. 1.
- •Пример 4. Код html 5
- •Фиксированная ширина, float плюс margin
- •Пример 1. Использование float и margin-right
- •Пример 2. Создание макета с двумя колонками
- •Пример 3. Код html 5
- •Фиксированная ширина, навигация слева
- •Пример 1. Создание двух колонок
- •Пример 3. Код html 5
- •Резиновая ширина, навигация слева
- •Пример 1. Создание двух колонок
- •Пример 2. Макет с двумя колонками
- •Фиксированная ширина, три колонки
- •Пример 1. Колонки в коде
- •Пример 2. Стиль для создания колонок
- •Пример 3. Трехколоночный макет
Пример 3. Создание макета с двумя колонками
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Рецепты от Миранды</title>
<style type="text/css">
body {
font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
background: #54463d; /* Цвет фона */
margin: 0; /* Убираем отступы */
}
h2 {
font-size: 1.1em; /* Размер шрифта */
color: #752641; /* Цвет текста */
margin-bottom: 0; /* Отступ снизу */
}
#container {
width: 500px; /* Ширина макета */
margin: 0 auto; /* Выравниваем по центру */
background: #f0f0f0; /* Цвет фона правой колонки */
}
#header {
background: #8fa09b; /* Цвет фона */
font-size: 24pt; /* Размер текста */
font-weight: bold; /* Жирное начертание */
color: #edeed5; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
}
#content {
float: left; /* Обтекание по правому краю */
width: 329px; /* Ширина левой колонки */
padding: 10px; /* Поля вокруг текста */
border-right: 1px dashed #183533; /* Линия справа */
background: #fff; /* Цвет фона левой колонки */
}
#content p {
margin-top: 0.3em /* Отступ сверху */
}
#sidebar {
float: left; /* Обтекание по правому краю */
width: 120px; /* Ширина */
padding: 10px; /* Отступы вокруг текста */
}
#footer {
background: #8fa09b; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 5px; /* Отступы вокруг текста */
}
.clear {
clear: both; /* Отмена обтекания */
}
</style>
</head>
<body>
<div id="container">
<div id="header">Рецепты от Миранды</div>
<div id="content">
<h2>Рома!</h2>
<p>Очистить от ядрышек 2 кг. грецких орехов. Растолочь скорлупу и смешать с фруктами
в 2 литрах рома. Употреблять 3–4 раза в день.</p>
<h2>Кровавая Мери</h2>
<p>Влить в бокал хорошую 100% кровь по лезвию ножа. Влить водку «Смирновскую».
Пить залпом.</p>
<h2>Грог по-рыбацки</h2>
<p>1 рыбу залить кипятком, через 5 минут процедить и добавить грога. Подавать в чашках.</p>
<h2>Хвангур</h2>
<p>Сварить на медленном огне воду. Добавить в нее хлива и хрольва. Довести до кипения.</p>
<h2>Царская водка</h2>
<p>Смешать 2 части соляной кислоты и 1 часть азотной со льдом. Слить охлажденную смесь
в фужер. Пить залпом.</p>
<h2>HotDog</h2>
<p>Тщательно промойте косточки и сварите из них бульон. Подавать горячим.</p>
<h2>Fireball</h2>
<p>В большой бокал положить лед, вылить на него все компоненты и положить кружок лимона.</p>
</div>
<div id="sidebar">
<p><a href="popular.html">Популярные рецепты</a></p>
<p><a href="day.html">Рецепт дня</a></p>
<p><a href="apple.html">Рецепты на основе яблок</a></p>
<p><a href="ice.html">Рецепты на основе льда</a></p>
<p><a href="hliv.html">Рецепты из хлива и хрольва</a></p>
</div>
<div class="clear"></div>
<div id="footer">© Влад Мержевич</div>
</div>
</body>
</html>