用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。

html中的购物车的增减不能直接传送到后台，可以通过ajax，在js中发送ajax

纯前端的话可以参考下面的

    
    
    
    
    

    body,p,a,input{
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.container{
    width: 100%;
}

.main{
    width: 1000px;
    height: 500px;

    margin:100px auto;
}

.main .cart-container table{
    width: 100%;



}

.main .cart-container table tr{
    text-align: center;

}

.main .cart-container table tr:hover{
    background: rgba(128, 128, 128, 0.2);
}
.main .cart-container table .table-header{
    height: 30px;
    background: #d9d9d9;

    font-size: 1.2em;

}

.main .cart-container table .table-header td:first-child{
    border-left: solid 4px red;
    box-sizing: border-box;
}

.main .cart-container table tr td:nth-child(1),
.main .cart-container table tr td:nth-child(2){
    text-align: left;

}

.main .cart-container table tr td:nth-child(2){
    width: 52%;
}
.main .cart-container table tr td:nth-child(3){
    width: 12%;
}
.main .cart-container table tr td:nth-child(4){
    width: 12%;
}
.main .cart-container table tr td:nth-child(5){
    width: 12%;
}
.main .cart-container table tr td:last-child{
    width: 10%;
}

.cart-good{

    height: 60px;
}
.cart-good img{
    float: left;
    margin: 10px;
    width: 60px;
}

.cart-good td p{
    margin: 10px 0px;
}


/*加、减按钮*/

.cart-good td input[type='button']{
     width: 20px;
     height: 20px;
     background: #00f300;
     outline: none;
     border: none;
 }

.cart-good td input[type='button']:disabled{
    background: grey;
}

.cart-good td input[type='button']:first-child{
   margin-right: -4px;
}
.cart-good td input[type='button']:last-child{
    margin-left: -4px;
}
.cart-good td input[type='text']{
    width: 30px;
    height: 20px;
    outline: none;
    border: none;
    text-align: center;


}


.table-footer{
    display: flex;
    justify-content: space-between;
    line-height: 40px;
}


.table-footer div{
    font-size: 1.2em;

}
.table-footer div button{
    background: red;
    width: 120px;
    height: 40px;
    color: white;
}
  
    
    
    
    
    
    
    
    
    
聚美优品发货    
聚美价    
数量    
小计    
操作    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
 全选    
继续购物 | 清空选中商品    
    
    
共 5件商品    商品应付总额：¥229.00    
去结算