Скрипт каталога товаров для html сайта
Ищу скрипт каталога товаров-услуг (в моем случае это базы отдыха) для внедрения в сайт на html. Должна быть возможность поиска по нескольким критериям (типа как на сайтах по продаже авто). Возможность встроить в дизайн сайта. Все что нахожу в инете – все старое…. Заранее спасибо
- Как располагать товары в каталоге сайта? Ближе к корню?
- Как в моем случае лучше избавиться от дублей?
- Выдача Яндекса пополнилась предложениями магазинов
На сайте с 12.05.2007
3 февраля 2017, 06:59
loed:
Все что нахожу в инете – все старое….
может потому что это не востребовано никем кроме пары динозавров на html? что мешает на сайт свой сделать каталог в html, без всяких скриптов?
зы. и «старое» не значит «нерабочее».
Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
На сайте с 10.03.2007
3 февраля 2017, 07:12
totamon:
может потому что это не востребовано никем кроме пары динозавров на html? что мешает на сайт свой сделать каталог в html, без всяких скриптов?
зы. и «старое» не значит «нерабочее».
Каталог есть, есть сортировка по параметрам средствами css, а хотелось бы что был полноценный поиск базы по параметрам с любой страницы сайта
На сайте с 13.10.2014
3 февраля 2017, 09:12
Ну это вам светит переход со статики на динамику.
в принципе, каталог написать не так сложно и не долго, можете заказать у какого-нибудь разработчика на широкораспространенном микрофреймворке.
конечно, без ТЗ судить сложно, но не думаю, что это будет дорого стоить
На сайте с 27.09.2010
3 февраля 2017, 10:52
Ну как вариант можно реализовать на MODx по крайней мере ваши чпу не потеряете,легко перенесете ваш шаблон и без проблем внедрите все ваши хотелки!
На сайте с 10.03.2007
3 февраля 2017, 12:15
vryb:
Ну как вариант можно реализовать на MODx по крайней мере ваши чпу не потеряете,легко перенесете ваш шаблон и без проблем внедрите все ваши хотелки!
т.е по любому перенос сайта на cms?
На сайте с 04.12.2013
3 февраля 2017, 12:30
Не обязательно. Можно совместить каталог с вашим статиком. А что значит «каталог есть»?
Домены и скрипт для коротких ссылок: https://u75.ru/domains-for-shortcuts
На сайте с 16.01.2007
3 февраля 2017, 12:41
loed:
а хотелось бы что был полноценный поиск базы по параметрам с любой страницы сайта
loed:
по любому перенос сайта на cms?
Если нет, то как сделать поиск по сайту?
Можно организовать поиск по фалам html, но это дольше и сервак будет грузить, или надо делать индексный файл на основе этих файлов, и по нему искать. короче все это руками и пилить.
Поэтому проще встроить готовую цмс в дизайн, со сохранением структуры и адресов
Осуждаем применение нейросетей в SEO и не только ( https://webimho.ru/forum/148/ ) 🙂 Продвижение сайтов от 25 000 в мес, прозрачно, надежно ( /ru/forum/818412 ), но не быстро, отзывы ( http://webimho.ru/topic/3225/ )
На сайте с 10.03.2007
3 февраля 2017, 13:13
miketomlin:
Не обязательно. Можно совместить каталог с вашим статиком. А что значит «каталог есть»?
ну не каталог полноценный естественно, просто список баз на html с различными параметрами
donc:
Поэтому проще встроить готовую цмс в дизайн, со сохранением структуры и адресов
такой вариант рассматривал, как понял на автомате трудно сохранить урл, а на сайте около 1000 страничек
Верстка интернет-магазина: список товаров
Требования к верстке каталогов интернет-магазинов имеют свойство повторяться из проекта в проект. Поэтому у меня выработался набор стандартных приемов, которыми я хочу поделиться в этой статье.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
В качестве примера мы будем верстать список товаров для интернет-магазина комнатных растений. Демо готового каталога можно посмотреть по ссылке. В результате должен получиться список растений с фото, описаниями и всплывающими кнопками. Кроме того, вид списка можно будет переключать: товары будут выглядеть либо как плитка, либо как таблица.
Адаптивная сетка
Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
.product-wrapper
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
@media only screen and (min-width: 450px) < .product-wrapper < width: 50%; >> @media only screen and (min-width: 768px) < .product-wrapper < width: 33.333%; >> @media only screen and (min-width: 1000px) < .product-wrapper < width: 25%; >> И зададим стили карточек товаров.
.product
Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения margin-right у родителя.
.products
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.
Фото товаров
Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:
Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.
.product-photo
В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.
.product-photo img
Осталось немного увеличивать фото при наведении.
.product:hover .product-photo img
Как все это работает можно посмотреть на примере демо.
Описание товара
Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.
Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .
.product p
А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.
.product p:after
Перечеркнутые цены
Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.
.product-price-old b, .product-price-old small
Всплывающие кнопки
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
.product:hover .product-preview
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.
.product-buttons-wrap
Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.
.product-buttons-wrap:before
Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .
.buttons
Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо.
Переключение вида карточек товаров
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .
$productList.toggleClass('table-layout'); Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
.table-layout .product-main
Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.
.table-layout .product-buttons-wrap
Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.
Меню каталога, основное меню, баннер на главной странице
Новые участки кода index.html находятся между , а в style.css — между /*New*/ /*END*/. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, увидите какой результат будет по итогу урока.
index.html:
Store
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)Tablets
Software
Phones & PDAs
Cameras
MP3 Players
Belkinon
New powerfull
Headphones
More
style.css:
/* NEW */ @font-face < font-family: Roboto; font-display:swap; src: url(https://imdiz.ru/files/store/fonts/Roboto.ttf); >* < box-sizing: border-box; >/* END */ html, body < margin: 0; /* NEW */ font-size: 16px; font-family: Roboto; /* END */ >.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; >/* NEW */ .menu < height: 60px; >.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__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; >/* END */
Начало урока. Разбор файла index.html
Не бойтесь, что файл стал гораздо больше, многие элементы здесь просто повторяются. Сперва я хотел показать код без повторяющихся блоков, но потом всё же решил добавить сразу весь код. Сейчас вы увидите, что на самом деле здесь всё очень просто.
Сперва кратко опишу суть работы меню каталога (далее для краткости буду писать просто «каталог»). Итак, в каталоге будут главные категории, и у некоторых категорий подкатегории. Например, главная категория Desktops и ее подкатегории PC и Mac. В меню каталога блок с подкатегориями будет скрыт, а открываться будет при наведении мыши на основную категорию. Посмотрите, как это сейчас работает на imdiz.ru/store/ или посмотрите короткое видео:
Как обычно, имена классов задаются исходя из назначения блока: menu , catalog , catalog__header и т.д.
Структура меню каталога. Теги ul, li
В menu сразу создается container , чтобы ограничить ширину содержимого. Здесь будет размещаться не только меню каталога, но и навигация и номер телефона. Список категорий будет размещен в блоке catalog , в котором есть вспомогательный блок catalog__wrapper (wrapper переводится «обертка»).
Сам список категорий строится с помощью тега . Это тег для любых списков, в том числе маркированных, как в Microsoft Word. Каждый элемент списка помещается в тег . Структура тега ul выглядит так:
Сама категория, как вы понимаете, помещается в ссылку , ведь категории должны будут вести на разные страницы сайта. Ну, а иконка категории верстается обычным тегом .
У некоторых категорий есть подкатегории, они помещены в блок catalog__subcatalog (subcatalog переводится как «подкаталог»).
Дальше уже вся структура в блоке catalog повторяется, меняются только названия категорий.
Структура навигации на сайте. Тег nav. Кликабельный номер телефона на сайте
С навигацией дела обстоят еще гораздо проще. Для навигации существует специальный тег . А в находятся просто ссылки .
После навигации следует номер телефона. Особенность его в том, что он кликабельный, то есть на него можно нажать, и произойдет вызов. Это делается просто — номер телефона помещается в ссылку , а атрибут href пишется так — href=»tel:+99999999999″ . Благодаря tel в атрибуте происходит вызов по клику.
Верстка баннера на сайте
Весь баннер помещен в . В верстке баннера ничего примечательного нет, здесь все теги вам уже знакомы. Я назвал класс slider , потому что в будущем это будет листаемый слайдер, как на imdiz.ru/store/. Сейчас же пока это не слайдер, а статичный баннер.
Здесь, в верстке баннера, сложности могут вызвать названия классов. Но всё становится понятно, если просто их перевести. Единственное, в названиях класса встречается desc — это сокращение от description, что переводится, как «описание». То есть это описание для баннера. А carousel переводится, как «карусель». Каруселью на сайте называют слайдер, который можно листать вправо и влево.
Вот так, достаточно быстро и легко, в данном уроке разобрано всё новое в index.html. Можно переходить к style.css.
Разбор файла style.css
Подключение шрифта. Селектор звездочка в CSS. Свойство box-sizing
В style.css уже в самом начале находятся очень интересные нововведения. Сперва подключается нужный шрифт. По умолчанию, используются шрифты, которые предоставляет интернет-браузер, то есть вы не контролируете, как будет выглядеть шрифт вашего сайта в разных браузерах. Желательно же подключить определенный шрифт, который вам нравится. В Webe очень распространен шрифт Roboto, его я и подключил.
Шрифт подключается через директиву @font-face . Название шрифта пишется в свойстве font-family (переводится как «семейство шрифтов»). Сам шрифт должен где-то находиться, то есть его можно скачать и поместить на сайте. А при подключении шрифта указать путь к нему в свойстве src . Как вы видите, сейчас шрифт подключается с сайта imdiz.ru.
Много шрифтов для бесплатного скачивания находится на fonts.google.com. На этом сайте шрифты именно для веб-сайтов. Это важно, потому что, если шрифт не предназначен для веба, то он может по разному отображаться в разных браузерах и на смартфонах.
Чтобы скачать шрифт прямо на ваш сайт, обычно создается папка fonts, в нее скачивается нужный шрифт, и в @font-face указывается путь к нему. Например так — src: url(../fonts/Roboto.ttf);.
Далее, после @font-face стоит еще неизвестный вам селектор в виде * . Селектор в виде звездочки означает, что его CSS-свойства будут применятся абсолютно ко всем HTML-элементам на странице: ко всем блокам, ко всем классам, ко всем картинкам, ко всем ссылкам и т.д. Для него я прописал только 1 свойство box-sizing: border-box; . Свойство box-sizing нужно, если вы хотите изменить алгоритм расчета ширины и высоты элемента. Дословно box-sizing можно перевести, как «расчет размеров коробки».
По умолчанию, ширина блока складывается из ширины (width), внутренних отступов (padding), внешних отступов (margin) и границы (border): width + padding + margin + border. Аналогично высчитывается высота блока.
box-sizing: border-box; делает так, что в width и height будут включены значения padding и border. То есть, если вы укажете width: 100px;, то ширина будет ровно 100 пикселей. А если свойство убрать, то к ширине будут прибавляться внутренние отступы и граница, а элемент на сайте будет шире, чем 100 пикселей.
Свойство font-family в CSS
Следующий новый блок находится в html, body . С font-size вы уже знакомы. А вот font-family: Roboto; применяет в данном случае для html и body шрифт Roboto. В директиве @font-face свойство font-family только задавало название для подключаемого шрифта. Можно было назвать шрифт, например, Rob. Тогда для html и body нужно было бы писать так — font-family: Rob;.
После того, как вы подключили и назвали шрифт в директиве @font-face , его можно применять к любому элементу. Когда я применил его для html, я задал шрифт Roboto для всего сайта. Если вы захотите, например, для ссылок задать другой шрифт, то его нужно будет скачать, подключить в @font-face и применить к ссылкам.
Абсолютное позиционирование в CSS
Перехожу к третьему новому участку кода в CSS.
Обратите внимание на класс .menu__container . Для него указано свойство position: relative; . И сразу обратите внимание ниже на класс .catalog , для него указано свойство position: absolute; .
.catalog абсолютно позиционирован. Позиционирование в HTML — это очень важный и интересный момент. Это означает, что он как бы «не замечает» соседние блоки, и может даже «залазить» на них. Ведет он себя так только в пределах родительского элемента, у которого position либо relative, либо absolute, либо fixed (кстати, по умолчанию, для всех элементов стоит значение static). В данном случае у .menu__container указано значение relative , поэтому .catalog абсолютно позиционирован относительно .menu__container . Если у .menu__container убрать position: relative; , то .catalog поднимется к самому верху браузера, потому что будет искать среди родительских элементов первый встретившийся со значением либо relative , либо absolute , либо fixed . А таких нет, поэтому для .catalog как бы точкой отсчета станет браузер. Посмотрите картинку-схему для абсолютно позиционированных блоков:
Далее, для того, чтобы .catalog выровнялся правильно, я задал top:0; . Для того, чтобы выровнять абсолютно позиционированный элемент относительно родительского блока используются свойства top, bottom, left, right. В нашем случае top:0; нужен из-за того, что у .container указан align-items: center; и .catalog выравнивается по центру по вертикали без top:0; . Попробуйте убрать top:0; .
Равномерное распределение в Flex
Далее в .catalog__header встречается новое значение — justify-content: space-between; . Благодаря space-between элементы внутри flex располагаются равномерно (в данном случае по горизонтали), а первый и последний элемент прижимаются к краям flex-родителя. Это я сделал для того, чтобы на сайте слово «Categories» и иконку расположить равномерно.
Третье измерение в CSS (z-index). Порядок элементов по оси z
Для .catalog__list задано интересное свойство z-index: 2; . Это позиция элемента по оси z (как бы в глубину экрана). То есть элементы могут накладываться друг на друга, и одни элементы будут выше (как бы ближе к вам), а другие будут ниже. Посмотрите картинку:
Если у .catalog__list убрать здесь z-index, то баннер окажется выше, чем окно с подкатегориями:
Чем больше z-index, тем выше элемент (ближе к вам).
Почему z-index работает, если он задан не для подкатегорий, а для всего списка категорий? Дело в том, что z-index наследуется, то есть он равен 2 и для списка категорий, и для подкатегорий. Подкатегории его наследуют, потому в файле index.html блок catalog__subcatalog находится внутри блока catalog__list .
Чтобы z-index работал, необходимо, чтобы этот элемент был позиционированным, то есть должно быть явно задано свойство position (relative, absolute или fixed). Напоминаю, что по умолчанию у position значение static.
Если z-index не ставить, то по оси z элементы располагаются по порядку в html-файле — чем ниже элемент в index.html, тем выше он будет (ближе к вам).
Приоритетность селекторов
Обратите внимание на код:
.catalog__list < position: relative; >ul
Здесь заданы стили для списка категорий. Просто .catalog__list — селектор класса, а ul — селектор тега. Как вы понимаете, стили тега ul будут распространяться вообще на все теги ul на сайте.
На примере данного кода я расскажу про приоритетность селекторов. Разные селекторы имеют разную силу.
Во-первых, если селекторы одинаковые и они противоречат друг другу, то «сильнее» будет нижний селектор, потому что браузер «читает» CSS-код сверху вниз. Например, если для добавить еще один класс , то посмотрите на код ниже:
.catalog__list < padding: 0; >.catalog__list-2 < padding: 10px; /* Сильнее будет это значение */ >
Здесь в итоге отступ будет 10 пикселей.
Во-вторых, имеет значение сам селектор. Например, селектор класса сильнее селектора тега. Посмотрите на код:
.catalog__list < padding: 0; >ul
Здесь в итоге отступ будет 0.
В-третьих, селектор может быть составным, например:
.catalog ul
Здесь стили заданы для ul, который находится внутри .catalog. Такой селектор сильнее, чем просто селектор класса.
В-четвертых, самая мощная конструкция имеет следующий вид «padding: 0 !important;». То есть после значения пишется !important, что переводится как «важный».
Как скрыть элемент на сайте. Свойства opacity и visibility в CSS
Как вы видите подкатегории просто так не видны. Чтобы их увидеть, нужно навести на категорию.
Самый простой способ спрятать элемент или блок на сайте, это задать ему display: none;. Но тогда не получится ему просто так сделать плавность появления. Он будет появляться резко, неэстетично, неэффектно.
Для придания плавности появления элемент нужно прятать особым образом, а именно прописать в CSS такие свойства, как в .catalog__subcatalog :
- opacity: 0; — opacity задает прозрачность элемента. Если 0, то элемент полностью прозрачный, если 1, то элемент полностью непрозрачный. Можно задавать частичную прозрачность, например, 0.5.
- visibility: hidden; — visibility переводится как «видимость», и, собственно, задает, видимым будет элемент или нет. Значение hidden (переводится «спрятан») скрывает элемент;
- transition: all .3s; — задает ту самую плавность (transition переводится как «переход»). Значение all означает, что переход задается вообще для всех свойств данного элемента, в том числе для opacity и visibility. А .3s означает, что переход будет осуществляться в течение 0.3 секунды.
Почему не сделать элемент просто прозрачным и всё? Если сделать только прозрачным, то элемент всё-равно будет занимать свое место на сайте, и сдвигать другие элементы. Поэтому его еще нужно скрыть свойством visibility.
А теперь я опишу, как сделать, чтобы блок с подкатегориями появился при наведении мыши.
Псевдокласс :hover в CSS
Интересную конструкцию представляет .catalog__item:hover .catalog__subcatalog . Здесь :hover (переводится как «ожидание») используется для того, чтобы при наведении на .catalog__item для класс .catalog__subcatalog применились следующие стили:
.catalog__item:hover .catalog__subcatalog
То есть блок с подкатегориями становится непрозрачным, видимым, и смещается немного влево. Смещается он благодаря тому, что изначально для .catalog__subcatalog задано left: 280px;, а при наведения уже 260px, и получается эффект смещения влево.
Здесь для того, чтобы :hover работал необходимо, чтобы .catalog__subcatalog находился в .catalog__item (смотрите файл index.html).
Напомню, что плавность появления осуществляется благодаря свойству transition.
Процентные значения в CSS
Обратите еще внимание на .catalog__subcatalog . Здесь height: 100%; .
В CSS для некоторых свойств помимо пикселей можно задавать проценты. Естественно, при этом, значение будет вычисляться относительно какого-то другого HTML-элемента.
В данном случае высота подкаталога вычисляется относительно высоты .catalog__list , потому что у подкаталога абсолютная позиция (absolute), а у .catalog__list относительная (relative). Помните про абсолютное позиционирование элементов?
Если никакие позиции не заданы, то высота дочернего элемента вычисляется относительно высоты непосредственного родительского элемента в index.html. Например, для catalog__subcatalog непосредственный родительский элемент catalog__item .
Эффекты наведения на ссылку в CSS
С разбором стилей для меню каталога закончено. Далее идут стили для навигации. В них все свойства для вас уже знакомы. Единственное, на что обращу внимание, это на класс для ссылки .menu__nav-link . В нем есть уже известное вам свойство transition. Оно нужно для плавного изменения цветы ссылки при наведении.
А теперь спуститесь в самый низ файла style.css к участку кода:
a < color: #111; text-decoration: none; >a:hover
Здесь задан цвет шрифта вообще для всех ссылок на сайте. Благодаря свойству text-decoration: none; у всех ссылок убирается подчеркивание, которое есть по умолчанию.
Благодаря псевдоклассу :hover происходит изменение цвета ссылки при наведении на нее курсора мыши.
Изображение на задний фон в CSS. Заглавные буквы через CSS
Стили для номера телефона я разбирать не буду, все CSS-свойства вам уже знакомы.
Перехожу к разбору баннера.
У баннера есть темное изображение на всю ширину браузера. Сделано оно через CSS свойством background. Посмотрите на класс .slider . В нем есть интересная строка кода — background: url(https://imdiz.ru/files/store/img/banner/bg-slider.png) no-repeat; . Именно здесь задается фоновое изображение через url. Значение no-repeat задает то, чтобы изображение не повторялось (repeat переводится, как «повтор»). Если не прописать no-repeat, то на очень большом экране фоновое изображение будет повторятся слева направо.
Следующее интересное свойство — это text-transform: uppercase; в классе .slider__carousel_button . Таким образом задаются большие буквы для текста на кнопке баннера.
На этом данный урок закончен. Посмотрите в браузере на ваш сайт. Порадуйтесь результату. Всего за несколько уроков вы научились очень многому. Еще немного обучения и вы станете профессионалом! Продолжайте!
Конец урока. В данном уроке вы узнали:
— тег для построения списка.
— тег для навигации.
— кликабельный номер телефона.
@font-face — подключение шрифта.
box-sizing — CSS-свойство для изменения расчета высоты и ширины элемента.
position — CSS-свойство для позиционирования элемента. Возможные значения: absolute, relative, static и fixed.
z-index — CSS-свойство для позиционирования по оси z.
Разные селекторы могут иметь разный приоритет.
:hover — псевдокласс в CSS, который срабатывает при наведении на элемент.
Верстка каталога товаров ч.2
Весь каталог помещен в список . Здесь задано сразу 2 класса imdiz-products и imdiz-products_row . Тег ul в свою очередь помещен в контейнер . Для чего здесь класс products__container Вы увидите чуть позже в style.css.
Вы имеете право в начале имени класса не указывать префикс «imdiz-«. Но он удобен тем, что, если Вы работаете с чьей-то уже готовой версткой (вносите изменения), то благодаря префиксу Ваши имена не будут совпадать с чужими именами. Не будет конфликтов имен. Вы можете придумать свой префикс.
Итак, я задал для списка ul сразу 2 класса. Для чего? Первый класс будет для товаров в столбец, второй — для товаров в строку. Просто в готовом интернет-магазине страница товаров одна, и когда Вы нажимаете на кнопку , то у тега ul удаляется класс imdiz-products_row, и товары выстраиваются в столбец. А при нажатии на кнопку тегу ul класс возвращается обратно.
Посмотрите в style.css. Естественно, смотрите код под строкой /* Products_row page */.
Сперва переопределяется свойство justify-content класса container:
.products__container
Это сделано, чтобы весь список товаров сдвинуть вправо.
Переопределение Вы можете видеть в инструментах разработчика:
Ниже идут стили для классов .imdiz-products и .imdiz-products_row . Почему в названиях классов я использую и дефис, и знак подчеркивания, я объясню позже.
В первую очередь задается ширина для списка товаров равная 860px. Конечно, в каждом новом проекте ширина может меняться. Здесь же задается margin-right: -10px; , и вот для чего. Дело в том, что у каждой карточки товара будут отступы в 10 пикселей. И каждая правая карточка будет неровно смотреться на странице, потому что она будет сдвинута влево на эти самые 10 пикселей. Чтобы всё выровнять прибегают к такой хитрости. Для ВСЕГО списка товаров (для тега ul) задают отрицательный правый отступ margin-right: -10px;. Вы сейчас у себя его можете удалить и посмотреть, как сдвинутся карточки.
Потом для .imdiz-products_row задается CSS-свойство display: flex; . И, возможно, Вы помните из бесплатных уроков, что именно благодаря flex товары выстраиваются в строку. Следующее свойство flex-wrap: wrap; указывает, чтобы товары могли переноситься в новую строку. Если не указать flex-wrap, то все товары встанут в одну строку, и естественно будут очень сжатые.
Но вернитесь в файл products_row.html. Разберем полностью карточку первого товара. Обычно именно так верстается весь каталог. Сперва верстается карточка первого товара, а потом ее просто дублируют (ведь карточки идентичные). Если нужно в дублированные карточки вносят изменения, например, цена, называние товара, наличие. Это зависит от дизайна.
Карточка товара помещается в тег с классом imdiz-product . Далее вся информация о товаре оборачивается в . С английского inner переводится как «внутренний».
-
, и поэтому в строку помещается ровно 3 карточки.
Если бы не было внутреннего блока , то ширину пришлось бы задавать ровно в пикселях, и еще задавать отступы. А для левых карточек отступы высчитывать отдельно.
В браузере в окне инструментов разработчика можно навести курсор мыши на тег и увидеть полные размеры этого тега:
Еще здесь же стоит отметить свойство list-style: none; . В HTML как и в Word каждый пункт списка слева отмечается точкой. Чтобы эту точку убрать, нужно использовать list-style: none; .
CSS-свойство border
Каким образом задана рамка у . Задается она CSS-свойством border. В style.css для .imdiz-product__inner задано свойство border: 1px solid #ededed; . С английского border переводится как «граница». Здесь 1-ое значение указывает толщину рамки (1 пиксель); 2-ое значение указывает, что рамка должны быть в виде простой линии; 3-е значение — цвет рамки (цвет задан в HEX-формате, это наиболее частый формат в CSS). Добавлю, что кроме solid еще может быть dashed — пунктирная линия, dotted — рамка будет состоять из точек.
Каждое из значений свойства border можно задать отдельным свойством:
- border-width — толщина рамки;
- border-style — рамки в виде сплошной линии, пунктирной или точек (solid, dashed, dotted);
- border-color — цвет рамки.
Изменение цвета рамки при наведении курсора мыши
Чтобы цвет рамки изменялся плавно при наведении, для .imdiz-product__inner задано свойство transition: all .3s; . Здесь all означает, что transition распространяется на все CSS-свойства класса .imdiz-product__inner . Свойство transition можно задавать для каждого свойства отдельно, например, transition: padding .3s; или transition: border-width .3s;.
Значение .3s означает, что плавное изменение будет происходить в течение 0,3 секунды. Поиграйтесь с этим значение поставьте например 5s (без точки). Вы увидите, что цвет рамки стал меняться очень медленно.
Ну, а чтобы цвет рамки менялся при наведении, нужно использовать свойство :hover (переводится «зависать»). Для этого в style.css прописан код:
.imdiz-product__inner:hover
Здесь написано, что при наведении курсора нужно изменить цвет рамки на #cb2d41.
Иконочный шрифт Font Awesome
Информация о наличии помещена в тег . В HTML — это тег для каждого нового абзаца текста. В данном случае информацию о наличии можно поместить в этот тег. В имени класса imdiz-product__av сокращение av от слова availability, что означает «наличие».
Иконка наличия задана иконочным шрифтом Font Awesome, о котором написано в бесплатном уроке.
Вы уже подключили иконочный шрифт к своей верстке. Но все-же я повторю алгоритм подключения шрифта Font Awesome. Сперва нужно создать папку fonts и скачать в нее сам шрифт (это несколько файлов). Затем нужно в папку css добавить файл font-awesome.min.css. Ну, и наконец, в HTML-файле в теге подключить шрифт строкой типа . То есть нужно выполнить 3 шага.
Иконки вставляются в HTML-файл тегом . Каждая иконка зависит от второго класса, например, здесь иконка галочки благодаря классу fa-check. Еще пример, иконка youtube задается классом fa-youtube. Все иконки можно посмотреть здесь fontawesome.ru/all-icons.
Далее, текст «В наличии» помещается в тег . Так как теги и строчные, то иконка и текст разместятся в одну строку.
Отцентрировать текст внутри блочного элемента
Как Вы можете видеть в браузере, иконка и текст наличия находятся по центру карточки товара. Как этого добиться?
Информация о наличии помещена в тег . Тег
— блочный, поэтому он занимает всю ширину своего родительского тега . Чтобы отцентрировать текст внутри любого блочного тега, нужно этому тега задать CSS-свойство text-align: center;. Поэтому в style.css для .imdiz-product__av прописано text-align: center; .
Начните зарабатывать версткой сайтов до 50 000 р./месяц уже через 5 дней
Решили зарабатывать самостоятельно?
Читайте мою статью для самозанятых