HTML, CSS урок шестой

HTML, CSS урок шестой

Создание блока для контента

На этом уроке начнем наполнять сайт информацией. Для этого нужно создать область на странице где будет находиться эта информация. Начнем.

Добавьте в наш файл index.html после кода меню вот такой код HTML:

<div class="content">
<h2>Заголовок</h2>
<p>Здесь пишем Ваш текст</p>
<p>Новый абзац</p>
<p>Ещё Ваш текст</p>
</div>

В CSS выравняем блок "content" по центру, укажем ширину, сделаем отступы, выделим блок тенью. Добавляем этот код в style.css 

.content
{
width:700px;
margin:0 auto;
padding:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset;
}

Выравняем заголовок по центру, увеличим размер и зададим цвет.

.content h2
{
font: 30px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-align:center;
}

Теперь изменим размер и цвет текста. Добавим отступ для красной строки:

.content p
{
font: 14px Verdana, Arial, Helvetica, sans-serif;
color:#444;
text-indent:20px;
}

Вот и готово, блок контента у нас создан. Теперь сами попробуйте изменить размер блока, можете изменить шрифт. 

Не бойтесь экспериментировать!

На следующем уроке создадим подвал нашего сайта.