Из PSD в HTML. Вёрстка подвала

В шаблоне index.html в блоке <div id="footer"></div> запишем следующий код:

<div id="footer">

<div class="content"> <div class="left"> <span>Copyright © example.com 2014</span> <a href="">Каталог</a> <a href="">Блог</a> <a href="">Скидки и акции</a> <a href="">Прайс-лист</a> <a href="">О компании</a> <a href="">Контакты</a> </div> <div class="count"> <img src="img/count.jpg" alt=""> </div> </div> </div>

В файле со стилями добавим к селектору #footer высоту, фон и границу сверху:

#footer {
    height: 72px;
    background-color: white;
    border-top: 3px solid #ddd;
    position: absolute;
    margin-bottom: 0;
    width: 100%;
}

Для селектора .left запишем свойства:

#footer .left {
    float: left;
    margin-top: 29px;
    font-size: 12px;
    line-height: 12px;
}

Для копирайтов запишем свойства:

#footer .left span {
    margin-right: 97px;
}

Для ссылок:

#footer .left a {
    text-decoration: none;
    font-weight: bold;
}

#footer .left a+a {
    margin-left: 17px;
}

Для счетчика:

#footer .count {
    float: right;
    margin-top: 19px;
}

Видео к уроку

Комментарии