开始学习分类页面!

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

how2j网站前端项目——天猫前端(第一次)学习笔记3的更多相关文章

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

    首先是公共页面的学习,有页头.页脚和搜索框. 一.页头就是天猫网站的置顶导航栏: 看似简单,实际做起来也不容易. 写html还是比较简单的,撸起袖子就可以写完.可要想做到上图的样式就难了,难就难在CS ...

  2. how2j网站前端项目——天猫前端(第一次)学习笔记6

    开始我的订单页面 学着学着,会觉得我这是在干啥呢?我要学的是Java不是吗?怎么要学这么久的前端啊?说实话,我很迷茫,不知道以后的工作具体是做什么?学的这些能用到吗? 不过,还是要把这个项目跟着走完! ...

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

    开始产品页面的学习.项目里面有900多种商品,但是每种商品的布局是一致的:1.产品图片 2.基本信息 3.产品详情 4.累计评价 5.交互.从第一个产品图片开始吧! 一.产品图片 产品图片用到了分类页 ...

  4. how2j网站前端项目——天猫前端(第一次)学习笔记2

    今天早上开始首页内容.首页除了公共页面,还有许多自己的内容:导航和轮播.分类菜单.推荐产品展示,最后还有js的互动. 一.导航和轮播的学习 在自己做图片的轮播时,还是没有一次成功.存在了好几处问题: ...

  5. how2j网站前端项目——天猫前端(第一次)学习笔记8

    其他页面的学习 这些页面有1.查询结果页 2.支付页面 3.支付成功页面 4.确认收货页面上 5.确认收货页面下 6.收获成功页面 7.评价页面上 8.评价页面下 9.登陆页面 10.注册页面 1.查 ...

  6. how2j网站前端项目——天猫前端(第一次)学习笔记7

    开始学习结算页面 结算页面分为3个部分学习:1.简单的头部和收货地址 2.较为复杂的确认订单信息 3.交互 一.简单的头部和收货地址 根据站长的图片,自己模仿着做了一下,刚开始没有想到填写信息的4个框 ...

  7. how2j网站前端项目——天猫前端(第一次)学习笔记5

    收拾好心情,现在开始学习第5个页面——购物车页面! 一.结算按钮 这个还是比较简单的,我自己看着站长的样子模仿了一个: 有个地方不会做,就是全选前面的复选框,站长的框里面是白色的,我搞不来. 二.订单 ...

  8. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  9. 关于前端的photoshop初探的学习笔记

    写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...

随机推荐

  1. tips___代码规范

    函数变量尽可能置于最小作用域内,并在变量声明时进行初始化 变量声明的位置最好离第一次使用的位置越近越好:应使用初始化的方式代替声明再赋值. int x=0; rather than  int x; x ...

  2. python中time模块和datetime模块

    time模块和datetime模块 时间分为三种模式(time 模块) 时间戳   (time.time()) 格式化字符串 (time.strftime(%Y-%m-%d %H:%M:%S %p)) ...

  3. angularjs 与 UEditor开发,添加directive,保证加载顺序正常

    'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', ...

  4. python类和对象的底层实现

    按照python中"一切皆对象的原理",所有创建的对象,都是一个已知存在的class实例化的结果;那么class又是被哪个"类"实例化的呢?先看下面的一段代码 ...

  5. JAVA JDK配置

    配置环境变量_jdk 1.右键选择[计算机]——[属性] ——[左上角的高级系统设置] 2.点击[环境变量] 3.在[系统变量]里点击[新建], 变量名填写JAVA_HOME,变量值填写JDK的安装路 ...

  6. mysql 查询上个月某一天

    本文地址:http://www.cnblogs.com/jying/p/8877065.html 需求:获取上个月15号的日期 网上一搜一大堆粘贴复制的大坑:(如下是查询上个月最后一天,可是我要的不一 ...

  7. Scrapyd 的远程部署和监控

    1. 安装Scrapyd sudo pip3.6 install scrapyd # 安装scrapyd服务 sudo pip3.6 install scrapyd-client # 安装scrapy ...

  8. 微信小程序--分享报错(thirdScriptError Cannot read property 'from' of undefined;at pages/index/index page onShareAppMessage function TypeError: Cannot read property 'from' of undefined)

    分享功能: onShareAppMessage: function (res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res. ...

  9. ArrayList删除--------ConcurrentModificationException问题

    在做项目中用到List存储数据,在里面做数据操作时候用到了删除.结果抛出ConcurrentModificationException异常.在这里把问题总结一下. 原因: ArrayList进行for ...

  10. Spring Boot Maven 打包 Jar

    Maven pom.xml 必须包含 <packaging>jar</packaging> <build> <plugins> <plugin&g ...