Створення контенту

Тепер переходимо до створення контенту по центру. Починається зі створення. Далі встановлюємо його в наш html документ.

Приклад:

.peregon_content {

float: left;

width: 460px;

padding: 20px 19px 0 19px;

background: #1b1919;

border: 1px solid #363434;

}

.content_section {

clear: both;

padding: 0 0 0 0;

}

.content_section p span {

color: #ffffff;

}

.margin_bottom Встановлює величину відступу від нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елементу.

Добавляем в начале сss файла следующий код с параметрапи для контента

Приклад:

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }

.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; }

.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; }

.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; }

.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; }

.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; }

.margin_right_10 { margin-right: 10px; }

.margin_right_60 { margin-right: 60px; }

.horizontal_divider {

background: url(images/peregon_horizontal_divider.jpg) bottom repeat-x;

}

В html Файл Встановлюється створений стиль та добавляємо тег заголовка та параграфу для введення інформації

Приклад:

<div class="peregon_content margin_right_10">

<div class="content_section">

<div class="header_02"></div>

<h3 align="center"></h3>

<p align="center"></p>

</div>

<div class="margin_bottom_20 horizontal_divider"></div>

<div class="margin_bottom_20"></div>

<div class="margin_bottom_40"></div>

</div> <!-- end of content -->

Результат:

Створення навігації з права

Далі створюється навігація з правої сторони веб-сторінки для цього підключається в html файлі вже готову таблицю стилів.

Приклад:

<div class="peregon_side_bar">

<div class="header_01"></div>

<p>

</p>

<p></p>

</div>

При введенні інформації таблиця буде розширюватись.

Створення підвалу

Далі створюється підвал для сайту. Для цього створюється посилання на фоновий малюнок підвалу в таблиці стилів з заданими параметрами та підключається в html документі (мал

Приклад:

#peregon_footer {

clear: both;

width: 990px;

height: 40px;

margin: 0 auto;

padding: 20px 0 0 0;

text-align: center;

background: url(images/peregon_footer.jpg) no-repeat;

}

html Код:

<div id="peregon_footer">

© 2015</a> Атвор Сайту Перегон Сергій

</div> <!-- end of footer -->

</div>

Результат:

Дата добавления: 2015-07-11