www.rfpost.ru - Красивые и прикольные имена электронной почты

HTML Логические блоки

DIV и SPAN

Элемент div и span используется для выделения логической структуры блока и встроенного блока HTML-документа. Например несколько абзацев с помощью элемента div можно выделить в единый блок и затем отформатировать с помощью стилей. Элемент span отличается от элемента div тем, что он оперирует не с блочными элементами (абзац, заголовок), а с текстом. Поэтому при использовании элемента span браузер не отводит отдельную строку, как это происходит с блочными элементами.

Вёрстка сайта div блоками.

Пример вёрстки сайта div блоками.

Файл (например index.htm) будет иметь вид:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">Верхний div блок</div>
<div id="left">Левый div блок</div>
<div id="content">div блок по центру</div>
<div id="clear"></div>
<div id="footer">Нижний div блок</div>
</div>
</body>
</html>

Файл style.css:

body, html {
margin:0px; /*обнуляем поля и отступы, чтобы браузеры вели себя адекватно*/
padding:0px;
text-align:center; /*центрируем для браузера IE */
}
#container{
width:810px; /* фиксированная ширина в 800 пикселей*/
margin:0 auto; /* ровняем по центру - по горизонтали */
text-align:left; /*контент по левому краю, анулируем tex-align:center; в Body*/
}
/*Стили для верхнего div блока*/
#header{
background-color:green;/*зелёный фон div блока*/
}
/*Стили для левого div блока*/
#left{
background-color:red;/*красный фон div блока*/
width:180px; /*ширина левого div блока */
float:left; /*располагаем по левому краю, с обтеканием справа*/
}
/*Стили для div блок по центру*/
#content{
background-color:yellow;/*желтый фон div блока*/
margin:0px; /*необходимые обнуления*/
margin-left:181px; /*отступ слева, ширина левого div блока + 1px*/
}
#clear{
clear:left;/*отменяем обтекание, прижатого к левой стороне блока*/
}
/*Стили для нижнего div блока*/
#footer{
background-color:blue;/*голубой фон div блока*/
}


HTML



© Copyright 2005 www.e-inform.ru
|