摘要：随着社会的发展，基于Web的应用系统正在成为信息系统的主流。前端技术是IT领域中的一项关键技术同时也是网页技术的基础技术[10]。在网络技术高速发展的时代，网络作为如今最方便快捷的传递方式也越来越使人接受。伴随着HTML5在国内的兴起，不断的推进着信息时代的发展，网站也不再局限在PC端了，也可以运行在移动端上了。网站不再像以前那样简单枯燥了，如今的HTML+CSS3比起以前的HTML来说更容易维护和管理，而且实现跨平台开发更加的方便和快捷，还能减少成本。

本文主要描述的是如何快速布局和开发一个移动端新闻网站，采用的是HTML、CSS、JavaScript、JQuery和AngularJs。在布局页面时，先用AngularJs进行模块化布局，再用HTML标签进行编写。使用CSS对展示的HTML元素进行样式部署。然后使用底层JavaScript和JQuery，实现网页的动态效果，页面与后台的交互。表面看起来很简单，但是需要我们了解的东西很多，在开发之前需要了解一些新的框架如Angular.Js，Vue.js等框架，还要解决兼容性的问题。

本文是主要写的是整个新闻移动端网站的页面和背景及HTML响应式布局的作用原理，分析整个新闻移动端的结构和工作原理，分析实现中的重点和难点。

关键词：HTML；HTML5；CSS3；响应式布局；页面交互

目录

摘要

Abstract

1 意义-1

1.1 移动端新闻网站的背景和目的-1

1.2 Web技术-1

1.3 node.js响应式开发的好处-1

1.4 国内外HTML5网站构建的情况-2

1.5 移动端开发与PC前端开发的区别-2

1.6本章结论-3

2 开发所用的资源-4

2.1移动端开发环境-4

2.1.1操作平台-4

2.1.2 开发工具-4

2.2 移动端开发技术-5

2.2.1 JavaScript介绍-5

2.3.2 JavaScript基本特点-5

2.3.3 AngularJs介绍-6

2.3.4 JQuery WeUI界面-7

2.4 本章小结-8

3 网站布局分析与设计-9

3.1网站整体开发流程与设计-9

3.2网站主要功能-9

3.2.1新闻主页-9

3.2.2新闻搜索-9

3.2.3新闻重新排序-10

3.2.4新闻详情页-10

3.2.5登录注册功能-10

3.3组件化开发-10

3.4编写代码-11

3.4代码的测试和优化-12

4主要功能详细设计-13

4.1 UI界面设计-13

4.2新闻页面设计-14

4.3新闻详情页设计-17

4.3.2 新闻图片放大设计-19

4.3.3新闻搜索功能-19

4.3.3查看更多功能-20

4.3.3新闻重新排序功能-20

4.4 登录注册页面的设计-21

5 问题-23

5.1关于手机端自适应调整-23

5.2.布局问题-23

5.3后退并刷新问题-23

结    论-25

参 考 文 献-26

致    谢-27