Урок CSS верстки. Он расскажет об одном из самых простых способов вёрстки в несколько столбцов, без использования таблиц.
Основой наших столбцов будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/*
=============================================================
© 2008
Урок CSS вёрстки Текст в 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) Сохраняем и смотрим, что получилось.
Способ довольно прост, тем не менее эффективен и гибок. Он допускает любое форматирование столбцов и их содержания.
| 
Главная