Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке меню и шапки сайта landing-order.ru.

Верстка меню и шапки сайта landing-order.ru

Сначала делаем фон меню.

Поскольку полоска меню — это одинаковый градиент, то вырезаем полоску на всю высоту блока меню толщиной 1пкс и сохраняем в папку.

Затем создаем структуру меню в index.html:

В main.css прописываем такой код:

Хотя у нас высота блока 54пкс, но мы указываем 41, т.к. 13 добавляется за счет размера шрифта (41+13=54).

Верстка шапки сайта



Первым делом, вырезаем картинку для фона шапки из шаблона и сохраняем в папку с картинками.

Верстка шапки сайта

В файл index.html заносим простой код:

А в файл main.css заносим такой код:

В следующей статье мы займемся версткой следующего блока — «Наши преимущества», не пропустите!