• how2j网站前端项目——天猫前端(第一次)学习笔记3


    开始学习分类页面!

    站长介绍说,这个项目一共有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的时候会顺手很多,代码也更加清晰易读了。

     

  • 相关阅读:
    Linux 实例如何开启 MySQL 慢查询功能
    20步打造最安全的Nginx Web服务器
    解决java compiler level does not match the version of the installed java project facet
    maven项目重构目录
    【JeeSite】角色和权限的修改
    【JeeSite】区域和菜单管理
    【JeeSite】登录和主题切换
    【JeeSite】用户管理
    一个程序员的故事
    maven项目发布到Tomcat丢失jar包
  • 原文地址:https://www.cnblogs.com/czp2bconfident/p/8640788.html
Copyright © 2020-2023  润新知