adobe dreamweaver
新建html文档。
书写hmtl代码。
| | 单价 | 数量 | 小计 | 操作 |
|---|---|---|---|---|
| 供应商： 发货地： | {{tabledatas.price | moneyFiler}} | - + | {{tabledatas.price*tabledatas.num | moneyFiler}} | 删除 移到我的收藏 加入收藏 取消收藏 |
书写css代码。.ShopCartTable { margin: 0 auto; margin-top: 20px; }.toper_nav { background: white; border-bottom: 1px solid #DEDEDE; }.toper_btm_nav, .toper_nav { float: left; }.logoTit { margin-left: 20px; }.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-right: 0px; padding-left: 0px; }.layui-tab-title { border-bottom: 0px; }.layui-tab-title li { color: white; margin-top: -5px; margin-right: 50px; vertical-align: inherit; }.toper_btm_nav { height: 45px; background: #05226C; }.layui-tab-brief>.layui-tab-title .layui-this { border-radius: 15px; color: #05226C; height: 35px; background: white; padding-bottom: 5px; }.layui-tab-title .layui-this:after { height: 38px; line-height: 38px; }.toper_btm { line-height: 18px; }.toper_btm img { margin-top: 15px; }.erweimaImg { float: right; }.erweimaCont { margin-left: -8px; font-size: 12px; }.toper_tit { font-size: 16px; font-weight: bold; }.ShopCartTable { text-align: center; width: 80%; margin-top: 20px; }.ShopCartTable thead tr { background-color: #f3f3f3; border: 1px solid #e9e9e9; height: 32px; line-height: 32px; font-weight: 200; }.ShopCartTable th { text-align: center; border: 0px; color: #999999; font-weight: 200; }.ShopCartTable td { border: 0px; border-bottom: 1px solid #EDEDED; padding: 10px 0; }.goodImg { width: 100px; height: 100px; padding: 5px; border: 1px solid #DEDEDE; }.addBtn, .deleteBtn { color: #999999; font-size: 12px; margin-top: 5px;}.deleteBtn { display: inline-block; cursor: pointer; height: 30px; line-height: 30px; border: 1px solid #ededed; padding: 0px 5px; border-right: 0px; }.addBtn { margin-left: -4px; display: inline-block; cursor: pointer; height: 30px; line-height: 30px; border: 1px solid #ededed; padding: 0px 5px; border-left: 0px; }.numInput { width: 50px; height: 30px; margin-left: -4px; border: 1px solid #EDEDED; text-align: center; margin-top: -5px; position: relative; }.selectInput { width: 50px; }.selectLeftGoods { margin-left: 40px; }.goodName { display: inline-block; }.goodsName { margin-left: 10px; }.goodGary { color: #999999; text-align: left; }.goodname { font-language-override: 16px; }.danPrice { color: #999999; }.totalPrice { font-size: 14px; font-weight: bold; }.SettlementBtn { height: 50px; width: 100px; color: white; background: #209ceb; display: inline-block; text-align: center; float: right; position: relative; font-size: 18px; margin-top: -1px; }.totalclassPoin { color: #999999; position: absolute; right: 140px; }.servicenum { position: absolute; right: 35%; color: #999999; }.removeMuch { position: absolute; left: 90px; cursor: pointer; color: #999999; }.removeSaves { position: absolute; left: 250px; cursor: pointer; color: #999999; }.deletegoods { color: #999999; cursor: pointer; }.ShopCartTable .selectLeft { text-align: left; }.el-checkbox__input { margin-right: 20px; }.el-checkbox__label { margin-left: -20px; color: #999999; font-weight: normal; }.gongneng p { cursor: pointer; color: #999999; }.gongneng .saveCheck { color: red; }.tablefooter { height: 50px; line-height: 50px; border: 1px solid #EDEDED; margin-top: 20px; margin-bottom: 30px; }.totalMoneyClass { color: red; font-weight: 500; font-size: 20px; }.goodsNum { color: red; }.is-null { font-weight: 500; color: #ccc; height: 300px; }td.is-null { border: 0px; }
书写并添加js代码。
代码整体结构。
查看效果。