Как сделать каталог товаров html
21 ноября 2015 | Опубликовано в css | 3 Комментариев »
В этом уроке мы расскажем о шаблоне интернет-магазина. Он создан с помощью HTML5 и CSS3 в приятной светло-серой гамме. Надеемся, Вам понравится эта страница и Вы откроете для себя новые приемы верстки. Давайте начнем пошаговый урок по созданию верстки на HTML5 и CSS3.
Результат
Для начала
Как обычно, давайте создадим новую папку для этого проекта и в ней несколько папок, чтобы все было логично расположено:
Код раздела head
Теперь рассмотрим код HTML раздела head:
Идем дальше — раздел body, основная верстка
Вся верстка состоит из четырех основных разделов: шапка сайта с основным меню, логотипом, формой поиска, значками социальных сетей и дополнительным меню с категориями, раздел с прокручивающейся галереей изображений nivoSlider, основной раздел содержимого, состоящий из двух столбцов для всего остального содержимого, и подвал сайта, в котором расположены авторские права. Целиком верстка выглядит так:
Основные стили CSS
Раздел шапки с основным меню, логотипом, формой поиска, дополнительным меню и т.д.
Вот разметка HTML для этого раздела:
Стили CSS:
Прокручивающаяся галерея изображения и основной раздел содержимого
После шапки страницы идут следующие два раздела: прокручивающаяся галерея изображения nivoSlider и основной раздел содержимого.
Стили CSS
Стили для прокручивающейся галереи изображений nivoSlider находятся в отдельном файле css/nivo-slider.css, который есть в архиве с исходным кодом.
Раздел подвала страницы
И, наконец, вот раздел подвала страницы:
Стили CSS
Скрипты JavaScript для шаблона
Вот все необходимые скрипты JavaScript: js/html5.js, js/jquery.js и js/jquery.nivo.slider.pack.js. Все эти библиотеки находятся в архиве с исходным кодом.
js/main.js
Плагину nivoSlider очень легко установить начальное состояние для работы, надеемся, с этим у Вас тоже не возникнет проблем.
Заключение
Поздравляем, верстка интернет-магазина полностью готова. Надеемся, Вам понравился этот урок и он Вам пригодится.
Автор урока Andrew Prikaznov