https://github.com/bxm0927/licaibao-responsive

一个响应式的理财网站，主要是为了学习响应式页面设计而制作。
https://github.com/bxm0927/licaibao-responsive

css gulp html js node

Last synced: about 1 year ago
JSON representation

一个响应式的理财网站，主要是为了学习响应式页面设计而制作。

• Host: GitHub
• URL: https://github.com/bxm0927/licaibao-responsive
• Owner: bxm0927
• License: mit
• Created: 2017-06-01T00:15:50.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-09-18T11:15:15.000Z (almost 9 years ago)
• Last Synced: 2025-04-08T11:38:34.285Z (about 1 year ago)
• Topics: css, gulp, html, js, node
• Language: CSS
• Homepage:
• Size: 3.34 MB
• Stars: 28
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
👉 GitHub: https://github.com/bxm0927/licaibao-responsive

👉 项目演示地址: https://bxm0927.github.io/licaibao-responsive/src/

这是一个基于 **CSS 媒体查询**的响应式理财网站，以一个实际上线的互联网金融网站为案例，实际演示响应式网页的成型过程。

![图片预览](http://oph264zoo.bkt.clouddn.com/17-7-21/36280093.jpg)

## 技术栈

- HTML：实现基本的 HTML 结构

- CSS：渐进增强 or 优雅降级；自己整理的 reset.css 来统一页面初始样式；相对单位 rem；媒体查询；清除浮动等

- JS：增加了一些特效，通过特效来改进用户体验；解决了一些浏览器兼容性问题；用 eslint 做 js 代码校验

- OwlCarousel2.js：响应式轮播图插件

- Gulp：自动化构建工具，使用Gulp进行自动化打包发布

- Node.js：同步异步编程方式的区别，包管理器NPM的使用，package.json 如何配置，http-server 的使用等知识

## 收获

1. 对常见的响应式布局方法（CSS Media Query、Flex 弹性布局、Bootstrap 栅格系统）有了更深的认识

2. 加深了对 css3 的一些特性的掌握，如 border-radius、transition 等

3. 能够快速掌握并使用一个简易 JS 插件

4. 熟悉了Node.js的基本知识、包管理器npm的使用、httpserver的使用

5. 熟悉了自动化构建工具 Gulp 的基本流程