Из PSD в HTML. Вёрстка шапки

Наша шапка состоит из двух блоков: блок с логотипом в левой части, и блок с контактами в правой части. Запишем в файле index.html код для шапки:

<div id="header">
    <div class="content">
        <div class="logo">

        </div>
        <div class="contacts">

        </div>
    </div>
</div>

В блоке с классом <div class="logo"></div> пропишем путь к изображению при помощи тега <img src="" alt="">. Так как логотипы в шапке обычно являются ссылками, ведущими на главную страницу, то этот тег мы заключим между тегами <a href=""></a>:

<div class="logo">
    <a href=""><img src="img/logo.png" alt=""></a>
</div>

В блоке с классом <div class="contacts"></div> запишем контактную информацию, каждую строку поместим в тег <p></p>:

<div class="contacts">
    <p>Телефон: 8 800 2000 01 01<br>звонок бесплатный</p>
    <p>E-mail: example@gmail.com</p>
    <p>
        <a href=""><img src="img/vk.png" alt=""></a>
        <a href=""><img src="img/fb.png" alt=""></a>
        <a href=""><img src="img/tw.png" alt=""></a>
        <a href=""><img src="img/gp.png" alt=""></a>
    </p>
</div>

Запись звонок бесплатный на макете находится на новой строке, поэтому перед ней мы поставили тег <br>. Иконки социальных сетей являются ссылками, поэтому их мы добавили между тегами <a href=""></a>.

Переходим к стилям. Первым делом нам нужно указать высоту и фоновое изображение для селектора #header:

#header {
    height: 148px;
    background: white url("img/bg-header.jpg") left top no-repeat;
}

Для блока с логотипом укажем следующие свойства:

.logo {
    margin-top: 51px;
    float: left;
}

Для блока с контактами:

.contacts {
    float: right;
    text-align: right;
    margin-top: 25px;
}

Эти свойства должны применяться только для тех блоков, которые лежат именно в шапке, т.е. в блоке <div id="header"></div>, поэтому здесь мы добавим перед стилями (.logo и .contacts) контекстные селекторы:

#header .logo {
    margin-top: 51px;
    float: left;
}

#header .contacts {
    margin-top: 25px;
    float: right;
    text-align: right;
}

Для абзацев в блоке с контактами запишем следующие свойства:

#header .contacts p {
    font: bold 18px/14px Arial;
    color: black;
}

Теперь нам нужно добавить дополнительные классы для выделенных слов: Телефон, E-mail, а также звонок бесплатный. В шаблоне index.html запишите:

<p><span class="green">Телефон:</span> 8 800 2000 01 01<br><span class="gray">звонок бесплатный</span></p>
<p><span class="green">E-mail:</span> example@gmail.com</p>

В стилях запишем отдельно для селекторов .green и .gray цвета:

.green {
    color: #1d8b15;
}

.gray {
    color: #666;
}

И для отдельно взятых элементов в шапке запишем размер и начертание шрифта:

#header .contacts p .green {
    font-size: 14px;
    font-weight: normal;
}

#header .contacts p .gray {
    font-size: 12px;
    font-weight: normal;
}

С шапкой разобрались. Переходим к горизонтальному меню.

Видео к уроку

Поделиться с друзьями:

Комментарии