这个案例拖到现在才完成,大概快一个星期了吧,
中间断断续续,今天给完结了。先做一个复盘吧。前边是跟着视频做的,后边视频没了,
就自己去官网扒,看源代码,然后自己写出来。自己英语不好,起名是一个痛点,经常不知道起什么名字,
写的案例也太少了,常规的布局都不知道。
英语打算放假或者大二开学后开始进行学习。
对于CSS的布局需要去找项目练习。对于一些CSS的样式,自己也忘得差不多,感觉需要重新看一遍。
之前感觉自己已经掌握的差不多了,写网页时发现,
很多项目自己完全不知道什么意思,或者知道有这个属性,
但是属性值和怎么使用就不会了,当时掌握的不熟练。写代码的逻辑性差,经常拿到手后,不分析,直接上手写,然后写出来一堆bug,
自己还要慢慢调试,找bug。
以后拿到项目之后先进行分析,把思路理清楚写下来,再去动手写代码。接下来,打算一边按照视频做项目,一边去把HTML5权威指南这本书看下,
熟练之前因为看视频学习的,没有了解过的属性。写小米闪购这个过程中,我发现js其实相对比较简单一些,
主要在于样式和架构的搭建比较费时费力。ok,分析就到此结束吧,下边是代码部分,可能代码太多,
不想看这里的复制的代码可以直接在github上边下载源代码。

源码下载地址

效果展示

这部分是小米官网的下拉菜单这部分,这部分我没有做出来,剩下的都差不多。

代码部分:代码似乎太多了,有点超出我的想象了,就不放代码了,下边是代码部分的截图,有需要的可以自行在git上边下载。若你无法使用Github可以联系我,我重新将代码上传gitee上边。

后边的CSS代码和js代码我就都不放了,一个600多行,js代码就几十行,需要的自行在上边的链接下载、查看吧。

如果你有什么好的想法之类的,欢迎你来找我一起开发,虽然目前我的知识储备不够,但是人不都是一步步走过来么,有人一起学习才能有进步。

JavaScript案例分享+复盘——小米闪购界面相关推荐

  1. 做xx闪购网站准备工作

    1. 创建文件夹cc -->cc中 创建 css,img,js 文件夹 与 index.html文件: 2.在 css 文件夹-->创建 文本文档--> 重命名 为 style.cs ...

  2. 案例分享:Qt激光加工焊接设备信息化软件研发(西门子PLC,mysql数据库,用户权限控制,界面设计,参数定制,播放器,二维图,期限控制,参数调试等)

    若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/127669684 长期持续项目技术分享,有专业Qt需求请 ...

  3. 案例分享:Qt工程机械真空激光焊接系统软件产品定制(西门子PLC,mysql数据库,用户权限控制,界面配置,参数定制,播放器,二维图标,rgv小车,期限控制,参数调试等)

    若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/127214512 长期持续项目技术分享,有需求请回博客首 ...

  4. 小米在英国的1英镑闪购活动凸显其不熟悉欧洲市场

    在印度市场大获成功,让小米的信心膨胀了,其在今年开始强势进军欧洲市场,希望在该市场取得同样的成功,然而近日小米在英国的1英镑闪购活动惹怒英国消费者却凸显出这家企业不熟悉欧洲市场. 欧洲市场与新兴市场不 ...

  5. 案例分享:Qt西门子机床人机界面以及数据看板定制(西门子通讯,mysql数据库,生产信息,参数信息,信息化看板,权限控制,播放器,二维图表,参数调试界面)

    若该文为原创文章,转载请注明原文出处 本文章博客地址:https://blog.csdn.net/qq21497936/article/details/118685521 长期持续带来更多项目与技术分 ...

  6. Python自动化-APPium原理解析与实际测试案例分享

    目录结构 一.Appium概述 Appium架构原理 运行原理 1)Appium服务器 2)Bootstrap.jar 3)Appium客户端 二.Appium组件 三.Appium环境搭建 Node ...

  7. Bifrost微前端框架及其在美团闪购中的实践

    Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...

  8. 杨校老师课堂之JavaScript案例之跑马灯左右无缝连接图片自动轮播

    JavaScript案例之跑马灯左右无缝连接 效果图: 思路: 1.先做界面 1.1 制作一个大盒子,进行存放整个图片及按钮区域 1.2 制作两个按钮和中间区域盒子 1.3 中间区域盒子中使用无序列表 ...

  9. javascript案例_如何在JavaScript中使用增强现实-一个案例研究

    javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...

  10. 老李案例分享:Weblogic性能优化案例

    老李案例分享:Weblogic性能优化案例 POPTEST的测试技术交流qq群:450192312 网站应用首页大小在130K左右,在之前的测试过程中,其百用户并发的平均响应能力在6.5秒,性能优化后 ...

最新文章

  1. CentOS 6.5系统下安装和配置NFS服务
  2. 极致真实感受 无边硬屏即将登场
  3. C语言 将程序运行的时间记录在记事本中,下次运行进行读取
  4. 3.7 非极大值抑制-深度学习第四课《卷积神经网络》-Stanford吴恩达教授
  5. 安卓布局工具---Hierarchy Viewer
  6. 信息学奥赛一本通(C++)在线评测系统——基础(三)数据结构—— 1338:【例3-3】医院设置
  7. mysql keepalived双主双活_mysql高可用架构方案之中的一个(keepalived+主主双活)
  8. XnSay机器人授权系统源码
  9. python lxml解析html,当使用lxml.html解析html时,等同于InnerHTML
  10. neatdm路径_扫地机还能这么玩 延时摄影看路径规划
  11. 昂贵的聘礼 - poj 1062 (Dijkstra+枚举)
  12. python中url是什么意思_Python中url标签使用详解
  13. 详解Android定位,AndroidGPS定位详解(1)
  14. 前端技术规划与战略:2022
  15. Instead Of 触发器
  16. lcd改led背光有光斑_So Easy! LCD液晶电视改LED背光,你也可以!
  17. vue 选项卡切换
  18. windows7系统,ping本机ip地址请求超时的解决方案
  19. 婚姻家庭法简答题及答案
  20. 从C/C++到Python(之二)(By Robinvane Suen)

热门文章

  1. 统计学习方法+Python机器学习实践指南+强化学习精要:核心算法与Tensorflow实现+图解深度学习与神经网络从张量到TensorF实现+人工神经网络理论设计及应用+深度卷积网络:原理与实践
  2. WeUI for 小程序使用教程文档总结
  3. 《软件工程》 课后思考题
  4. 《普林斯顿微积分读本》 第二章 三角学回顾
  5. 未找到uniwebview_UniWebView.dll
  6. python飞机大战项目概述需求_飞机大战需求分析报告.doc
  7. android TextWatcher 学习
  8. CSDN账号 账号设置
  9. MLDN出品JAVA风暴终极的java学习视频
  10. matlab晶闸管整流电路,三相桥式全控整流电路 MATLAB/SIMULINK电力电子电路仿真