🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

问题描述

  根据题意写出完整的css,html和js代码
¥15
javascript
1）购物车特效布局
○1body中定义table标签和div标签，table标签存放所有商品列表，div标签存放商品结算部分内容。
○2table标签中定义thead和tbody标签，thead标签即表格头部，tbody标签即表格具体内容。
○3tbody中存放4个tr，每个tr代表一个商品，依次用td标签存放商品的勾选框、缩略图、商品名称、商品单价、商品增减操作按钮以及小计总价等。
○4div标签存放商品全选框、批量删除按钮、已选商品的预览浮层以及商品计算价格。div标签样式为“foot”时商品预览浮层隐藏，div标签样式为“foot show”时商品预览浮层