Часть 1: Как создать динамическую таблицу цен на веб-сайте с помощью HTML, CSS и JavaScript
В этой серии статей мы покажем вам, как создать динамическую таблицу цен на веб-сайте с помощью HTML, CSS и JavaScript. Мы собираемся показать вам несколько различных способов представления ваших ценовых таблиц на основе ваших продуктовых планов, макета веб-сайта, устройств целевой аудитории и т. д.
Первая таблица цен, которую мы создаем, предназначена для того, чтобы пользователи могли переключать опцию года/месяца для просмотра ценового плана отдельно.
Среда
:root{ --main-color: #4a4e69; }
Ценовой контейнер
Это необходимо для определения всей области контейнера, которая включает параметры выставления счетов и сведения о параметрах подписки. Поскольку у нас есть две части (сведения о способе выставления счетов и способе подписки), представленные вертикально, мы применяем гибкую систему и устанавливаем направление в виде столбца.
.pricing-container{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 120vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
Переключить переключатель
Мы используем флажок, чтобы быть переключателем с
- Метка: управление стилем выбранных и невыбранных параметров.
- Активный класс: управление стилем выбранных опций и переключение плана через JavaScript.
- .billing_options .label: применить гибкую систему, чтобы метки располагались горизонтально. Вот как это будет присутствовать, если flex не применяется.
2. Ввод .billing_options: скройте флажок, установив для отображения и внешнего вида значение «Нет». Вот как это будет присутствовать, если у нас нет этих частей.
3. .label .active: управляйте начальным статусом активного плана, я установил год по умолчанию. Цвет фона установлен как основной, а цвет шрифта установлен как белый.
<div class="billing_options"> <input…