Простая div верстка сайта, с CSS стилями

Хотите наверно свой сайт наверстать, да? А я вам помогу. Делается div верстка сайта просто! Для начала просто определитесь, какие блоки сайта вам нужны, и сколько их будет, а также где они будут размещены. Я вам буду это все показывать на примере данного блога, где вы сейчас находитесь. Здесь по большому счету всего 5 блоков. [...]

Запись Простая div верстка сайта, с CSS стилями впервые появилась Блог WEB любителя.

Хотите наверно свой сайт наверстать, да? А я вам помогу.
Делается div верстка сайта просто! Для начала просто определитесь, какие блоки сайта вам нужны, и сколько их будет, а также где они будут размещены. Я вам буду это все показывать на примере данного блога, где вы сейчас находитесь. Здесь по большому счету всего 5 блоков.

Верхний блок (заголовок сайта).
Блок меню (под верхним блоком).
Блок контента (блок где находится основной текст).
Боковой блок (блок справа от контента).
Нижний блок (самый нижний блок сайта).

Для примера вот вам картинка, которая поделена на блоки:

Смотря на все это, мы уже понимаем, что нам нужны 5 тегов DIV. Мы их пишем для удобства просто друг под другом, присваивая каждому тегу свой класс. Но, нам еще будут нужны два дополнительных DIV тега, их не будет видно, но благодаря им все будет отображаться корректно.
Один тег мы ставим сразу после меню, в него мы заключаем контент, правый блок, и еще один дополнительный тег. Для чего мы это делаем?! Для того чтоб блок контента и правый блок находились ровно по центру вместе со всеми друими блоками. Для чего на нужен еще один тег после контента и правого блока?! Да для того чтоб мы закрыли само тело сайта, и чтоб корректно отображался наш нижний блок, находясь на своем месте.

Вот такой код HTML страницы у нас получается:

<div class="header"></div>

<div class="menu"></div>

<div class="pages">
<div class="content"></div>

<div class="sidebar"></div>

<div class="foot"></div>
</div>

<div class="footer"></div>

При просмотре страницы у нас конечно же ничего видно не будет, кроме текста. Нам нужно задать CSS стили для div верстки сайта. Занесем мы все наши стили в отдельный файл, как все это делается, вы наверно уже знаете. Если же есть трудности, то объясню кратко.
Создаем файл с расширением CSS, например «style.css», в него же и будем записывать стили.
Прикрепляем этот файл к странице HTML. То есть между тегами HEAD мы ставим следующий код:

<link href="style.css" rel="stylesheet" type="text/css" />

Ну а теперь непосредственно к самим  стилям.
Нам нужно чтоб вся наша div верстка сайта была определенной. То есть верхний блок, ниже него меню, ниже верха и меню контент и справа от него боковушка, ну и ниже всего этого нижний блок.

Стили мы сделаем немного развернутые, то есть фон и границы блокам зададим. Все это задаем для того чтоб нам было видно все блоки.
Код стилей таков:

.header {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	width:800px;
	height:100px;
	border:1px solid #000000;
	background:#cccccc;
	}
.menu {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	width:800px;
	height:30px;
	border:1px solid #000000;
	background:#cccccc;
	}
.pages { 
    margin-left:auto; 
	margin-right:auto; 
	width:800px;
	}
.content {
	margin-right:10px;
	width:606px;
	height:300px;
	border:1px solid #000000;
	background:#cccccc;
	float:left;
	}
.sidebar {
	width:180px;
	height:300px;
	border:1px solid #000000;
	background:#cccccc;
	float:left;
	}
.foot {
	clear:both;
	}
.footer {
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	width:800px;
	height:50px;
	border:1px solid #000000;
	background:#cccccc;
	}

В итоге, если мы все сделали правильно, то можем сохранить все файлы и проверить. Получится у нас вот такая картина:

Надеюсь все понятно и доступно. Жду вас в следующих моих статьях!

Запись Простая div верстка сайта, с CSS стилями впервые появилась Блог WEB любителя.