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

Пример 3. Трехколоночный макет

Описание | Пример 3. Создание макета с двумя колонками | Пример 4. Код HTML 5 | Пример 2. Создание макета с двумя колонками | Пример 3. Код HTML 5 | Фиксированная ширина, навигация слева | Пример 1. Создание двух колонок | Резиновая ширина, навигация слева | Пример 2. Макет с двумя колонками |


Читайте также:
  1. I) Эффективность военных преобразований 1860-1870-х годов на примере Русско-японской войны.
  2. I. Примерный перечень вопросов рубежного контроля.
  3. II. Примерный перечень вопросов к зачету (экзамену) по всему курсу.
  4. III. РАЗЛИЧНЫЕ СХЕМЫ УПРАВЛЕНИЯ ГОСУДАРСТВЕННОЙ СОБСТВЕННОСТЬЮ: ПРИМЕРЫ ИЗ ИСТОРИЧЕСКОГО ОПЫТА И ЗАРУБЕЖНОЙ ПРАКТИКИ
  5. Look at the family tree and complete the sentences as in the example (Посмотри на семейное древо и заполни пропуски как в примере).
  6. Lt;question>Выберите правильный пример аннотации.
  7. XVI. Переведите на калмыцкий язык, заменяя подчеркнутые слова предложенными примерами.

<!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: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */

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

color: #ffe; /* Цвет текста */

}

a { color: #008BCE; /* Цвет ссылок */ }

#container {

width: 500px; /* Ширина макета */

margin: 0 auto; /* Выравниваем по центру */

background: #FCE600; /* Цвет колонок */

}

#header {

font-size: 2.2em; /* Размер текста */

text-align: center; /* Выравнивание по центру */

padding: 5px; /* Отступы вокруг текста */

background: #D71920; /* Цвет фона шапки */

}

#nav, #aside {

float: left; width: 110px; padding: 5px;

}

#content {

background: #54B948;

margin: 0 120px; /* Ширина колонок */

padding: 10px;

}

#aside {

float: right; color: #000;

}

h2 { margin: 0 0 1em; }

#footer {

clear: both; /* Отменяем действие float */

padding: 5px; /* Отступы вокруг текста */

background: #D71920; /* Цвет фона подвала */

}

</style>

</head>

<body>

<div id="container" >

<div id="header" > Исторический турнир </div>

<div id="nav" >

<p><a href="stat.html" > Статистика турнира </a></p>

<p><a href="interview.html" > Интервью с главным судьей </a></p>

<p><a href="ask.html" > Конкурсные вопросы </a></p>

</div>

<div id="aside" >

<h3> Статистика </h3>

<p> одиннадцать человек дошли до финала; </p>

<p> один человек правильно указал в каком стиле писал Диего Веласкес; </p>

<p> только один человек знал, кто изобрел пароход; </p>

</div>

<div id="content" >

<h2> Опрос общественного мнения показал </h2>

<ul>

<li> что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым; </li>

<li> Диего Веласкес писал свои полотна в стиле: империализма, кубизма

и империосионизма; </li>

<li> Фаросский маяк находится в Фаросе; </li>

<li> конфуцианство возникло в: Италии, Корее и Франции; </li>

<li> богами торговли и воровства в Древней Греции были: Марс, Меркурий

и Дионис; </li>

<li> Франция – это город; </li>

<li> богами загробного мира в Египте были: Аид, Анубис и Ассирис; </li>

<li> столица Золотой Орды — Монголия; </li>

<li> главные противники Александра Македонского: татаро-монголы, Дедал

и Цезарь; </li>

</ul>

</div>

<div id="footer" > &copy; Влад Мержевич </div>

</div>

</body>

</html>

У данной реализации есть несколько особенностей:

· колонки имеют разную высоту, но за счет применения фона создается иллюзия одинаковой высоты у всех трех колонок;

· у левой и правой колонки одинаковый цвет фона, он устанавливается свойством background для слоя container;

· вид колонок сохраняется только в случае, когда высота центральной колонки больше остальных. Если это условие нарушить, пропадет эффект колонок (рис. 2), в остальном макет при этом отображается корректно.

Рис. 2. Правая колонка выше остальных

 


Дата добавления: 2015-08-20; просмотров: 39 | Нарушение авторских прав


<== предыдущая страница | следующая страница ==>
Фиксированная ширина, три колонки| ПЛАТОЧЕК

mybiblioteka.su - 2015-2024 год. (0.006 сек.)