how2j网站前端项目——天猫前端（第一次）学习笔记5

收拾好心情，现在开始学习第5个页面——购物车页面！

一、结算按钮

这个还是比较简单的，我自己看着站长的样子模仿了一个：

有个地方不会做，就是全选前面的复选框，站长的框里面是白色的，我搞不来。

 二、订单项内容

上面是借鉴了站长的布局思路，自己写的CSS样式，有个地方没有做好：1.每一个商品的订单没有垂直居中：我看站长的CSS代码，应该是这句：

tr.cartProductItemTR td{
padding: 20px 20px;
}

让表格的每一个单元格垂直居中了

 

2. 购买数量调节的地方，我是分别给加号、减号加了边框，但是站长的是给加号、减号和input一起加了一个边框，简直太赞了

3.我用的bootstrap框架的表格，就是让表格的class = "table"，然后再去掉第一行的边框；而站长的做法就是使用普通的表格，在加上这句：

tr.cartProductItemTR{
    border: 1px solid #CCCCCC;
}

让除了第一行以外的所有行都有了上下左右边框，中间没有边框的效果。（其实，是我自己table使用不规范，后面我发现，<table></table>中加上<thead>、<tbody>标签后，第一行的上面边框自动就没有了，如果第一行使用<th>标签，而不是<td>标签，还会有字体加粗的效果。看来还是要注意规范呢！）

 三、交互内容

站长提示：购物车的交互相当复杂，有如下事件需要监听：

1.点击全选

2.点击某一个产品

3.点击减少数量

4.点击增加数量

5.在数量输入框中修改数量

监听这些事件的发生，需要做一系列的响应动作。

代码太多了，为了保护站长的知识产权，就不贴了，嘻嘻！

 

总结！

1.复选框设置框中 的颜色为白色：好吧，站长用的是一张图片囧

 

转载于:https://www.cnblogs.com/czp2bconfident/p/8647350.html