基于HTML5和CSS3的响应式网页制作【毕业论文】.doc

图书分类号： 密 级： 毕业设计(论文) 题目：基于HTML5和CSS3的响应式网页制作 学生姓名 班 级 学院名称 计算机与信息科学学院 专业名称 计算机科学与技术 指导教师 学位论文原创性声明 本人郑重声明： 所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已经注明引用或参考的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品或成果。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标注。 本人完全意识到本声明的法律结果由本人承担。 论文作者签名： 　　 　　日期： 　 年 　月　 　日 学位论文版权协议书 本人完全了解关于收集、保存、使用学位论文的规定，即：本校学生在学习期间所完成的学位论文的知识产权归所拥有。有权保留并向国家有关部门或机构送交学位论文的纸本复印件和电子文档拷贝，允许论文被查阅和借阅。可以公布学位论文的全部或部分内容，可以将本学位论文的全部或部分内容提交至各类数据库进行发布和检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。 论文作者签名： 　　 导师签名： 　　 日期： 　　 年 　月　 　日 日期： 　 年 　月　 　日 基于HTML5和CSS3的响应式网页制作 重庆师范大学 计算机科学与技术 20**级 指导教师 摘 要：本网页主要采用HTML5和CSS3以及JavaScript等技术开发的旅游类响应式网页。开发目标和技术要点体现在网的响应式上，同时百度地图API丰富了网的内容JavaScript；响应式网页；HTML5；CSS3；百度地图API Abstract: The Webpage mainly uses HTML5 and CSS3 as well as JavaScript technology development of the tourism Webpage response type The development goal and key technical points in Webpage response type, but also cited Baidu map API, enrich the content of Webpage. Key words： JavaScript；Dom；HTML5+CSS；Map；API；Responsonsive 随着信息技术的飞速发展与互联网应用的日益普及，个性化网页的建立已经成为前端开发工程师思考的问题之一。而网页的布局结构，动态交互性，包括响应式等诸多元素都要遵循W3C规范，使用HTML5和CSS3技术实现网页结构和表现， JavaScript脚本语言实现了网页的交互性[1]。HTML5和CSS3的技术在现代网页技术中发展得非常迅猛，原因在于它提升了整个网页的渲染速度，加上网页切片技术的革命性突破，解决了美工设计和图片过多带来的响应慢的缺点[]。并且CSS3样式在标准浏览器中渲染丰富，效果绚丽。 2014年是响应式网站的元年，移动互联网用户数量已经超过了桌面用户。除了智能手机之外，使用平板电脑和电视机进行上网的用户也在持续增加。因此在互联网大规模普及下，让网页尽量兼容各类通讯设备，各种的屏幕，并确保优良的用户体验，这是前端工程师解决的问题。响应式网页可以根据接收设备的不同分辨率自动调整网页布局，将同一网页的内容以不同的布局式地在接收设备上显示。 从技术的角度来看，响应式网页主要考虑一下以下几个因素：根据手机屏幕小的特点要把台式机的版面裁切成手机版面px，而笔记本电脑的分辨率相对小一些，为了简化版面的布局，让大屏幕的台式机去兼容小屏幕的笔记本，所以台式机和笔记本电脑使用相同的布局。当屏幕宽度大于或等于1200px时与屏幕宽度为1366px下的网页布局一致。当屏幕宽度一般在640px到1200px之间时以屏幕宽度为14px为标准对网页进行布局。而当屏幕宽度低于860px时，网页布局以720px为准展示。具体分析-1所示。 3 网页设计 3.1 网页展示内容 本毕业设计项目主要为了研究和实施响应式网页的理论所以具体图-1所示。 3.2 制作线框原型不同设备屏幕尺寸，不同尺寸下弹性适应 图3-2设备样式图 下面是响应式网页原理图如图3-3所示。 图3-3 响应式原理图 3.3 视觉设计 移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证 图3-4 视觉设计图 3.4 前端构建 响应式）@media only screen and (max-wi