All Projects → bxm0927 → licaibao-responsive

bxm0927 / licaibao-responsive

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

Programming Languages

CSS
56736 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to licaibao-responsive

gulp-iife
A Gulp plugin for wrapping JavaScript code in IIFEs.
Stars: ✭ 39 (+50%)
Mutual labels:  gulp
taskit
A Task Runner in Bash
Stars: ✭ 35 (+34.62%)
Mutual labels:  gulp
gulp-boilerplate
🚀 A opinionated gulp boilerplate for individuals and teams
Stars: ✭ 18 (-30.77%)
Mutual labels:  gulp
file-include-webpack-plugin
A webpack plugin to include files using @@ include syntax in html files, like gulp-file-include
Stars: ✭ 16 (-38.46%)
Mutual labels:  gulp
bibleapi-rest
Node.js based Bible API RESTful web service
Stars: ✭ 34 (+30.77%)
Mutual labels:  gulp
fly-helper
It's a Tool library, method collection
Stars: ✭ 21 (-19.23%)
Mutual labels:  gulp
gulp-webpack-demo
No description or website provided.
Stars: ✭ 12 (-53.85%)
Mutual labels:  gulp
WordPress-UIkit-Starter-Theme
A WordPress starter theme for developers using the frontend framework UIkit
Stars: ✭ 55 (+111.54%)
Mutual labels:  gulp
manage-demo
后台管理系统模版
Stars: ✭ 19 (-26.92%)
Mutual labels:  gulp
react-ssr-spa
Server side rendered single page app using reactjs official libraries.
Stars: ✭ 30 (+15.38%)
Mutual labels:  gulp
electron-angular-ngrx
An Angular (6x) Electron seed featuring @angular/cli, @ngrx/platform, and Typescript. Complete with HMR workflow
Stars: ✭ 39 (+50%)
Mutual labels:  gulp
generator-veams
Scaffold modern frontend web apps or web pages with a static site generator (Assemble or Mangony), Grunt and/or Gulp, Sass and Bower. Use modern frameworks like Bourbon, Bootstrap or Foundation and structure your JavaScript with ES Harmony support.
Stars: ✭ 45 (+73.08%)
Mutual labels:  gulp
eadmin
eadmin - 极致用户体验与极简开发并存的开箱即用的后台UI框架
Stars: ✭ 258 (+892.31%)
Mutual labels:  gulp
Carbon.Gulp
Carbon/Gulp is a delicious blend of tasks and build tools poured into Gulp to form a full-featured modern asset pipeline for Flow Framework and Neos CMS.
Stars: ✭ 15 (-42.31%)
Mutual labels:  gulp
sp-build-tasks
👷 SharePoint front-end projects automation and tasks tool-belt
Stars: ✭ 15 (-42.31%)
Mutual labels:  gulp
docker-npm
npm, yarn, node, npx, bower, grunt, gulp, generate-md - build and dev tools.
Stars: ✭ 53 (+103.85%)
Mutual labels:  gulp
pacco
A bundler for modular and extensible web projects.
Stars: ✭ 16 (-38.46%)
Mutual labels:  gulp
gulp-tmod
grunt-tmod gulp version
Stars: ✭ 30 (+15.38%)
Mutual labels:  gulp
boilerplate-frontend
Frontend Boilerplate for projects
Stars: ✭ 20 (-23.08%)
Mutual labels:  gulp
envoyer-npm-deployment
Compile assets that depend on node packages using Laravel Envoyer deployment hooks
Stars: ✭ 43 (+65.38%)
Mutual labels:  gulp

👉 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 的使用等知识

收获

  1. 对常见的响应式布局方法(CSS Media Query、Flex 弹性布局、Bootstrap 栅格系统)有了更深的认识
  2. 加深了对 css3 的一些特性的掌握,如 border-radius、transition 等
  3. 能够快速掌握并使用一个简易 JS 插件
  4. 熟悉了Node.js的基本知识、包管理器npm的使用、httpserver的使用
  5. 熟悉了自动化构建工具 Gulp 的基本流程
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].