Как сделать каталог товаров html

21 ноября 2015 | Опубликовано в css | 3 Комментариев »

Как сделать каталог товаров htmlВ этом уроке мы расскажем о шаблоне интернет-магазина. Он создан с помощью HTML5 и CSS3 в приятной светло-серой гамме. Надеемся, Вам понравится эта страница и Вы откроете для себя новые приемы верстки. Давайте начнем пошаговый урок по созданию верстки на HTML5 и CSS3.

Результат

Как сделать каталог товаров html

Для начала

Как обычно, давайте создадим новую папку для этого проекта и в ней несколько папок, чтобы все было логично расположено:

Код раздела head

Теперь рассмотрим код HTML раздела head:

Идем дальше — раздел body, основная верстка

Вся верстка состоит из четырех основных разделов: шапка сайта с основным меню, логотипом, формой поиска, значками социальных сетей и дополнительным меню с категориями, раздел с прокручивающейся галереей изображений nivoSlider, основной раздел содержимого, состоящий из двух столбцов для всего остального содержимого, и подвал сайта, в котором расположены авторские права. Целиком верстка выглядит так:

Основные стили CSS

Раздел шапки с основным меню, логотипом, формой поиска, дополнительным меню и т.д.

Как сделать каталог товаров html

Вот разметка HTML для этого раздела:

Стили CSS:

Прокручивающаяся галерея изображения и основной раздел содержимого

После шапки страницы идут следующие два раздела: прокручивающаяся галерея изображения nivoSlider и основной раздел содержимого.

Как сделать каталог товаров html

Стили CSS

Стили для прокручивающейся галереи изображений nivoSlider находятся в отдельном файле css/nivo-slider.css, который есть в архиве с исходным кодом.

Раздел подвала страницы

И, наконец, вот раздел подвала страницы:

Как сделать каталог товаров html

Стили CSS

Скрипты JavaScript для шаблона

Вот все необходимые скрипты JavaScript: js/html5.js, js/jquery.js и js/jquery.nivo.slider.pack.js. Все эти библиотеки находятся в архиве с исходным кодом.

js/main.js

Плагину nivoSlider очень легко установить начальное состояние для работы, надеемся, с этим у Вас тоже не возникнет проблем.

Заключение

Поздравляем, верстка интернет-магазина полностью готова. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Andrew Prikaznov

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *