悦轩饼家项目购物车页面

（1）主题（目标）：

完成悦轩饼家购物车页面

（2）完成页面所需要的知识点（重难点）

该页面用table和div来布局都可以

将表格间的边框消除： border-spacing: 0px;

单独给一个边框设虚线：border-bottom(top、left、right):dashed

用浮动调整元素位置不成功可以试试直接用margin-left调整

（3）完成页面的步骤

首先根据样本分析出这个购物车页面是固定不变的，所以用table表格来布局比较合适，根据样本分析出可以将表格分为四行七列来布局，但其中的虚线两头要空出一部分，这个用table很难实现，只能放弃实现这个效果，但是可以用再border-bottom:dashed设置下边框线为虚线用text-align:center使表格中每个格子的元素居中，在对比样本调整行高表格就基本完成了

再用三个div(一个大的div里面套两个div)来对结算一行的位置调整就能完成

（4）写页面的过程中碰到的问题，怎么解决的？

问题：商品信息类别一行需要设置背景颜色但是不能显示单元格间的边框线

解决方法：用 border-spacing: 0px;将边框线合并

效果图：

问题：应付金额和后面的价格需要调整位置，但是用向右浮动会使位置错位

解决方法：直接用margin-left直接调整距离左边的距离

效果图：