除夕一梦

vuePress-theme-reco 林除夕    2022
除夕一梦

Choose mode

  • dark
  • auto
  • light
home
Category
  • B-前端杂谈
  • C-JavaScript
  • E-H5C3
  • F-vue
  • G-思考
  • H-项目记录
  • I-学习笔记
  • Y-有趣
  • z-hexo
Tag
About
TimeLine
Contact
  • github
  • gitee
  • 知乎
author-avatar

林除夕

25

Article

35

Tag

home
Category
  • B-前端杂谈
  • C-JavaScript
  • E-H5C3
  • F-vue
  • G-思考
  • H-项目记录
  • I-学习笔记
  • Y-有趣
  • z-hexo
Tag
About
TimeLine
Contact
  • github
  • gitee
  • 知乎

H-项目记录-02:我的京东

vuePress-theme-reco 林除夕    2022

H-项目记录-02:我的京东

林除夕 2019-08-06 21:01:16 前端切页面

页面最终效果

# why


当然是为了练习啦。不然还能拿来恰饭吗。开始主要是为了练习html和css,后面发现很多功能没有js完成起来十分的困难,后面对整个页面又做了一次补充。

# how


  • 使用FSCapture将京东整个首页扒下来
  • 通过查看网站源代码将精灵图和其他图片素材扒下来
  • 根据整个主页的截图划分模块
  • 分模块具体实现
  • 使用原生的html和css
  • js部分使用原生开发过,后面转成jQuery了

# 记录

  • # 练习到的技术

    • 精灵图的使用
    • 各种选择器的使用(子代选择器,兄弟选择器...)
    • 相对定位 绝对定位 固定定位 对于页面板块的划分布局.
    • 轮播图实现
  • # 比较有意思几个地方

    • 侧边导航栏

      • 要实现列表排他功能
      • 同时要实现动态加载数据
      • 这对于当时还是萌新的我老说确实花费了一些时间,业务目标倒是不难,但是实现的逻辑上因为第一次接触在一些地方遇到了麻烦.

      侧边导航栏

    • 侧边大广告

      • 功能不难,但是这个功能对于很多网站来说很重要,毕竟要恰饭,所以你懂的

      • 使用两个盒子固定在侧边,其中一个盒子宽度默认为0

      • 鼠标经过的时候调用一个动画效果,可以是纯css或者使用js配合,将隐藏的盒子展示出来

        侧边大广告

    • 导航栏下拉菜单

      • 如果是单纯的导航栏还好,重点是它有下拉菜单就很蛋疼了.

      • 因为下拉菜单的存在所以需要考虑导航栏/轮播图/搜索/购物车等板块的层级问题

      • 因为开始设计的时候没有考虑好这个因素导致后面设置层级的时候最开始的静态导航栏位置发生了错乱

      • 导航栏下拉菜单的展示方向不一致

向右的下拉菜单

向右的下拉菜单

向左的下拉菜单

向左的下拉菜单

因为这个开始没有考虑,我所有的css都是写的向右的,最后来改的时候还出现了一个莫名的bug,很头疼,不过最后解决了,我觉得前期遇到这些问题还是很好的,至少给了我练习debug的能力 (ε=ε=ε=┏(゜ロ゜;)┛)

以上就是我个人觉得很有意思的地方,京东的技术确实不一样,基本上完全是自己的技术在解决问题,这就是沉淀的力量吧,希望有一天我也能成为这样的大佬.