功能比較簡單 就一個累加 css也比較簡單 以後會發一個完整的購物車

<div class="goods-type">
    <div class="type-nav">
        <ul>
            <li>休閒零食</li>
            <li>飲料酒水</li>
            <li>方便速食</li>
            <li>冷飲</li>
            <li>速凍食品</li>
        </ul>
    </div>
    <div class="goods">
        <ul class="goods-nav">
            <li>全部</li>
            <li>餅乾</li>
            <li>膨化食品</li>
            <li>堅果</li>
        </ul>
        <ul class="goods-con">
            <li>
                <img src="img/images.png">
                <p>達利園法式小麵包</p>
                <p>200g(10枚)</p>
                <p class="price-num"><span class="price" id="jia">￥6</span><span class="num" id="jian">+</span></p>
            </li>
        </ul>
    </div>
</div>
<div class="total">
    <div class="cart">
        <img src="img/che.png">
        <p class="total-num">4</p>
    </div>
    <div class="total-price"><p id="zongjia"></p>
        <p class="v-price">配送費￥5</p></div>
    <div class="count">去結算</div>
</div>
<script>
    var jian = document.getElementById('jian');  //獲取元素的id
    var zongjia = document.getElementById('zongjia');//獲取總價的id
    var num = 6;//初始價格
    zongjia.innerHTML = "￥" + num;//給文字賦值
    var nums = num;//每次累加的值
    jian.onclick = function () {//點選+ 累加
    num += nums; //每次加上 初始價格 這個主要 不是 ++ 是+=
    zongjia.innerHTML = "￥" + num; //每次點 每次賦值
    }
</script>
	<style type="text/css">
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .goods-type {
        margin: 0 auto;
        height: 660px;
    }

    .type-nav {
        float: left;
        border-top: 1px solid #efefef;
        margin-right: 38px;
    }

    .type-nav li {
        height: 112px;
        padding-left: 20px;
        padding-right: 42px;
        background: #f8f8f8;
        border-bottom: 1px solid #efefef;
        color: #757575;
        font-size: 28px;
        line-height: 112px;
    }

    .goods {
        float: left;
    }

    .goods-nav {
        height: 112px;
    }

    .goods-nav li {
        float: left;
        padding-right: 42px;
        color: #999999;
        height: 112px;
        line-height: 112px;
        font-size: 24px;
    }

    .goods-con {
        width: 468px;
    }

    .goods-con li {
        float: left;
        width: 180px;
        margin-right: 36px;
        margin-top: 10px;
    }

    .price {
        float: left;
        font-size: 24px;
        color: #ff0000;
    }

    .num {
        float: right;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        background: #f8f8f8;
        font-size: 20px;
        color: green;
    }

    .total {
        height: 83px;
        background: #000;
        width: 640px;
        position: relative;
    }

    .cart {
        width: 87px;
        height: 87px;
        border-radius: 50%;
        text-align: center;
        line-height: 87px;
        position: absolute;
        top: -18px;
        left: 22px;
        background: #000;
    }

    .cart img {
        vertical-align: middle;
        width: 69px;
        height: 69px;
    }

    .total-num {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: red;
        color: #fff;
        text-align: center;
        line-height: 28px;
        position: absolute;
        top: 0px;
        left: 70px;
    }

    .total-price {
        float: left;
        margin-left: 136px;
        color: #fff;
        padding-top: 20px;
        font-size: 26px;
    }

    .count {
        float: right;
        width: 178px;
        height: 82;
        line-height: 82px;
        text-align: center;
        color: #fff;
        background: green;
        font-size: 28px;
    }

    .v-price {
        font-size: 17px;
    }
</style>