购物车规则选择html,HTML两种简单的购物车

第一种

我的购物车

清空购物车

name

price

number

totalprice

option

{{x.name}}

{{x.price}}

-+

{{x.totalprice=x.price*x.gnumber}}

删除

总价为: ¥ {{count()}}

您的购物车为空,

去逛商场CSS文件

#Box{width: 1000px;height: 500px;margin: auto;}

#deleteAll{

float: right;

border-radius: 5px;

background-color: dodgerblue;

border: 0px;}

#dataTable{width: 1000px;}

.deleteOne{

width: 100%;

background-color: #2B93FF;

border-radius: 5px;

border: 0px;}

第二种

我的购物车详情

选择商品全选反选

商品编号▲

商品名称

商品数量

商品单价

价格小计▲

操作

{{x.gid}}

{{x.gname}}

{{x.gprice}}

{{x.gcount=x.gnum*x.gprice}}

删除

商品总数: {{countNum()}}

商品总价: {{countPrice()}}

清除所选

清空购物车

CSS文件

#box{width: 1000px;height: 500px;margin: auto;background-color: #ff8080;}

#myh1{text-align: center;}

#select{

width:100px;

height:18px;

font-size:11px;

text-align:center;

border:#ccc 1px solid;

border-radius: 15px;

position: relative;

left: 680px;

/*b9f08b*/

}

#tab{margin:0 auto;margin-top: 40px;}

#tab td{width: 100px;text-align: center;}

#footer{width: 600px;margin: auto;background-color: skyblue;}

#footer div{background-color: #2b93ff;color: white;width: 100px;}

#deleteall{

background-color: #2b93ff;

color: white;

border: 0;

border-radius: 15px;

}

#countNum{float: left;}

#countPrice{margin: auto;}

#deleteall{float: right;}