Zepto.js+HTML5 购物车移动网页应用模板

Mobile Shopping Cart Template Refer to: https://github.com/jasonmoo/t.js 有自动计价的功能。

h5, shop, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}
body {
    background-color: #ecf0f1;
    font: 300 1.25em/1.4 "Lato", sans-serif;
    color: #686868;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}
h1,
.sub-heading {
    text-align: center;
    margin: 0.5rem 0 1rem;
}
.sub-heading {
    font-size: 0.75em;
    font-weight: 300;
}
._grid {
    text-align: justify !important;
    text-justify: distribute-all-lines;
    font-size: 0 !important;
    text-rendering: optimizespeed;
}
._grid:after {
    content: "";
    display: inline-block;
    width: 100%;
}
._column {
    display: inline-block;
    vertical-align: top;
    font-size: medium;
    text-align: left;
    text-rendering: optimizeLegibility;
}
._btn {
    display: inline-block;
    background-color: #bdc3c7;
    border: none;
    padding: 0.5em 0.75em;
    text-align: center;
    font-weight: 300;
}
._btn:hover,
.cart-totals:hover ._btn {
    background-color: #3498db;
    color: #ecf0f1;
}
.shopping-cart {
    width: 80%;
    max-width: 60rem;
    margin: 0 auto;
}
.shopping-cart--list-item {
    border: 1px solid #bdc3c7;
    margin-bottom: 3rem;
    height: 10rem;
    overflow: hidden;
}
.shopping-cart--list-item:hover,
.shopping-cart--list-item:hover * {
    border-color: #3498db;
}
.shopping-cart--list-item > ._column {
    height: 100%;
}
.product-image {
    width: 16.6632%;
    background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") no-repeat center / cover transparent;
}
.product-info {
    width: 70.83212%;
    padding: 0.5rem;
}
.product-name {
    font: 300 2.4em/1 "Lato", sans-serif;
    letter-spacing: -0.025em;
    margin: 0 0 0.125em;
}
.price {
    line-height: 1;
    text-align: right;
}
.product-single-price {
    margin-top: -1rem;
    font-size: 2.4em;
}
.product-modifiers {
    width: 12.49636%;
    text-align: right;
    border-left: 1px solid #bdc3c7;
}
.product-subtract,
.product-plus,
.product-qty {
    width: 33.33056%;
    background-color: transparent;
    color: #686868;
    text-align: center;
}
.product-qty {
    padding: 0.35em 0.75em;
}
.product-remove {
    font-size: 0.875em;
    margin-top: 3.35rem;
    background-color: #e74c3c;
    color: #ecf0f1;
    width: 100%;
    visibility: hidden;
}
.product-modifiers:hover .product-remove {
    visibility: visible;
}
.product-remove:before {
    margin-right: 0.5em;
}
.product-remove:hover {
    background-color: #c0392b;
}
.product-total-price {
    border-top: 1px solid #bdc3c7;
    color: #95a5a6;
    font-size: 1.25em;
    padding: 0.5rem;
}
.shopping-cart--list-item:hover .product-total-price {
    background-color: #3498db;
    color: #ecf0f1;
}
.cart-totals {
    border-top: 1px solid #bdc3c7;
    margin-bottom: 3rem;
}
.cart-totals ._column {
    width: 19.98401%;
    padding: 0.5rem;
    line-height: 1.2;
}
.cart-totals ._column:not(:last-of-type) {
    border-right: 1px solid #bdc3c7;
}
.cart-totals ._column:first-of-type {
    padding-left: 0;
}
.cart-totals-key {
    font-size: 1.125em;
    color: #bdc3c7;
}
.cart-totals ._column:hover .cart-totals-value,
.cart-totals ._column:hover .cart-totals-key {
    color: #333;
}
.cart-totals-value {
    font-size: 2em;
}
._column.checkout {
    text-align: right;
    padding: 0;
    margin-top: 1.5em;
    vertical-align: middle;
}
.checkout-btn:before {
    margin-right: 0.5em;
}
._btn.checkout-btn:hover {
    background-color: #2980b9;
}
.product-remove,
.cart-totals * {
    transition: all 0.2s ease;
}
.closing {
    transition: all 0.5s ease;
    transform: translate3d(0, -100%, 0);
    opacity: 0;
}

HTML

</ol>

<footer class="_grid cart-totals">
            <div class="_column subtotal" id="subtotalCtr">
                <div class="cart-totals-key">Subtotal</div>
                <div class="cart-totals-value">$0.00</div>
            </div>
            <div class="_column shipping" id="shippingCtr">
                <div class="cart-totals-key">Shipping</div>
                <div class="cart-totals-value">$0.00</div>
            </div>
            <div class="_column taxes" id="taxesCtr">
                <div class="cart-totals-key">Taxes (6%)</div>
                <div class="cart-totals-value">$0.00</div>
            </div>
            <div class="_column total" id="totalCtr">
                <div class="cart-totals-key">Total</div>
                <div class="cart-totals-value">$0.00</div>
            </div>
            <div class="_column checkout">
                <button class="_btn checkout-btn entypo-forward">Checkout</button>
            </div>
        </footer>

</section>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js'></script>
<script>
    (function() {
        function c(a) {
            this.t = a;
        }

function l(a, b) {
            for (var e = b.split('.'); e.length;) {
                if (!(e[0] in a))
                    return !1;
                a = a[e.shift()];
            }
            return a;
        }

Mobile Shopping Cart Template Refer to: https://github.com/jasonmoo/t.js 有自动计价的功能。

h5, shop, template

编辑器支持Emmet

快捷键

Mobile Shopping Cart Template Refer to: https://github.com/jasonmoo/t.js 有自动计价的功能。

h5, shop, template

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

HTML5+jQuery.waypoints旅行者的时间表页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：