Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - HTML - Трехколоночная верстка


Трехколоночная верстка


Выкладываю стандартный пример трехколоночной верстки :
Теперь вы можете экспериментировать с этой версткой как вам хочется=) Но так как это всего лишь, стандартная трехколоночная верстка, то вам нужно поменять только контент в блоках, ну или максимум так это поменять в стилях отступы позиционирование(лево,право) и размер шрифта.
Код хорошо прокомментирован, но если есть вопросы, я в комментариях отвечу. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Трехколоночная верстка с плавающей шириной содержания, высотой на весь экран и прибитым книзу футером</title>

<style type="text/css">

html, body {

padding:0;

margin:0;

background:red;

height:100%; /* Высота 100% для экрана */ 

}

.wrapper {

background:white;

min-height: 100%; /* Высота для современных браузеров */

height: auto !important; /* Для современных браузеров, чтобы не игнорировалась высота содержания */

height:100%; /* Высота для IE5 и IE6 */

margin:0 0 -100px 0; /* Поле снизу, по высоте футтера */

}

.header {

height:150px;

background:#9966CC;

}

.left {

width:180px;

background:#CC66FF;

float:left;

}

.right {

width:180px;

background:#CC3366;

float:right;

}

.content {

margin: 0 200px 0 200px;

background:#00FF99;

}

p {

margin:0;

padding:0 0 1.2em 0;

font-size:14px;

}

.clearer {

clear:both;

height:100px;

}

.footer {

height:100px;

background:#FFCC33;

}

</style>

</head>

<body>

<!-- Фон тело документа Начало -->

<div class="wrapper">

<!-- Шапка начало -->

<div class="header">

<p>header</p>

</div><!-- Шапка конец -->

<!-- Начало левой колонки -->

<div class="left">

<p>левая колонка</p>

<p>левая колонка</p>

<p>левая колонка</p>

<p>левая колонка</p>

<p>левая колонка</p>

<p>левая колонка</p>

<p>левая колонка</p>

</div><!-- конец левой колонки -->

<!-- Начало правой колонки -->

<div class="right">

<p>правая колонка</p>

<p>правая колонка</p>

<p>правая колонка</p>

<p>правая колонка</p>

<p>правая колонка</p>

<p>правая колонка</p>

<p>правая колонка</p>

</div><!-- Конец правой колонки --><

<!-- Начло блока контента -->

<div class="content">

<p>содержание</p>

<p>содержание</p>

<p>содержание</p>

<p>содержание</p>

<p>содержание</p>

<p>содержание</p>

</div><!-- Конец блока контента -->

<div class="clearer"></div>

</div><!-- Фон тело документа конец -->

<!-- Начало футера -->

<div class="footer">

</div><!-- Конец футера -->

</body>

</html>


Думаю в этой статье у вас не возникнет вопросов, но если что, я отвечу в комментариях.
Удачи=)



Просмотров страницы: 4120
Урок добавлен: 13 Июля 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Ещё статьи по html:
• Установка Favicon на сайт
• Стандартная табличная верстка
• Создание форм в HTML
• Начало работы с HTML


Комментарии (2)

Владислав Малиничев 25 Августа 2012 в 17:49
Вообще-то это не табличная вёрстка - а блочная если ты не заметил...



Олег Пальгов 25 Августа 2012 в 18:45
Не важно какая, главное структура как у табличной.




Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Трехколоночная верстка
Цена — это то, что вы платите. Ценность — это то, что вы получаете.

Уоррен Баффет

Вступайте в группу!