👉 GitHub: https://github.com/bxm0927/licaibao-responsive
👉 项目演示地址: https://bxm0927.github.io/licaibao-responsive/src/
这是一个基于 CSS 媒体查询的响应式理财网站,以一个实际上线的互联网金融网站为案例,实际演示响应式网页的成型过程。
- HTML:实现基本的 HTML 结构
- CSS:渐进增强 or 优雅降级;自己整理的 reset.css 来统一页面初始样式;相对单位 rem;媒体查询;清除浮动等
- JS:增加了一些特效,通过特效来改进用户体验;解决了一些浏览器兼容性问题;用 eslint 做 js 代码校验
- OwlCarousel2.js:响应式轮播图插件
- Gulp:自动化构建工具,使用Gulp进行自动化打包发布
- Node.js:同步异步编程方式的区别,包管理器NPM的使用,package.json 如何配置,http-server 的使用等知识
- 对常见的响应式布局方法(CSS Media Query、Flex 弹性布局、Bootstrap 栅格系统)有了更深的认识
- 加深了对 css3 的一些特性的掌握,如 border-radius、transition 等
- 能够快速掌握并使用一个简易 JS 插件
- 熟悉了Node.js的基本知识、包管理器npm的使用、httpserver的使用
- 熟悉了自动化构建工具 Gulp 的基本流程