Из PSD в HTML. Левая колонка

Перед тем, как приступить к верстке левой колонки, изменим внутренние отступы у селектора #content, а также удалим блоки с классом content в левой колонке и центральной части в шаблоне index.html.

Для селектора #content укажем отступы слева и справа по 29px, а также, в связи с тем, что изменилась высота подвала, отступ снизу 102px:

#content {
    padding: 0 29px 102px;
    overflow: hidden;
    clear: both;
    margin-top: 30px;
}

В файле index.html после того, как вы удалите блоки с классом content из левой колонки и центральной части, код будет выглядеть следующим образом:

<div id="content">
    <!--Левая колонка-->
    <div id="leftcol">

    </div>
    <!--Контент-->
    <div id="main">
        <h1>...</h1>
        <p>...</p>
    </div>
</div>

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

#leftcol {
    width: 220px;
    padding: 3px 3px 4px;
    float: left;
    margin-right: 18px;
}

Так как внутри левой колонки будут находится блоки, имеющие тень, то мы должны для отображения этой тени указать отступы внутри padding: 3px 3px 4px;, иначе она будет обрезаться, так как у блока, в котором находится левая колонка, т.е. у селектора #content, установлено свойство overflow: hidden;

В файле index.html добавим три блока с классом block – для корзины, для поиска по каталогу и блок для категорий товаров:

<div id="leftcol">
    <!--Корзина-->
    <div class="block">

    </div>
    <!--Поиск по каталогу-->
    <div class="block">

    </div>
    <!--Категории товаров-->
    <div class="block">

    </div>
</div>

В файле со стилями запишем свойства для селектора .block:

.block {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: white;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 20px;
}

Здесь при помощи свойства box-shadow мы задаем тень для блока. Параметры тени можно узнать в программе Adobe Photoshop таким же образом, как мы это делали для текста, имеющего тень.

В следующих уроках мы будем работать над каждым блоком по отдельности, начнем с корзины.


Видео к уроку

Комментарии