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

开始学习分类页面！

站长介绍说，这个项目一共有17个分类页面，每个分类页面的风格都是相似的：由分类图片、 查询、各种排序方式，产品列表。内容很多，拆成3部分学习：1.排序和价格 2.产品列表 3.交互。学习的时候不要着急，不要急躁，不要急于求成，好了，开始吧。

一、排序和价格

纯html页面：

自己试着加上CSS样式：

看上去自己做的还行哈哈

二、产品列表

纯html的时候：

自己尝试加CSS样式，遇到了问题：当鼠标悬停在某个商品上时，要求边框变成红色，而且边框会加粗，自己采取了两种方式都没有成功。看看站长的操作吧。站长是先把边框设置为3px的白色，当鼠标悬停在上面的时候，变为3px的红色，而且一开始就有的1px灰色边框是更里面一层框架的，当鼠标悬停在上面的时候，他也会变成1px的红色边框，所以一共是4px的红色边框。

三、交互功能

交互有两部分功能：1.排序部分：排序功能，需要提交到服务器重新获取数据，这个就不属于js交互部分的内容了。2.价格区间：满足价格条件的产品都会罗列出来，这个是用js做的，可以演示效果。

总结

1.对于表格使用：

 border-collapse : collapse  /*使得单元格之间没有空隙*/

2.JavaScript或者使用JQuery，需要HTML中良好的标签、类名或者id名来配合使用，在编写HTML代码的时候，给元素起一个好的类名或者id名，使用js的时候会顺手很多，代码也更加清晰易读了。