京东购物车样式练习HTML/CSS源码（附图片）

截图_选择区域_20211112162839.png
此源码只是练习样式，需要把图片地址更改下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html body {
            font-size: 12px;
            color: #434343;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        .w {
            width: 990px;
            margin: 0 auto;
        }

        .clearfix::after,
        .clearfix::before {
            content: "";
            display: table;
            clear: both;
        }

        .cart-filter-bar {
            margin-top: 10px;
            width: 100%;
            height: 30px;
        }

        em {
            color: #e2231a;
            font-size: 16px;
            font-weight: 700;
            font-style: normal;
        }

        .cart-thead {
            height: 32px;
            line-height: 32px;
            margin-bottom: 10px;
            padding: 5px 0;
            background-color: #f3f3f3;
        }

        .cart-thead .column {
            float: left;
        }

        .cart-thead .t-checkbox {
            width: 122px;
            height: 18px;
            line-height: 18px;
            padding: 7px 0 0 11px;
        }

        .cart-thead .t-checkbox input {
            margin-right: 10px;
            vertical-align: middle;
        }

        .cart-thead .t-goods {
            width: 368px;
        }

        .cart-thead .t-price {
            width: 120px;
            padding-right: 50px;
            text-align: right;
        }

        .cart-thead .t-quantity {
            width: 80px;
            text-align: center;
        }

        .cart-thead .t-sum {
            width: 100px;
            padding-right: 40px;
            text-align: right;
        }

        .cart-item-list {
            border: 1px solid #f1f1f1;
            border-top: 2px solid #aaa;
            padding-top: 20px;
        }

        .cart-item {
            line-height: 20px;
            margin: 0 0 40px 40px;
            clear: both;
            position: relative;
            border-top: 1px solid #f0f0f0;
        }

        .cart-item .p-checkbox {
            position: absolute;
            left: -40px;
            top: 10px;
            margin-left: 10px;
            min-height: 10px;
        }

        .cart-item .cell {
            float: left;
            padding: 15px 0 10px;
        }

        .cart-item .p-goods {
            width: 430px;
        }

        .cart-item .p-goods .p-img {
            float: left;
            width: 80px;
            height: 80px;
            border: 1px solid #eee;
            margin-right: 10px;
        }

        .cart-item .p-goods .p-msg {
            height: 40px;
        }

        .cart-item .p-price {
            width: 155px;
            padding-right: 40px;
            text-align: right;
        }

        .cart-item .p-quantity {
            width: 90px;
        }

        .cart-item .p-quantity a {
            background-color: #f1f1f1;
            width: 17px;
            height: 18px;
            color: #232323;
            float: left;
            text-align: center;
            border: 1px solid #cbcbcb;
            cursor: pointer;
            font-size: 14px;
        }

        .cart-item .p-quantity input {
            width: 46px;
            float: left;
            color: #232323;
            border: 1px solid #cbcbcb;
            border-width: 1px 0;
            line-height: 18px;
            text-align: center;
        }

        .cart-item .p-sum {
            width: 100px;
            padding-right: 40px;
            text-align: right;
        }

        .cart-item .p-action {
            width: 75px;
        }

        .cart-toolbar {
            height: 50px;
            line-height: 50px;
            width: 948px;
            border: 1px solid #f0f0f0;
            margin: 0 auto;
            margin-top: 20px;
            padding-left: 40px;
            position: relative;
        }


        .cart-toolbar .toolbar-right {
            float: right;
        }

        .cart-toolbar .select-all {

            float: left;
        }

        .cart-toolbar .select-all .checkall {
            position: absolute;
            left: 10px;
            top: 18px;
        }

        .cart-toolbar .operation {
            float: left;
        }

        .cart-toolbar .operation .remove-batch {
            margin: 0 10px;
        }

        .cart-toolbar .toolbar-right .amount-sum {
            float: left;
        }

        .cart-toolbar .toolbar-right .price-sum {
            float: left;
        }

        .cart-toolbar .toolbar-right .btn-area {
            float: left;
            width: 94px;
            height: 52px;
            color: #fff;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 52px;
            background-color: #e54346;
            margin-left: 20px;
        }
    </style>
</head>

<body>

    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div>
                <!-- 头部模块 -->
                <div class="cart-thead">
                    <div class="column t-checkbox">
                        <div class="cart-checkbox">
                            <input type="checkbox" name="" class="checkall" id="">全选
                        </div>
                    </div>
                    <div class="column t-goods">商品</div>
                    <div class="column t-price">单价</div>
                    <div class="column t-quantity">数量</div>
                    <div class="column t-sum">小计</div>
                    <div class="column t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list clearfix">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" class="j-checkbox" id="">
                        </div>
                        <div class="p-goods cell">
                            <div class="p-img">
                                <img src="./images/1a9564404f0c52c4 .jpg" alt="">
                            </div>
                            <div class="p-msg">幼儿中国历史绘本 有声读物（套装共10册）原创绘本 漫画故事 小学生课外阅读【中国大百科全书总主编杨牧之】</div>
                        </div>
                        <div class="p-price cell">￥82.00</div>
                        <div class="p-quantity cell">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" name="" class="itxt" value="1" id="">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum cell">￥82.00</div>
                        <div class="p-action cell"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" class="j-checkbox" id="">
                        </div>
                        <div class="p-goods cell">
                            <div class="p-img">
                                <img src="./images/2a83cb27a1734652.jpg" alt="">
                            </div>
                            <div class="p-msg">我们的中国 幼儿百科全书有声读物（套装共8册）我们的身体+我们的历史+文明+我们的文化+科技+唐诗+成语+恐龙</div>
                        </div>
                        <div class="p-price cell">￥85.00</div>
                        <div class="p-quantity cell">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" name="" class="itxt" value="1" id="">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum cell">￥85.00</div>
                        <div class="p-action cell"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" class="j-checkbox" id="">
                        </div>
                        <div class="p-goods cell">
                            <div class="p-img">
                                <img src="./images/4b8cb95f13e7bcff.jpg" alt="">
                            </div>
                            <div class="p-msg">疯狂的十万个为什么幼儿注音版（全套正版8册）3-6岁儿童绘本阅读幼儿园科普百科全书 </div>
                        </div>
                        <div class="p-price cell">￥98.00</div>
                        <div class="p-quantity cell">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" name="" class="itxt" value="1" id="">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum cell">￥98.00</div>
                        <div class="p-action cell"><a href="javascript:;">删除</a></div>
                    </div>
                </div>
                <!-- 结算模块 -->
                <div class="cart-toolbar">
                    <div class="select-all">
                        <input type="checkbox" name="" class="checkall" id="">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch">删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价：<em>￥164.00</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
1a9564404f0c52c4 .jpg
京东购物车样式练习HTML/CSS源码（附图片）

评论已关闭

热门文章

最近回复

分类

标签

其它
