——  作 品 资 源  ——

展示学习Web前端开发过程中的Demo作品资源。



网易云课堂

《网易微专业·前端开发工程师》毕业设计,综合运用HTML+CSS+JS实现云课堂首页布局,Ajax+JSON前后端交互设计、登录弹窗+Cookie设置、轮播头图等。

电商网站开发

电商网站整体布局开发,包括首页、筛选页、产品页、购物车等页面。浏览器兼容(IE6/IE7/IE8)常规处理。

Sunvit外贸网站

基于WordPress的外贸企业网站开发,Wordpress程序后台设置、插件修改等。

瀑布流布局

运用原生JS、jQuery、CSS3三种方法,实现瀑布流布局、图片自动加载功能。

企业网站布局

企业网站综合布局实战,两列、三列布局,myfocus焦点图工具运用

现代浏览器博物馆

基于Bootstrap前端框架,综合运用Bootstrap栅格布局、组件、插件等,制作响应式网页。

全屏切换单页

基于Bootstrap前端框架,制作全屏切换单页。

基于FullPage.js的全屏滚动网站开发

基于fullPage.js插件,制作全屏滚动网站。网站需要多处动画效果,利用Move.js插件来创建CSS3动画效果。

刘珂矣音乐Fans网站

综合运用《JavaScript DOM编程艺术》所学知识,设计音乐Fans网站。

扁平化风格博客

综合运用HTML+CSS/CSS3实现扁平化风格博客设计,并针对不同屏幕尺寸进行响应式布局。

Gulp+Sass打造前端自动化项目网站

综合运用Gulp+Sass,打造前端自动化项目,并实现一个中介类扁平化网页设计。


列车时刻表

基于jQuery Mobile,制作Web APP-"列车时刻表",实现Ajax跨域访问,动态查询列车时刻表等数据。

小巧音乐播放器

综合运用HTML+CSS+JS+Ajax实现自定义音乐播放器,可切换歌曲/频道,调节音量,随机播放等。

H5全屏切换页面

基于zepto.fullpage,制作移动端的全屏切换页面,利用animations.css实现动画设计。(请在模拟移动设备窗口打开,320*480px)


焦点轮播图

使用原生JS、CSS3、jQuery、插件等实现焦点轮播图特效。

使用原生JS,实现简单的轮播图特效(图片自动轮播、鼠标悬停效果、鼠标点击切换效果。)
利用jQuery,实现图片轮播特效(图片自动轮播、鼠标悬停效果、鼠标点击切换效果、左右箭头点击切换图片)。
折叠区域内容

标题一对应的内容

CSS3变形、过渡与动画

CSS3 transform,CSS3 transition,CSS3 animation

对CSS3的animation/transition等运用,实现页面展现正立方体动画。

折叠区域内容
折叠区域内容

Canvas绘图

Canvas是HTML5新出现的标签,用于制作矢量图。

将一系列坐标点及颜色存储在数组中,使用Canvas来绘制七巧板图像。
折叠区域内容
折叠区域内容
折叠区域内容
折叠区域内容
折叠区域内容
折叠区域内容

Ajax技术

Ajax是一种无需刷新页面就能够从服务器获取数据的技术,会带来更好的用户体验。

折叠区域内容

焦点轮播图

详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

折叠区域内容
折叠区域内容
折叠区域内容

标题一对应的内容

焦点轮播图

详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

折叠区域内容
折叠区域内容
折叠区域内容

标题一对应的内容