В этой серии статей мы покажем вам, как создавать динамические таблицы цен при разработке внешнего интерфейса веб-сайта с помощью HTML, CSS и JavaScript. Мы собираемся показать вам несколько различных способов представления таблиц цен в зависимости от ваших тарифных планов, макета веб-сайта, устройства целевой аудитории и т. д.
Третья таблица цен позволяет пользователям включать кнопки плана и детализации, чтобы получить соответствующие цены.
Среда
:root{ --main-color: #4a4e69; }
HTML — Структура
Таблица цен построена на основе класса «pricing_container», который содержит класс «subscription_options» и «setting». Класс «subscription_options» содержит три столбца (класс «подписка col1», «подписка col2» и «подписка col3»). Каждый класс «подписки» включает в себя пять рядов и один ‹h2› по общей цене.
<div class = "pricing_container"> <div class="subscription_options"> <div class="subscription col1"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> <div class="subscription col2"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> <div class="subscription col3"> <div class="row1"> </div> <div class="row2"> </div> <div class="row3"> </div> <div class="row4"> </div> <div class="row5"> </div> <h2>...</h2> </div> </div> <div class="setting"> …