平板电脑效果图，如图5-5所示。
图5-5平板电脑效果图
手机端网页展示如图5-6所示。
图5-6 手机效果展示图
13
5.4 Header Footer
Header Footer在本次开发中都是公用的HTML片段。在搭建好首页Header和Footer结构以及样式后，其他的页面需要用到这两部分的时候都可以直接引用。Header分别有两部分构成，logo区和导航区。导航区应用了ul和li标签，在样式上使用float使得div浮动与文档流之上再加以展示。在这当中值得一提的是，我加入了CSS3特有的3D动画，给导航菜单追加了3D 翻转效果。如此炫酷的展示效果，可以给用户带来更好的视觉体验。首页的HTML5中放入了Audio标签，播放音频文件。使用HTML5之前版本来开发网页，如果想要播放音频需要要介入播放器，而现在只需要加上这个标签就可以播放音频文件，并且有按钮可以随时控制播放音乐的开始和暂停。
Footer部分则主要了运用了float属性。
5.5 HTML5的video标签
Video标签和Audio标签都是HTML5中新增加的标签。使用这两个标签进行渲染的页面区别于传统的文字图片展示方式，使得整个网页的表现形式更加丰富多彩，有了声音和视频的的网页使得用户的体验度更高，信息含量更大。
标签引用实例：
14
5.6 百度地图API的引用
在联系页面，我引用了百度地图API。百度地图API有丰富接口以供调用，我这次使用百度地图API主要是为了给用户提供定位服务。百度地图API提供了getLocation方法，调用此方法便可以对用户浏览器进行WGS定位，精确的显示用户的具体位置。下面是javascript代码的具体实施。
6 结束语
通过这次毕业设计的实践练习，我不仅学会了如何开发响应式网页，更学会了如何独立地解决开发中遇到问题。响应式网页的核心是媒体查询，针对不同通讯设备的宽度而渲染不同的样式布局，基于这个核心技术一步一步地实现网页的响应式布局。
16
在开发过程中，遇到样式布局混乱这类问题时，我学会了主动借助互联网查找问题的答案，例如百度问答。论坛里面通过提问等方式来帮助我解决问题。同时老师给予了很大的帮助，提供了我很多web开发相关方向的资料，使我在开发中有了更多的知识储备。HTML5和CSS3在这次开发中的核心技术，这也是未来互联网技术中web开发的主要方向，HTML5标签语法简洁，在PC端与移动端的兼容性比较好。CSS3相比之前的老版本已经增加了更多的动画效果，以及修饰图片样式和滤镜，例如图片圆角等的问题CSS3也都可以非常完美的解决。所以CSS3在本次的网页开发中，为网页良好的动画效果提供了的基础。
17