Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Урок CSS вёрстки 2. Текст в 3 колонки
Не нравится(-) 19 Нравится(+)
Урок CSS вёрстки 2. Текст в 3 колонки

Наш второй урок CSS верстки. Он расскажет об одном из самых простых способов вёрстки в несколько столбцов, без использования таблиц.

Основой наших столбцов будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №2 Текст в 3 колонки
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей всего блока */
#body {
     width:900px; /* Установка ширины блока в 900 пикселей */
}

/* Задание стилей левого столбца */
#left {
     float:left; /* Установка обтекания */
     width:300px; /* Установка ширины столбца */
     background:#aeddff; /* Установка фонового цвета */
     height: 300px; /* Установка высоты столбца */
}

/* Задание стилей правого столбца */
#right {
     float:right; /* Установка обтекания */
     width:300px; /* Установка ширины столбца */
     background:#ffecbe; /* Установка фонового цвета */
     height: 300px; /* Установка высоты столбца */
}

/* Задание стилей среднего столбца */
#center {
     margin-left:300px; /* Установка отступа */
     margin-right:300px; /* Установка отступа */
     background:#beffc0; /* Установка фонового цвета */
     height: 300px; /* Установка высоты столбца */
}


3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div id="body">
        <div id="left">Текст в левом столбце</div>
        <div id="right">Текст в правом столбце</div>
        <div id="center">Текст в среднем столбце</div>
    </div>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Способ довольно прост, тем не менее эффективен и гибок. Он допускает любое форматирование столбцов и их содержания.

Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.x; Oprea 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 1 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 34706 раз(а) и написали 15 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!