论文总字数：34623字

摘 要

随着智能软硬件技术的飞速发展和互联网的快速普及，计算机、手机等智能设备以及互联网成了人们的生活中不可或缺的一个部分。人们对页面的要求不仅仅是完成应有的功能，而且希望网页有设计感、好看。一个设计美观、交互优秀的网页需要设计师和前端工程师的大量工作，那么通过使用前端框架，可以让使用者快速，简单地搭建风格统一、样式规范的网页前端。

本文主要介绍了课题的背景、开发主要的技术、内容以及实现细节以及使用示例。本前端框架主要分为基础样式、动画和组件三部分。本框架通过CSS可叠加、可覆盖的特性，把常用的CSS样式进行了整理、总结以及模块化的分类，再借助于jQuery完成对浏览器的事件监听，搭建前端框架。通过使用前端框架定义了HTML元素的基础样式，并且定义了大量的实用的样式类可以让使用者组合使用以达到各种样式需求，还提供了支持响应式的栅格系统，通过添加动画相关的类，可以为元素添加以多种方式触发的多种动画效果，而组件只需要添加相应的页面结构就可以使用，不需要编写CSS和JavaScript代码，大大简化了前端开发。使用前端框架大大节约了时间，缩小了学习成本，方便了很多对前端开发不是很熟悉的设计师和后台开发人员来开发统一、美观的Web页面。

本课题以HTML5、CSS3、jQuery为主要技术开发跨终端、跨平台，支持多种现代浏览器，包含交互以及动画模块的，支持响应式布局的模块化、轻量级前端框架。

关键词：前端框架 网页设计 交互 动画

Front-end Interactive and Animated Framework Based on HTML5, CSS3 and jQuery

ABSTRUCT

With the rapid development of intelligent software and hardware and the fast popularization of Internet, computers and intelligent devices such as mobiles are becoming an indispensable part of people’s daily life. People demand the webs not only the completion of the functions, but also the sense of design and beautiful look. A well-designed and interactive web needs a great amount of work from the designers and front-end engineers. But if you use front-end framework, you can fast and easily build the uniform and standard styled webs.

This paper mainly introduce the background of the subject, includes the introduction of the web front-end, the development history, present situation and future development tendency. Next, the paper will introduce the main content of the research, the front-end framework, explaining the feature and advantage of front-end framework. Then, introducing the ideas of building of this front-end framework, the technologies will be used in the development and the reasons for those technologies, the realization of this framework, also will introduce how to use this front-end framework. At last, the paper will make a brief summary of the design and realization of this fronted-end framework.

This subject uses HTML5, CSS3 and jQuery as the main technologies to build a cross-device, cross-platform, support multiple modern browsers and including interaction and animation modules, support responsive layout modular and lightweight front-end framework.

Keywords: Front-end framework; Web Design; Interaction; Animation

目 录

摘 要 I

ABSTRUCT II

第一章 绪论 1

1.1课题研究背景 1

1.2网页前端发展的历史、现状及未来发展趋势 2

1.2.1 网页前端的发展历史 2

1.2.3 前端技术未来的发展趋势 4

1.3前端框架在前端开发中的优势 4

1.4 课题研究内容 5

第二章 网页前端开发概述 7

2.1 前端开发平台的搭建与技术简介 7

2.2 网页前端在浏览器中的显示原理 7

2.2.1 浏览器的主要功能 7

2.2.2 浏览器的组成部分 7

2.2.3 浏览器渲染引擎的工作原理 8

2.3 HTML的基本原理 9

2.3.1 HTML的组成与显示 9

2.3.2 HTML的解析原理 10

2.4 CSS的基本原理 11

2.4.1 CSS的工作原理 11

2.4.2 CSS的解析原理 11

2.5 本章小结 13

第三章 前端框架的总体设计 14

3.1 前端框架的工作原理 14

3.1.1 前端框架的基本原理 14

3.1.2 CSS Reset模块的目的与原理 14

3.1.3 动画模块的原理 15

3.2 前端框架的设计原理 15

3.3 前端框架的功能要求 16

3.4 前端框架模块划分 17

3.5 本章小结 18

第四章 前端框架的技术实现 19

4.1 CSS Reset 模块的实现 19

4.2 CSS Base模块的设计与实现 20

4.3 响应式栅格系统的实现 27

4.4 CSS3动画的实现 30

4.4.1 CSS3动画的整体实现思路 30

4.4.2 各动画效果的实现细节 31

4.4.3 浏览器前缀与兼容性 31

4.5 事件的监听与触发 32

第五章 前端框架的使用与效果展示 34

5.1 前端框架的使用 34

5.1.1 引入框架文件与准备工作 34

5.1.2 网页结构的搭建 34

5.1.3 页面元素的样式与动画效果 35

5.2 前端框架使用效果展示 37

第六章 总结与展望 39

参考文献 40

第一章 绪论

1.1课题研究背景

请支付后下载全文，论文总字数：34623字