基于html5和css3的响应式网页制作毕业论文

《基于html5和css3的响应式网页制作毕业论文》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、图书分类号:密级:题目：基于HTML5和CSS3的响应式网页制作学生姓名班级学院名称计算机与信息科学学院专业名称VI：算机科

2、^技7^指导教师学位论文原创性声明本人郑重声明：所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已经注明引用或参考的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品或成果。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标注。本人完全意识到本声明的法律结果由本人承担。论文作者签名，日期，年_月日学位论文版权协议书本人完全了解关于收集、保存、使用学位论文的规定，即：本校学生在学习期间所完成的学位

3、论文的知识产权归所拥有。有权保留并向国家有关部门或机构送交学位论文的纸本复印件和电子文档拷贝，允许论文被查阅和借阅。可以公布学位论文的全部或部分内容，可以将本学位论文的全部或部分内容提交至各类数据库进行发布和检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。论文作者签名：导师签名：日期：年月日日期：年月曰基于HTML5和CSS3的响应式网页制作重庆师范大学计算机科学与技术20**级指导教师摘要：本网页主要采用HTML5和CSS3以及JavaScript等技术开发的旅游类响应式网页。开发FI标和技术要点体现在网页的响应式上，同时引用了百度地图API,丰富

4、了网页的内容。关键词：JavaScript；响应式网页；HTML5；CSS3；百度地图APIAbstract:TheWebpagemainlyusesHTML5andCSS3aswellasJavaScripttechnologydevelopmentofthetourismWebpageresponsetypeThedevelopmentgoalandkeytechnicalpointsinWebpageresponsetype，butalsocitedBaidumapAPI，enrichthecontentofWebpage.Keywords：JavaScri

5、pt；Dom；HTML5+CSS；Map；API；Responsonsive1引言随着信息技术的飞速发展与互联网应用的日益晋及，个性化网页的建立已经成为前端开发工程师思考的问题之一。而网页的布局结构，动态交互性，包括响应式等诸多元素都要遵循W3C规范，使用HTML5和CSS3技术实现网页结构和表现，JavaScript脚本语言实现了网页的交互性⑴。HTML5和CSS3的技术在现代网页技术中发展得非常迅猛，原因在于它提升了整个网页的渲染速度，加上网页切片技术的革命性突破，解决了美工设计和图片过多带来的响应慢的缺点

6、21。并且CSS3样式在标准浏览器中渲染丰富，效果绚

7、丽2014年是响应式网站的元年，移动互联网用户数量己经超过了桌面用户。除了智能手机之外，使用平板电脑和电视机进行上网的用户也在持续增加。因此在互联网大规模的普及下，让网页尽量兼容各类通讯设备，适应各种分辨率的屏幕,并确保优良的用户体验，这是前端工程师必须要解决的问题。响应式网页可以根据接收设备的不同分辨率自动调整网页布局，将同一网页的内容以不同的布局方式正常地在各种接收设备上显示l4j。2需求分析从技术的角度来看，响应式网页主要考虑一下以下儿个因素：根据手机屏幕小的特点要把台式机的版面裁切成手机版面，只显示最核心的内容。台式机屏幕分辨率大多数都是1920*1080

8、px,而笔记本电脑的分辨率相对小一些，为了简化版面的布局，让大屏幕的台式机去兼容小屏幕的笔记本，所以台式机和笔记本电脑使用和同的布局。当屏幕宽度大于或等于1200px时与屏幕宽度为1366px下的网页布局一致。当屏幕宽度一般在640px到1200px之间时以屏幕宽度为1024px为标准对网页进行布局。而当屏幕宽度低于860px时，网页布局以720px为准展示。具体分析如图2-1所示。屏幕宽度图2-1逻辑流程图3网页设计3.1网页展示内容本毕业设计项目主要为了研究和实施响应式网页的理论和积累开发经验，所以本论文以响应式网页为核心，以展示旅游网页的内容为载体来检验响应

9、式网页的功能。具体的网页结构图如图3-1所示。完美旅行图3-1网页结构图3.2制作线框原型根据不同的设备屏幕尺寸，不同尺寸下弹性适应。设备样式如图3-2所示。图3-2设备样式图下面是响应式网页设计原理图如图3-3所示。If(width〉=l200px>1366px布局移动设备的屏幕像素密度与传统电脑屏幕是不一样的，因此在设计的时候需要保证视觉效果统一，视觉设计如图3-4所示。图3-4视觉设计图3.4前端构建前端媒体查询(即响应式)核心代码如下所示。@mediaonlyscreenand(max-width:1366px)and(min-width:1200px){

10、.wrap