HTML5 响应式产品服务价格表网页模板

Pricing Table 软件服务类网站常见的首页布局，展示公司的若干等级服务，标准不同的价格。本模板是响应式的。自适应各种尺寸的设备。

模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3719
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
.snip1299 {
    font-family: 'Raleway', Arial, sans-serif;
    color: #000;
    text-align: center;
    font-size: 16px;
    width: 100%;
    max-width: 1000px;
    margin: 50px 0 10px;
}
.snip1299 .plan {
    margin: 0;
    width: 25%;
    position: relative;
    float: left;
    overflow: hidden;
    background-color: #e6e6e6;
    border: 5px solid #1e1e1e;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.snip1299 .plan:hover i,
.snip1299 .plan.hover i {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.snip1299 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.snip1299 header {
    background-color: #333;
    color: #fff;
}
.snip1299 .plan-title {
    background-color: #191919;
    position: relative;
    top: 0;
    font-weight: 500;
    margin: 0;
    padding: 10px 0 0;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
}
.snip1299 .plan-title:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 150px 0 150px;
    border-color: #191919 transparent transparent transparent;
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.snip1299 .plan-cost {
    padding: 40px 0 20px;
}
.snip1299 .plan-price {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 2em;
}
.snip1299 .plan-type {
    opacity: 0.8;
    font-size: 0.7em;
    text-transform: uppercase;
}
.snip1299 .plan-features {
    padding: 0;
    margin: 0;
    list-style: outside none none;
    font-size: 0.8em;
}
.snip1299 .plan-features li {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px 5%;
    font-weight: 500;
}
.snip1299 .plan-features li:nth-child(even) {
    background: rgba(0, 0, 0, 0.08);
}
.snip1299 .plan-features i {
    margin-right: 8px;
    opacity: 0.4;
}
.snip1299 .plan-select {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 20px;
    background-color: #333;
}
.snip1299 .plan-select a {
    background-color: #1e1e1e;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}
.snip1299 .plan-select a:hover {
    background-color: #2b2b2b;
}
.snip1299 .featured {
    margin-top: -10px;
    border: 5px solid #a85913;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.snip1299 .featured header {
    background-color: #924d10;
}
.snip1299 .featured .plan-title {
    background-color: #4d2909;
}
.snip1299 .featured .plan-title:after {
    border-color: #4d2909 transparent transparent transparent;
}
.snip1299 .featured .plan-select {
    background-color: #cd6d17;
    padding: 30px 20px;
}
.snip1299 .featured .plan-select a {
    background-color: #4d2909;
}
@media only screen and (max-width: 767px) {
    .snip1299 .plan {
        width: 50%;
    }
    .snip1299 .plan-title,
    .snip1299 .plan-select a {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .snip1299 .plan-select,
    .snip1299 .featured .plan-select {
        padding: 20px;
    }
    .snip1299 .featured {
        margin-top: 0;
    }
}
@media only screen and (max-width: 440px) {
    /* Demo purposes only */
    
    .snip1299 .plan {
        width: 100%;
    }
}
body {
    background-color: #212121;
}

HTML

<div class="snip1299">
    <div class="plan">
        <header>
            <h4 class="plan-title">
        Starter
      </h4>
            <div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span>
            </div>
        </header>
        <ul class="plan-features">
            <li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
            <li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
            <li><i class="ion-checkmark"> </i>Unlimited Email</li>
            <li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
            <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
            <li><i class="ion-checkmark"> </i>Daily Backups</li>
        </ul>
        <div class="plan-select"><a href="">Select Plan</a>
        </div>
    </div>
    <div class="plan">
        <header>
            <h4 class="plan-title">
        Basic
      </h4>
            <div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span>
            </div>
        </header>
        <ul class="plan-features">
            <li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
            <li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
            <li><i class="ion-checkmark"> </i>Unlimited Email</li>
            <li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
            <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
            <li><i class="ion-checkmark"> </i>Daily Backups</li>
        </ul>
        <div class="plan-select"><a href="">Select Plan</a>
        </div>
    </div>
    <div class="plan featured">
        <header>
            <h4 class="plan-title">
        Professional
      </h4>
            <div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span>
            </div>
        </header>
        <ul class="plan-features">
            <li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
            <li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
            <li><i class="ion-checkmark"> </i>Unlimited Email</li>
            <li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
            <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
            <li><i class="ion-checkmark"> </i>Daily Backups</li>
        </ul>
        <div class="plan-select"><a href="">Select Plan</a>
        </div>
    </div>
    <div class="plan">
        <header>
            <h4 class="plan-title">
        Ultra
      </h4>
            <div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span>
            </div>
        </header>
        <ul class="plan-features">
            <li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
            <li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
            <li><i class="ion-checkmark"> </i>Unlimited Email</li>
            <li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
            <li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
            <li><i class="ion-checkmark"> </i>Daily Backups</li>
        </ul>
        <div class="plan-select"><a href="">Select Plan</a>
        </div>
    </div>
</div>

Pricing Table 软件服务类网站常见的首页布局，展示公司的若干等级服务，标准不同的价格。本模板是响应式的。自适应各种尺寸的设备。

模板

编辑器支持Emmet

快捷键

Pricing Table 软件服务类网站常见的首页布局，展示公司的若干等级服务，标准不同的价格。本模板是响应式的。自适应各种尺寸的设备。

模板

HTML5 很棒的一款响应式商品列表和购物车网页模板

HTML5带垂直导航栏响应式单页网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：