实战：京东购物车静态界面实现-CFANZ编程社区

实战：京东购物车静态界面实现_html

左边是原图，右边是写的。

实现了简单的商品添加删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城-购物车</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/shoppingCart.css">
    <link rel="stylesheet" href="./css/shoppingCartFont/iconfont.css">
</head>
<body>
<header>
    <div class="w header_nav">
        <ul class="left">
            <li class="home">
                <i class="jdcart-shouye"
                   style="font-size: 18px;color:#5c5452">
                </i>京东首页
            </li>
            <li class="location">
                <i class="jdcart-dingwei"
                   style="font-size: 12px;margin-left: 10px;color:#5c5452">
                </i>北京
            </li>
        </ul>
        <ul class="right right">
            <li><span class="right_span">用户名称</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">我的订单</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">我的京东</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">京东会员</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">企业采购</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">客户服务</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">网站导航</span><i class="jdcart-xia down"></i></li>
            <li><span class="right_span">京东手机</span></li>
        </ul>
    </div>
</header>
<article>
    <div class="w article_top">
        <div class="logo"></div>
        <div class="search">
            <label for="key">
                <input id="key" type="text" class="itxt" autocomplete="off" accesskey="s">
            </label>
            <input type="button" class="button" value="搜索">
        </div>
    </div>
    <div class="w article_position">
        <div class="left">
            <span>全部商品</span>
            <span>3</span>
        </div>
        <div class="right">
            <span>配送至:</span>
            <span class="po">北京市北京化工大学<i class="jdcart-xia down"></i></span>
        </div>
    </div>
    <div class="w article_show_info">
        <div class="info_select_all">
            <label>
                <input type="checkbox" name="vehicle" value="total"/>
            </label> 全选
        </div>
        <div class="info_goods">商品</div>
        <div class="info_price">单价</div>
        <div class="info_count">数量</div>
        <div class="info_sum">小计</div>
        <div class="info_operate">操作</div>
    </div>
    <div class="w article_cart">
        <ul id="shops_ul">
            <li id="shops_li">
                <div class="article_cart_top">
                    <div class="article_cart_checkbox">
                        <label>
                            <input type="checkbox" name="checkItem" class="jdcheckbox">
                        </label>
                    </div>
                    <div>
                        <span>京东自营</span>
                    </div>
                </div>
                <div class="article_cart_content">
                    <div class="article_cart_checkbox">
                        <label>
                            <input type="checkbox" name="checkItem" class="jdcheckbox">
                        </label>
                    </div>
                    <div class="article_cart_goods">
                        <div class="goods_img">
                            <img src="https://img12.360buyimg.com/n0/s80x80_jfs/t1/95826/6/14197/84773/5e63174fE38246867/4552cd4f25cbab45.jpg.dpg"
                                 alt="">
                        </div>
                        <div class="goods_msg">
                            意可贴 醋酸地塞米松口腔贴片 0.3mg*10s*1板 双层片 用于非感染性口腔溃疡 口腔黏膜溃疡 口腔用药
                        </div>
                    </div>
                    <div class="article_cart_txt">
                        0.3mg*10片
                    </div>
                    <div class="article_cart_price">
                        ￥40.00
                    </div>
                    <div class="article_cart_count">
                        <button class="left">-</button>
                        <div class="count_num">1</div>
                        <button>+</button>
                    </div>
                    <div class="article_cart_sum">
                        ￥40.00
                    </div>
                    <div class="article_cart_operate">
                        <span onclick="delete_shop($(this))">删除</span>
                        <span>移入关注</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="w article_settle">
        <div class="settle_left">
            <div class="article_cart_checkbox">
                <label>
                    <input type="checkbox" name="checkItem" class="jdcheckbox">
                </label>
                全选
            </div>
            <span class="delete_select">删除选中的商品</span>
            <span class="insert_focus">移入关注</span>
            <span class="close_cart">清理购物车</span>
        </div>
        <div class="settle_right">
            <div class="settle_right_select">
                已选择<span>0</span>件商品
            </div>
            <div class="settle_right_price">
                总价:<span>￥0.00</span>
            </div>
            <div class="settle">
                去结算
            </div>
        </div>
    </div>
    <div class="w article_recommend">
        <div class="recommend_top">
            <div>
                <span class="line">—</span>
                <span class="content"><i class="jdcart-shopping"></i>购物车帮你选</span>
                <span class="line">—</span>
            </div>
            <div>
                <span>
                    看看加购过该商品的人还喜欢哪些
                </span>
            </div>
        </div>
        <ul>
            <li>
                <div class="recommend_item">
                    <div class="recommend_item_top">
                        <div class="recommend_item_top_img">
                            <img src="https://img14.360buyimg.com/n1/s48x48_jfs/t1/97718/24/6013/224672/5df0947cE9e07e2fc/41a298619a9105b8.jpg"
                                 alt="">
                        </div>
                        <div class="recommend_item_top_msg">
                            <span>优仙果 广西圣女果2斤装 小番茄 小西红柿 新鲜水果蔬菜 2斤装</span>
                            <span>2斤装</span>
                            <span>￥13.80</span>
                        </div>
                    </div>
                    <div class="recommend_item_content">
                        <div class="recommend_item_content_item">
                            <div class="recommend_item_content_item_img">
                                <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/145098/15/11139/216577/5f8a8997E9aba6f2a/87fb15401495fd52.jpg"
                                     alt="">
                            </div>
                            <div class="recommend_item_content_item_msg">
                                <div class="recommend_item_content_item_msg_title">
                                    <span>【沙漠南瓜 香粉糯】夏浙 新疆伊犁贵族南瓜 板栗南瓜 金丝银板栗味南瓜沙漠银栗小贝贝丑倭瓜 板栗南瓜（净重5斤）</span>
                                </div>
                                <div class="recommend_item_content_item_msg_info">
                                    <div class="price">￥39.00</div>
                                    <div class="person">392人购买</div>
                                    <i class="jdcart-gouwuchekong" onclick="add_shop($(this))"></i>
                                </div>
                            </div>
                        </div>
                        <div class="recommend_item_content_item">
                            <div class="recommend_item_content_item_img">
                                <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t30286/332/36268911/221752/2df45bd0/5be632aeN33d29b00.jpg"
                                     alt="">
                            </div>
                            <div class="recommend_item_content_item_msg">
                                <div class="recommend_item_content_item_msg_title">
                                    <span>【莘县馆】农家新鲜西红柿 沙瓤番茄 时令蔬菜 洋柿子 山东特产 西红柿2.25kg</span>
                                </div>
                                <div class="recommend_item_content_item_msg_info">
                                    <div class="price">￥29.90</div>
                                    <div class="person">176人购买</div>
                                    <i class="jdcart-gouwuchekong" onclick="add_shop($(this))"></i>
                                </div>
                            </div>
                        </div>
                        <div class="recommend_item_content_item">
                            <div class="recommend_item_content_item_img">
                                <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/153691/40/11181/212769/5fe4004bEad5ada65/ae4fb6b0dbc57081.jpg"
                                     alt="">
                            </div>
                            <div class="recommend_item_content_item_msg">
                                <div class="recommend_item_content_item_msg_title">
                                    <span>山东真贝贝南瓜5斤装 板栗南瓜宝宝辅食新鲜蔬菜水果</span>
                                </div>
                                <div class="recommend_item_content_item_msg_info">
                                    <div class="price">￥18.80</div>
                                    <div class="person">4379人购买</div>
                                    <i class="jdcart-gouwuchekong" onclick="add_shop($(this))"></i>
                                </div>
                            </div>
                        </div>
                        <div class="recommend_item_content_item">
                            <div class="recommend_item_content_item_img">
                                <img src="https://img14.360buyimg.com/n1/s150x150_jfs/t1/131854/30/18026/460623/5fc60812Eb164fef3/7c106d28f58c0c0e.jpg"
                                     alt="">
                            </div>
                            <div class="recommend_item_content_item_msg">
                                <div class="recommend_item_content_item_msg_title">
                                    <span>新鲜花菜新鲜蔬菜花椰菜花绿色蔬菜松花菜现砍发货产地直发老品种农家自种 3斤装</span>
                                </div>
                                <div class="recommend_item_content_item_msg_info">
                                    <div class="price">￥11.00</div>
                                    <div class="person">148人购买</div>
                                    <i class="jdcart-gouwuchekong" onclick="add_shop($(this))"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</article>
<footer></footer>
<script src="js/jquery1.8.3.min.js"></script>
<script src="js/shoppingCart.js"></script>
</body>
</html>

function delete_shop(span) {
    if (confirm("确认删除吗!")) {
        if (span.parents()[2].children.length === 2) {
            span.parents()[2].remove()
        } else {
            span.parents()[1].remove()
        }
    }
}

function add_shop(tag) {
    let $shop_li = $("#shops_li")
    let parents = tag.parents()
    let res = parents[2].children[1];
    let insertHtml = `<div class="article_cart_content">
                    <div class="article_cart_checkbox">
                        <label>
                            <input type="checkbox" name="checkItem" class="jdcheckbox">
                        </label>
                    </div>
                    <div class="article_cart_goods">
                        <div class="goods_img">
                            <img src=${parents[2].children[0].children[0].src}
                                 alt=""
                                 style="height:80px;width:80px">
                        </div>
                        <div class="goods_msg">
                            ${res.children[0].children[0].textContent}
                        </div>
                    </div>
                    <div class="article_cart_txt">
                        0.3mg*10片
                    </div>
                    <div class="article_cart_price">
                        ${res.children[1].children[0].textContent}
                    </div>
                    <div class="article_cart_count">
                        <button class="left">-</button>
                        <div class="count_num">1</div>
                        <button>+</button>
                    </div>
                    <div class="article_cart_sum">
                        ${res.children[1].children[0].textContent}
                    </div>
                    <div class="article_cart_operate">
                        <span οnclick="delete_shop($(this))">删除</span>
                        <span>移入关注</span>
                    </div>
                </div>`
    if ($shop_li.length !== 0) {
        $shop_li.append(insertHtml)
    } else {
        insertHtml = `<li id="shops_li">
                <div class="article_cart_top">
                    <div class="article_cart_checkbox">
                        <label>
                            <input type="checkbox" name="checkItem" class="jdcheckbox">
                        </label>
                    </div>
                    <div>
                        <span>京东自营</span>
                    </div>
                </div>
                ${insertHtml}
            </li>`
        console.log(insertHtml);
        $("#shops_ul").append(insertHtml)
    }
}

/*----------头部样式----------*/
header {
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: #e3e4e5;
    border-bottom: solid 1px #ddd;
}

header .header_nav {
    /*background-color: red;*/
    height: 100%;
    font-size: 8px;
    color: #999999;
    position: relative;
}

header ul {
    display: flex;
}

header ul.left {
    position: absolute;
    left: 0;
}

header ul.right {
    position: absolute;
    right: 0;
}

header ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8px;
}

header ul li.home {
    cursor: pointer;
}

header ul li.home:hover {
    color: red;
}

header .down {
    margin-left: 5px;
    font-size: 14px;
    border-right: 1px solid #ccc;
    margin-right: 5px;
}

header .down_none {
    border-right: none
}

header .right_span {
    cursor: pointer;
}

header .right_span:hover {
    color: red;
}

/*----------主体样式----------*/
article .article_top {
    height: 90px;
    /*background-color: red;*/
    display: flex;
    align-items: center;
    position: relative;
}

article .logo {
    display: block;
    margin-top: 2px;
    width: 134px;
    height: 42px;
    background: url(//misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png) no-repeat 0 0;
    background-size: 134px 42px;
    text-indent: -20000px;
}

article .search {
    background: #c91623;
    height: 24px;
    overflow: hidden;
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
}

article .search .itxt {
    border: 1px solid #c91623;
    height: 22px;
    line-height: 18px;
    width: 260px;
    outline: none
}

article .search .button {
    display: inline-block;
    vertical-align: top;
    width: 48px;
    height: 24px;
    background: #c91623;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

article .article_position {
    margin-top: 10px;
    font-size: 13px;
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
}

article .article_position .left {
    color: #e2231a;
    font-weight: bold;
    position: absolute;
    left: 0;
}

article .article_position .right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
}

article .article_position .right .po {
    border: 1px solid #CECBCE;
    margin-left: 5px;
    padding: 1px;
}

article .article_show_info {
    margin-top: 20px;
    position: relative;
    background-color: #F3F3F3;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

article .article_show_info .info_select_all {
    padding-left: 10px;
    flex: 2;
}

article .article_show_info .info_goods {
    padding-left: 20px;
    flex: 12;
}

article .article_show_info .info_price {
    flex: 2.5;
}

article .article_show_info .info_count {
    flex: 3;
}

article .article_show_info .info_sum {
    flex: 2;
}

article .article_show_info .info_operate {
    flex: 2.5;
}

article .article_cart {
    height: 100%;
    font-size: 12px;
}

article .article_cart li .article_cart_top {
    display: flex;
    padding: 10px 0 5px 10px;
    box-shadow: 0 1px 5px #888888;
    margin-top: 10px;
}

article .article_cart li .article_cart_top span {
    margin-left: 10px;
    background-color: #DA0012;
    color: #Fff;
    padding: 1px;
    border-radius: 3px;
}

article .article_cart li .article_cart_content {
    height: 100px;
    display: flex;
    padding: 0 30px 0 10px;
    border: 1px solid #c5c5c5;
}

article .article_cart li .article_cart_content .article_cart_checkbox {
    width: 20px;
    padding-top: 5px;
}

article .article_cart li .article_cart_content .article_cart_goods {
    width: 300px;
    display: flex
}

article .article_cart li .article_cart_content .article_cart_goods .goods_img {
    padding: 0;
    margin-top: 3px;
}

article .article_cart li .article_cart_content .article_cart_goods .goods_msg {
    padding: 10px 0 0 20px;
    cursor: pointer;
}

article .article_cart li .article_cart_content .article_cart_goods .goods_msg:hover {
    color: red;
}

article .article_cart li .article_cart_content .article_cart_txt {
    padding-top: 10px;
    margin-left: 40px;
}

article .article_cart li .article_cart_content .article_cart_price {
    padding-top: 10px;
    margin-left: 140px;
}

article .article_cart li .article_cart_content .article_cart_count {
    display: flex;
    width: 80px;
    padding-top: 10px;
    margin-left: 50px;
}

article .article_cart li .article_cart_content .article_cart_count button {
    height: 16px;
    width: 16px;
    display: flex;
    align-content: center;
    justify-content: center;
    border: 1px solid #cbcbcb;
}

article .article_cart li .article_cart_content .article_cart_count button.left {
    line-height: 11px;
}

article .article_cart li .article_cart_content .article_cart_count div {
    width: 30px;
    height: 14px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    border: 1px solid #cbcbcb;
}

article .article_cart li .article_cart_content .article_cart_sum {
    padding-top: 10px;
    margin-left: 50px;
    font-weight: bold;
}

article .article_cart li .article_cart_content .article_cart_operate {
    padding-top: 10px;
    margin-left: 45px;
    display: flex;
    flex-direction: column;
}

article .article_cart li .article_cart_content .article_cart_operate span {
    cursor: pointer;
    margin-bottom: 5px;
}

article .article_cart li .article_cart_content .article_cart_operate span:hover {
    color: red
}

article .article_settle {
    box-sizing: content-box;
    margin-top: 30px;
    height: 50px;
    border: 1px solid #c5c5c5;
    font-size: 12px;
    position: relative;
}

article .article_settle .settle_left {
    position: absolute;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

article .article_settle .settle_left .article_cart_checkbox {
    margin-left: 10px;
}

article .article_settle span {
    margin-left: 15px;
    cursor: pointer;
}

article .article_settle span:hover {
    color: red;
}

article .article_settle .settle_right {
    position: absolute;
    right: 0;
    display: flex;
}

article .article_settle .settle_right .settle_right_select {
    color: #9c9698;
    cursor: pointer;
    position: absolute;
    right: 200px;
    width: 100px;
    margin-top: 3px;
}

article .article_settle .settle_right .settle_right_select span {
    padding: 0 1px;
    margin: 0;
    color: #E64347;
    font-weight: bold;
}

article .article_settle .settle_right .settle_right_price {
    color: #9c9698;
    margin-left: 20px;
    position: absolute;
    right: 80px;
    width: 100px;
    margin-top: 3px;
}

article .article_settle .settle_right .settle_right_price span {
    padding: 0 1px;
    margin: 0;
    color: #E64347;
    font-weight: bold;
}

article .article_settle .settle_right .settle {
    height: 52px;
    background-color: #E64347;
    position: absolute;
    right: 0;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    margin-top: -1px;
}

article .article_recommend {
    height: 100%;
    /*background-color: red;*/
}

article .article_recommend .recommend_top {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

article .article_recommend .recommend_top div:first-child {
    margin: 5px 0 3px 0;
}

article .article_recommend .recommend_top div:first-child .line {
    color: #f1f1f1;
}

article .article_recommend .recommend_top div:first-child .content {
    font-weight: bold;
    font-size: 14px;
}

article .article_recommend .recommend_top div:first-child .content i {
    font-size: 18px;
    color: #E64347;
}

article .article_recommend .recommend_top div:last-child {
    margin-top: 5px;
    font-size: 12px;
}

article .article_recommend .recommend_item {
    height: 330px;
}

article .article_recommend .recommend_item .recommend_item_top {
    height: 80px;
    background-color: #FAFAFA;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
}

article .article_recommend .recommend_item .recommend_item_top .recommend_item_top_msg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    height: 48px;
}

article .article_recommend .recommend_item .recommend_item_top .recommend_item_top_msg span {
    margin-left: 10px;
}

article .article_recommend .recommend_item .recommend_item_top .recommend_item_top_msg span:last-child {
    color: #CD3C3F;
    font-weight: bold;
}

article .article_recommend .recommend_item .recommend_item_content {
    height: 275px;
    display: flex;
    justify-content: space-around;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item {
    width: 210px;
    height: 242px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item .recommend_item_content_item_msg_title {
    height: 36px;
    overflow: hidden;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item .recommend_item_content_item_msg_info .price {
    color: #CD3C3F;
    margin: 4px 0;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item .recommend_item_content_item_msg_info {
    position: relative;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item .recommend_item_content_item_msg_info .jdcart-gouwuchekong {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid #dedddd;
    padding: 1px;
    cursor: pointer;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

article .article_recommend .recommend_item .recommend_item_content .recommend_item_content_item .recommend_item_content_item_msg_info .jdcart-gouwuchekong:hover {
    color: #fff;
    background-color: #CD3C3F;
}