<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Фильтр категорий товаров на JavaScript (часть 2)

Фильтр категорий товаров на JavaScript (часть 2)

HTML разметка для карточек товаров

Для создания карточек товаров нам потребуется блок main с классом content и еще один флексовый контейнер с карточками внутри. Присвоим всем карточкам один общий класс card с одинаковыми стилями и отдельные классы, отличающиеся только по цвету. В дальнейшим эти классы будут нужны для фильтрации.

<main class="content">
    <div class="container">
        <div class="card clothing">Clothing</div>
        <div class="card decor">Decor</div>
        <div class="card bags">Bags</div>
        <div class="card decor">Decor</div>
        <div class="card clothing">Clothing</div>
        <div class="card bags">Bags</div>
        <div class="card bags">Bags</div>
        <div class="card decor">Decor</div>
        <div class="card clothing">Clothing</div>
    </div>
</main>


Фильтр категорий товаров на JavaScript.

CSS стили для карточек

Вытягиваем наши карточки в строку, благодаря свойству display: flex. Включим временную подсветку для контейнера в учебных целях, которую впоследствии удалим.

.content {
    width: 1024px; /* ограничение ширины контейнера */
    margin: 0 auto; /* отступ сверху и центрирование контейнера по горизонтали */
}

.container {     display: flex; /* включить флексовый контейнер */
    flex-wrap: wrap; /* разрешить карточкам переносится на следующий ряд */
    justify-content: flex-start; /* расположение элементов слева направо */
    margin: 0 -15px; /* задаем отрицательные боковые отступы */
    margin-bottom: 10px;
    background-color: yellow; /* подсвечивание контейнера */
}


Фильтр категорий товаров на JavaScript.

Осталось стилизовать сами карточки. Наши карточки являются flex-элементами внутри flex-контейнера, где каждый элемент занимает одну треть от ширины контейнера. Рассчитаем базовую ширину одной карточки с учетом отступов между ними, c помощью CSS функции calc(). Она позволяет выполнять простые математические действия между разными единицами измерения. От ширины каждой карточки мы отнимем 30 пикселей (отступы с обеих сторон карточки, по 15 пикселей). В CSS свойствах для дочерних элементов .card зададим соответственно отступы по 15 пикселей, а для родительского .container зададим отрицательные боковые отступы. За счет отрицательных маржинов, мы убираем ненужные боковые отступы так, чтобы остались только промежутки между блоками.

.card {
    width:calc(1/3*100% - 30px); /* 1/3 – 3 карточки в ряд, а 30px – ширина между карточками */
    margin: 15px; /* отступы между карточек */
    height: 150px; /* высота карточки */
    line-height: 150px; /* выравнивание по центру текста внутри карточки по вертикали */
    text-align: center; /* выравнивание по центру текста внутри карточки по горизонтали */
    color: white; /* цвет текста */
    font-weight: bold;/* жирность текста */
    font-size: 50px; /* размер текста */
    background-color: #7a9850;/* временное подсвечивание карточек */
}


Фильтр категорий товаров на JavaScript.

Раскрасим наши карточки в такой же цвет, как у категорий, к которым они относятся.

.clothing {
    background-color: #7a9850;
}

.decor {
    background-color: #c55a71;
}

.bags {
    background-color: #182f0f;
}

Наша верстка полностью готова, на следующем уроке вдохнем жизнь в эту конструкцию с помощью языка JavaScript.


Фильтр категорий товаров на JavaScript.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.