上海学员作品:期末检测实战三连发-响应式、移动端、桌面系统

实战是检验真理的最佳标准;在前端学习教育的每一个阶段,开发一个实战案例,是学有所成的最佳检测方案;
妙味上海 JavaScript 实体班学员 王萌萌 在课程结束后,为检验和巩固自己所学知识,作品 3 连弹:响应式桌面、Tmall 移动端、桌面系统;一起来看下吧~

响应式

项目地址:http://m.microbu.com/170503/wangmengmeng/1/

项目介绍:

使用媒询实现了完成的一个响应式页面,使同一个页面在 PC、Pad、Mobile 三种不同屏幕大小的设备都能够有完美的展现;

Tmall_移动端

项目地址:http://m.microbu.com/170503/wangmengmeng/2

项目介绍:

仿天猫商城的一个移动端 webApp;

  • 使用了 rem 布局,完美还原设计图,在不同设备的不同分辨率大小下都能够完美展示;
  • 封装移动端常用的滚动插件;
  • 滑动轮播图;

桌面系统

项目地址:http://project.microbu.com/170503/wangmengmeng/1/

功能介绍:

仿windows系统的一个 web 应用,实现了如下的一些功能:

  • 文件/文件夹布局展示;

  • 上下文(右键)菜单;
  • 新建文件夹:建立新的文件夹在桌面系统功能中首当其冲;

  • 上传文件:点击右键-上传文件,就可以将本地文件上传到作品上加以调用了;

  • 重命名:当我们上传或者新建文件,把它重命名为自己想要的名字,更加方便以后分类查找;

  • 排序展示:通过一键排序,可以把所有文件/文件夹按照:名称、时间、类型进行排序;

  • 复制/粘贴 文件/文件夹:复制粘贴文件夹是保证文件保存传递的必须功能;

  • 拖拽移动(删除)文件/文件夹;

  • 删除:大量的数据存储需要空间,当空间不足或者文件资料不再需要时-“删除,OK”;

  • 回收站:帮你保存删除的文件,一次删除文件,给你个“吃后悔药”还原的机会;

  • 刷新:刷新用当前的数据更新显示信息,并且产生了一批又一批的右键“刷新狂”;

  • 更改桌面背景:换换桌面、换换口味,DIY 专属自己喜欢的桌面主题背景;

  • 文件夹预览;
  • 子文件夹预览;
  • 面包屑(路径)导航;

应用通过数据驱动的方式来生成视图,所有文件/文件夹都是通过数据来进行管理的,封装了一些对数据树的基本操作。比如,查找子级,递归查找所有子级,查找父级,递归查找父级。通过该应用,同时也了解和感受到数据处理在功能实现中的重要性。


在这一系列的作品中,可以看到 王萌萌 同学的刻苦与用功;把在妙味课堂所学、把在讲师那里“搜刮”来的前端知识,全部应用转换成了自己的技能并且知之善用;同时也祝福她在毕业之际能做出更好更完善的结业作品,并且在前端的道路上越走越宽、越行越远。

课程目录

报名地址:http://miaov.com/index.php/course/coursedetail/cid/36


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想了解妙味最新公开课消息?长按二维码关注吧:

妙味网友
请登录后留言,请登录注册