开始学习分类页面!

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

一、排序和价格

纯html页面:

自己试着加上CSS样式:

看上去自己做的还行哈哈

 

二、产品列表

纯html的时候:

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

 

三、交互功能

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

 

 

总结

1.对于表格使用:

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

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

 

posted on 2018-03-24 18:37  2bconfident  阅读(722)  评论(0编辑  收藏  举报