qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Таблица тарифных планов для сайта

Таблица тарифных планов
Просмотров: 1477  Скачан: 213 раз  Комментариев в теме: 0

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

Шаг 1 - создание разметки

 

HTML

<div id="page-wrap">
    <table id="feature-table">
        <colgroup class="basic"></colgroup>
        <colgroup class="plus"></colgroup>
        <colgroup class="premium" id="featured"></colgroup>
        <colgroup class="pro"></colgroup>
        <thead>
            <tr>
                <th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
                <th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
                <th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
                <th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>50 pages</td>
                <td>75 pages</td>
                <td>Unlimited</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>3 users</td>
                <td>5 users</td>
                <td>10 users</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>10 Sites</td>
                <td>25 Sites</td>
                <td>100 Sites</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <td>50 MB</td>
                <td>250 MB</td>
                <td>1 GB</td>
                <td>5 GB</td>
            </tr>
            <tr>
                <td>included</td>
                <td>included</td>
                <td>included</td>
                <td>included</td>
            </tr>
            <tr>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-x.png" alt="no" /></td>
                <td><img src="images/icon-check.png" alt="yes" /></td>
            </tr>
            <tr>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
                <td><a class="button" href="#">Sign Up</a></td>
            </tr>
        </tbody>
    </table>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery 1.8.2.js"></script>
<script type="text/javascript">
$(function() {
    var numCols = $("colgroup").length,
    featuredCol;   
    $("tr:odd").addClass("odd");
    $("tr:last").addClass("final-row");    
    $("colgroup").each(function(i) {
        if (this.id == "featured") featuredCol = i+1;
    });   
    $("td, th").each(function(i) {
        $(this).addClass("table-col-" + ((i % numCols) + 1));
        if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
        if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
    });        
});
</script>
Материалы по теме:

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...
Интересные публикации:

Горизонтальное меню на cssГоризонтальное меню на css

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....
  • Текущий 1.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.1/5( Голосов 8 )

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

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить