Store

Верстка каталога товаров ч.1

В этом уроке и в следующих 2-х будет верстаться каталог товаров.

Если у Вас нет верстки из бесплатных уроков уровня ПРОФЕССИОНАЛ, то можете скачать ее здесь — imdiz.ru/files/store.zip. Создайте папку store на компьютере и распакуйте скачанный архив в эту папку. У Вас должна получиться папка store со следующей структурой:

В первую очередь подключим правильно шрифт.

Как правильно подключать шрифты в HTML и CSS

Для правильного подключения шрифта нужно:

• скачать шрифт — это файлы с расширением .ttf;
• загрузить скачанные шрифты в папку сайта — обычно создается новая папку fonts, и все шрифты загружаются в нее;
• подключить шрифты в файле style.css.

На уровне ПРОФЕССИОНАЛ шрифт подключался в style.css строкой:

Здесь путь до шрифта указан в строке src: url(https://imdiz.ru/files/store/fonts/Roboto.ttf);. Как видите шрифт подключается прямо с сайта imdiz.ru, и скачивать шрифт не надо.

А в только что скачанном Вами архиве imdiz.ru/files/store.zip путь до шрифта выглядит так src: url(../fonts/Roboto-Regular.ttf); (это в файле style.css в самом верху). Здесь шрифт уже находится в Вашей верстке. Находится он в папке fonts. Вы можете открыть Вашу папку fonts и увидите там несколько шрифтов, и один из них называется Roboto-Regular.ttf. Вообще в этой папке сейчас целое семейство шрифтов Roboto. Да, «семейство шрифтов» — это нормальный термин, используемый в сайтостроении и типографике.

Сразу разберу путь «url(../fonts/Roboto-Regular.ttf)». Эта строка находится в файле style.css, а он находится в папке css. Так вот, первые 2 точки означают — выйти из папки css. Затем слеш означает — зайти в папку fonts. Ну, а в папке fonts уже взять файл Roboto-Regular.ttf. То есть браузер при обработке верстки будет проходить именно такой путь, чтобы подключить нужный шрифт.

Такой путь «../fonts/Roboto-Regular.ttf» в CSS называется относительным. Так как он начинается относительно чего-то, в данном случае относительно файла style.css.

А вот путь «https://imdiz.ru/files/store/fonts/Roboto.ttf» называется абсолютным, так как в нем указан абсолютный адрес.

Шрифт подключен. Идем дальше.

Начало верстки каталога товаров

Теперь нужно сверстать новую страницу сайта с каталогом товаров.

Для сдачи заказчику или работодателю нужно готовить полную страницу. То есть нельзя сверстать только один каталог. Новая страница — это новый html-файл. Но шапка и подвал на всех сайтах одинаковые, поэтому в этот новый html-файл нужно будет скопировать верхушку и подвал верстки из index.html. СSS-файл останется тот же — style.css, он общий для всех страниц сайта. Новые стили нужно будет добавлять в этот же style.css.

Каталог товаров обычно представлен в 2-вариантах:

1-ый вариант:

В 1-ом варианте товары расположены в строку, а во 2-м — в столбец. Обычно в каждом интернет-магазине есть кнопки, чтобы расположить товары как Вы хотите. Обычно кнопки выглядят так: . И верстать нужно оба варианта. Часто верстаются 2 разных файла, например, products.html и products_row.html (row переводится как «строка»).

Начнем с создания нового файла.

В Вашей папке store создайте файл products_row.html. Как уже было написано, в этот файл нужно перенести верхушку и низ сайта. Всё лишнее нужно убрать. Например, из верхушки нужно убрать строку . Данная строка отвечает за подключение карусели, которая использовалась на главной странице. На странице каталога карусели не будет. Также, внизу нужно убрать все теги . Код в products_row.html должен остаться таким:

 
1$100.00
Categories
Desktops
PC (0)Mac (1)
Laptops & Notebooks
Macs (0)Windows (1)
Components
Mice and Trackballs (0)Monitors (1)Printers (0)Scanners (0)Web Cameras (0)
TabletsSoftwarePhones & PDAsCamerasMP3 Players 

Call us: +9 999 99 999 99

Тег ul для верстки каталога товаров

Чаще всего оба варианта верстаются списками, то есть тегом . И выглядит это примерно так:

• Здесь карточка товара
• Здесь карточка товара
• Здесь карточка товара
• Здесь карточка товара

Информация о каждом товаре помещается в тег .

О расположении товаров в столбец рассказывать особо нечего. При использовании тега карточки товаров итак расположатся сверху вниз, так как — это блочный элемент.

Больше интереса представляет собой расположение товаров в строку. Чтобы карточки встали в одну строку нужно использовать CSS-свойство flex.

Сперва сразу итоговые коды верстки products_row.html и style.css:

 
1$100.00
Categories
Desktops
PC (0)Mac (1)
Laptops & Notebooks
Macs (0)Windows (1)
Components
Mice and Trackballs (0)Monitors (1)Printers (0)Scanners (0)Web Cameras (0)
TabletsSoftwarePhones & PDAsCamerasMP3 Players 

Call us: +9 999 99 999 99
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global VersionСРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
В наличии
-17%
Xiaomi Mi 10 8/128GB Grey/Серый Global Version
СРАВНИТЬ
49 900₽
КУПИТЬ
 

@font-face < font-family: Roboto; font-display:swap; src: url(../fonts/Roboto-Regular.ttf); >* < box-sizing: border-box; outline: 0; margin: 0; padding: 0; >html, body < margin: 0; font-size: 16px; font-family: Roboto; >.header < background: #cb2d41; padding: 35px 0; >.container < width: 1140px; display: flex; align-items: center; padding-left: 15px; padding-right: 15px; margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; >.header-right < display: flex; align-items: center; margin-left: auto; >.search-form < display: flex; align-items: center; margin: 0 auto; width: 270px; height: 50px; border: 1px solid rgba(255,255,255,.2); padding-left: 5px; padding-right: 10px; >input < outline: 0; border: none; background: none; >.search-input < color: #fff; width: 90%; height: 100%; font-size: 12px; >::-webkit-input-placeholder < color: #fff >:-moz-placeholder < color: #fff >::-moz-placeholder < color: #fff >:-ms-input-placeholder < color: #fff >button < outline: 0; border: none; background: none; cursor: pointer; >.search-i < color: #fff; >.cart-informer < color: #fff; padding-top: 0; padding-left: 20px; >.cart-informer__button < margin-left: auto; margin-right: auto; display: flex; align-items: center; >.cart-informer__count < color: #111; font-size: 10px; background-color: #fff; width: 23px; height: 23px; margin-right: -4px; margin-left: 4px; display: flex; align-items: center; justify-content: center; >.cart-informer__icon < width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; >.cart-informer__icon-i < color: #fff; >.cart-informer__i, .cart-informer__value < color: #fff; font-weight: 700; font-size: 12px; padding-left: 10px; >.cart-informer__i < font-size: 11px; margin-top: -2px; >.menu < height: 60px; box-shadow: 0 10px 10px 0 #e0e0e0; >.menu__container < position: relative; >.catalog < position: absolute; width: 260px; top: 0; background-color: #fff; >.catalog__header < height: 60px; font-weight: bold; padding-left: 20px; padding-right: 20px; border: 1px solid #e0e0e0; border-bottom: none; border-top: none; justify-content: space-between; align-items: center; display: flex; >.catalog__header-icon < font-size: 21px; >.catalog__list < position: relative; z-index: 2; >ul < padding: 0; margin: 0; >li < list-style: none; margin: 0; padding: 0; >.catalog__link < height: 60px; font-size: 14px; padding-left: 20px; padding-right: 20px; border: 1px solid #e0e0e0; border-bottom: none; align-items: center; display: flex; >.catalog__item:last-child .catalog__link < border-bottom: 1px solid #e0e0e0; >.catalog__link-img < margin-right: 10px; margin-top: -3px; >.catalog__subcatalog < width: 867px; display: flex; flex-direction: column; flex-wrap: wrap; background-color: #fff; position: absolute; opacity: 0; visibility: hidden; left: 280px; top: 0; height: 100%; padding: 20px; transition: all .3s; >.catalog__item:hover .catalog__subcatalog < opacity: 1; visibility: visible; left: 260px; >.catalog__subcatalog-link < font-size: 14px; color: #111; padding-top: 5px; padding-bottom: 5px; >.menu__nav < padding-left: 290px; height: 100%; display: flex; align-items: center; >.menu__nav-link < font-weight: bold; font-size: 14px; padding-right: 20px; transition: all .3s; >.menu__phone < display: flex; align-items: center; justify-content: flex-end; color: #cb2d41; font-size: 14px; font-weight: bold; margin-left: auto; border-left: 1px solid #e0e0e0; padding-left: 40px; height: 60px; >.menu__phone-icon < font-size: 18px; >.menu__phone-span < padding-left: 10px; padding-right: 5px; color: #111; transition: all .3s; >.menu__phone:hover .menu__phone-span < color: #cb2d41; >.slider < background: url(https://imdiz.ru/files/store/img/banner/bg-slider.png) no-repeat; height: 541px; >.slider__wrapper < width: 600px; margin-left: 400px; height: 541px; >.slider__carousel_desc < position: absolute; top: 110px; color: #fff; >.slider__carousel_desc-title < font-size: 90px; >.slider__carousel_desc-text < font-size: 35px; padding-top: 5px; >.slider__carousel_desc-text < font-size: 35px; padding-top: 5px; >.slider__carousel_button < color: #fff; font-size: 14px; font-weight: bold; text-transform: uppercase; background-color: #cb2d41; width: 160px; height: 50px; margin-top: 20px; transition: all .3s; display: flex; justify-content: center; align-items: center; >.slider__carousel_button:hover < background-color: #111; color: #fff; >.slider__img < display: block; width: 100%; >.slider__carousel < width: 100%; position: relative; z-index: 1; >p < margin: 0; padding: 0; >img < border-style: none; >a < color: #111; text-decoration: none; >a:hover < color: #cb2d41; >.banners < display: flex; align-items: center; justify-content: space-between; padding-top: 40px; padding-bottom: 30px; >.banners__link < display: block; margin-bottom: 10px; width: 45%; >.banners__img < max-width: 100%; >.container-advantages < display: block; >.advantages < border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; >.advantages__item < height: 55px; padding-left: 40px; width: 33.333333%; display: flex; align-items: center; justify-content: start; >.advantages__item:nth-child(2) < border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; >.advantages__item:nth-child(2) < border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top: none; border-bottom: none; >.advantages__icon < margin-right: 15px; width: 30px; height: 30px; >.advantages__icon_car < background: url(https://imdiz.ru/files/store/img/icons-sprites.png) -114px -10px; >.advantages__icon_money < background: url(https://imdiz.ru/files/store/img/icons-sprites.png) -10px -65px; >.advantages__icon_fast < background: url(https://imdiz.ru/files/store/img/icons-sprites.png) -60px -65px; >.products-container < display: block; >.tabs-main < padding-top: 40px; padding-bottom: 70px; >.tabs-main__list < border-bottom: 1px solid #e0e0e0; display: flex; justify-content: center; >.tabs-main__list-item-link < display: block; padding: 0 20px 10px 20px; border-bottom: 2px solid transparent; margin-bottom: 0; font-size: 18px; color: #999; transition: all .3s; >.tabs-main__list-item.ui-tabs-active .tabs-main__list-item-link < border-bottom: 2px solid #cb2d41; color: #111; >.products-main < position: relative; >.products-main .owl-stage-outer < border-bottom: 1px solid #e0e0e0; >.products-main__product < overflow: hidden; >.products-main__link < text-align: center; display: block; height: 100%; transition: all .3s; border: 2px solid transparent; padding-top: 20px; padding-bottom: 20px; position: relative; >.products-main__link:hover < border-color: #cb2d41; color: #111; >.products-main__link:hover .products-main__btn-group < opacity: 1; visibility: visible; >.products-main__img-wrapper < width: 164px; height: 164px; margin-left: auto; margin-right: auto; overflow: hidden; >.products-main__img < margin-left: auto; margin-right: auto; >.products-main__info < padding-top: 10px; padding-bottom: 10px; >.products-main__name < font-size: 12px; color: #111; padding-bottom: 10px; >.products-main__price < font-size: 12px; font-family: Roboto-Bold; color: #cb2d41; display: flex; align-items: center; justify-content: center; >.products-main__price_span < padding-right: 2px; padding-left: 2px; >.products-main__price_old < color: #999; text-decoration: line-through; >.products-main__btn-group < opacity: 0; width: 100%; visibility: hidden; position: absolute; bottom: 20px; background-color: #fff; transition: all .3s; display: flex; align-items: center; justify-content: center; >.products-main__btn < width: 45px; height: 45px; margin-left: 2px; margin-right: 2px; border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; >.products-main__btn:hover < background-color: #cb2d41; border-color: #cb2d41; >.products-main__btn-icon < transition: all .3s; >.products-main__btn:hover .products-main__btn-icon < color: #fff; >.products-main .owl-nav < display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; bottom: 7px; >.products-main .owl-nav button < margin-left: 10px; margin-right: 10px; width: 25px; height: 25px; background-color: #fff; transition: all .3s; >.products-main .owl-nav button.owl-prev < border: 1px solid #e0e0e0; background-color: #fff; >.products-main .owl-nav button.owl-prev:hover < background-color: #cb2d41; border-color: #cb2d41; >.products-main .owl-nav button.owl-next < border: 1px solid #e0e0e0; background-color: #fff; >.products-main .owl-nav button.owl-next:hover < background-color: #cb2d41; border-color: #cb2d41; >.products-main .owl-nav button span < font-size: 32px; margin-top: -10px; display: block; transition: all .3s; >.products-main .owl-nav button:hover span < color: #fff; >.footer < background-color: #f8f8f8; padding-bottom: 20px; border-top: 1px solid #e0e0e0; >.container-footer < display: block; >.footer__top < padding-top: 60px; padding-bottom: 60px; display: flex; align-items: center; justify-content: space-between; >.footer__top-block < width: 33.333333%; padding: 0; display: flex; align-items: center; justify-content: start; >.footer__top-block_icon < margin-right: 10px; >.footer__phone_icon < width: 32px; height: 35px; background: url(https://imdiz.ru/files/store/img/icons-sprites.png) -62px -10px; >.footer__top-block_text < font-size: 14px; font-family: Roboto; font-weight: bold; padding-bottom: 5px; >.footer__top-block_value < font-size: 18px; >.footer__mail < justify-content: center; >.footer__mail_value < color: #cb2d41; >.footer__mail_icon < width: 32px; height: 35px; background: url(https://imdiz.ru/files/store/img/icons-sprites.png) -10px -10px; >.footer__contact < justify-content: flex-end; >.footer__contact_link < color: #fff; font-size: 14px; font-family: Roboto; font-weight: bold; text-transform: uppercase; background-color: #cb2d41; width: 160px; height: 30px; transition: all .3s; display: flex; align-items: center; justify-content: center; >.footer__middle < display: flex; align-items: center; justify-content: space-between; >.footer__middle_banner < display: block; height: 117px; >.footer__middle_banner:first-child < margin-right: 10px; margin-bottom: 0; >.footer__middle_banner-img < width: 100%; >.footer__bottom < padding-top: 40px; display: flex; justify-content: space-between; >.footer__bottom_block < padding-top: 20px; width: 25%; >.footer__bottom_block-title < font-size: 18px; padding-bottom: 10px; border-bottom: 2px solid #cb2d41; display: inline-block; >.footer__bottom_block-list < padding-top: 10px; >.footer__bottom_block-item < padding-top: 5px; padding-bottom: 5px; >.footer__bottom_block-link < font-size: 14px; >.mobile-menu-button < display: none; width: 0; height: 0; >.mobile-menu-store < background-color: #fff; position: fixed; width: 90%; height: 100%; z-index: 10; left: -100%; transition: all .3s; top: 0; overflow: auto; >.mobile-menu-store_opened < left: 0; >.mobile-menu-store__close < position: fixed; top: 5px; right: -50px; transition: all .3s; >.mobile-menu-store_opened .mobile-menu-store__close < right: 5px; >.mobile-menu-store__icon < color: #fff; font-size: 31px; >.mobile-menu-store__link < display: block; font-size: 16px; border-bottom: 1px solid #e0e0e0; padding: 10px 0 10px 10px; >.overlay-store < background-color: rgba(0,0,0,.7); position: absolute; width: 100%; height: 100%; z-index: 9; top: 0; left: 0; >@media (max-width: 1199px) < .container< width: 960px; >.catalog__subcatalog < width: 673px; >> @media (max-width: 991px) < .container< width: 720px; >.menu__container < display: block; >.catalog < width: 100%; position: relative; >.menu__nav < display: none; >.menu__phone < display: none; >.catalog__subcatalog < width: 0; display: none; >.mobile-menu-button < margin-bottom: 25px; margin-bottom: 0; margin-right: 25px; display: block; width: auto; height: auto; >.mobile-menu-button__icon < font-size: 32px; color: #fff; >.menu < height: auto; box-shadow: none; >.slider < display: none; >.advantages__item < width: 33.333333%; padding-left: 0; justify-content: center; >> @media (max-width: 767px) < .container< width: 540px; flex-direction: column; >.mobile-menu-button < margin-right: 0; >.logo < margin-top: 20px; margin-bottom: 20px; >.header-right < flex-direction: column; margin-left: 0; >.cart-informer < padding-left: 0; margin-top: 20px; >.banners < display: block; >.banners__link < width: auto; >.advantages < display: block; >.advantages__item < width: auto; justify-content: left; padding-left: 15px; >.advantages__item:nth-child(2) < border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-left: none; border-right: none; >.footer__top < display: block; >.footer__top-block < width: auto; justify-content: center; padding-top: 20px; >.footer__middle < flex-direction: column; >.footer__bottom < flex-direction: column; >.footer__bottom_block < width: auto; >> @media (max-width: 575px) < .container< width: auto; >.tabs-main__list < flex-direction: column; align-items: center; >.tabs-main__list-item-link < font-size: 16px; padding-bottom: 5px; margin-bottom: 10px; padding-top: 10px; padding-right: 0; padding-left: 0; >.mobile-menu-store < width: 80%; >> /* Products_row page */ .products__container < justify-content: flex-end; >.imdiz-products < width: 860px; margin-right: -10px; >.imdiz-products_row < display: flex; flex-wrap: wrap; >.imdiz-product < list-style: none; width: 33.3%; padding: 10px; >.imdiz-product__inner < padding: 20px; border: 1px solid #ededed; transition: all .3s; >.imdiz-product__inner:hover < border-color: #cb2d41; >.imdiz-product__av < text-align: center; color: #6db801; padding-bottom: 20px; >.imdiz-product__image-wrap < position: relative; >.imdiz-product__img-link < display: block; text-align: center; >.imdiz-product__discount < position: absolute; padding: 4px; color: #fff; border-radius: 9px 0 0 9px; background-color: #f5181a; right: 27px; top: 0; font-size: 18px; >.imdiz-product__info < text-align: center; padding-top: 20px; >.imdiz-product__name < font-size: 14px; color: #000; text-transform: uppercase; text-decoration: none; transition: all .3s; >.imdiz-product__name:hover < color: #cb2d41; >.imdiz-product__compare-form < padding-top: 20px; >.imdiz-product__compare-input < display: none; >.imdiz-product__compare-label < text-transform: uppercase; border-bottom: 1px dashed #000; cursor: pointer; >.imdiz-product__price < font-size: 22px; text-align: center; padding: 20px 0; >.imdiz-product__submit < background-color: #cb2d41; border: 1px solid #cb2d41; width: 168px; height: 41px; color: #fff; font-size: 18px; padding: 0; display: block; margin: 0 auto; cursor: pointer; transition: all .3s; >.imdiz-product__submit:hover < background-color: #fff; color: #cb2d41; >/* Products_row page (END) */

Ваш style.css можете полностью заменить.

В style.css новый код начинается после строки /* Products_row page */. Большие участки кода для новых страниц лучше комментировать для удобства. Но перед сдачей готовой работы все комментарии нужно удалять. Это считается хорошим тоном.

Добавьте коды в соответствующие файлы, сохраните (CTRL+S).

Для изображения товара сохраните себе эту картинку в папку img:

Откройте products_row.html в браузере. Перед Вами готовая верстка каталога товаров.

И здесь небольшое отступление. На уровне ПРОФЕССИОНАЛ не добавлена тень под полосой меню:

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

Чтобы появилась тень в style.css изменен участок кода:

Здесь за тень отвечает строка box-shadow: 0 10px 10px 0 #e0e0e0; . Первое значение — это сдвиг по оси x, второе значение — сдвиг по оси y, третье — радиус размытия (чем он больше, тем шире и светлее тень), четвертое — растяжение (положительное значение растягивает тень, отрицательное сжимает), последнее значение — цвет тени.

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

Начните зарабатывать версткой сайтов до 50 000 р./месяц уже через 5 дней

Решили зарабатывать самостоятельно?

Читайте мою статью для самозанятых

Источник

Скроенные джинсы

Некоторый текст о джинсах. Super slim and comfy lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Создать карточку товара

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.card <
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
>

.price color: grey;
font-size: 22px;
>

.card button border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
>

.card button:hover opacity: 0.7;
>

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник