PDF《【项目 1-1】使用 HTML5+CSS3 绘制 HTML5 的》

13 所示. 图13 用户注册页面 将某个输入框获得焦点后会变宽,未填写正确信息时为红色且有警示图标,如图

14 所示. 图14 输入框获得焦点 填写正确信息和错误提示信息的页面效果如图

15 所示. 图15 输入正确和错误提示 【项目 5-1】 网页涂鸦板 大家对电脑中的画图软件应该都很熟悉了, 如果没有使用过可以打开体验一下, 其中最 常用的画笔功能就像现实生活中的画笔, 可以在画板上画出任意图形, 本项目将使用 canvas 完成一个网页涂鸦板,如图

16 所示. 图16 网页涂鸦版 在图

16 中可以使用鼠标作为画笔,发挥自己的想象力画出任意图形,如图

17 所示. 图17 绘制效果 【项目 5-2】发红包才能看的照片 如今用手机发红包已经不在是一种时尚了,交友软件中经常出现好友之间的"要红包" 情况,于是乎出现了"发红包才能看的照片" ,一些好奇心强的小伙伴为了看照片就只能发 红包了,本项目将带领读者揭开它的真面目.红包照片的初始状态如图

18 所示. 图18 发红包才能看的照片 单击"想看我么"按钮后,图中的圆形区域会移动到其他位置,如图

19 所示. 图19 移动的圆形区域 圆圈的移动可以勾起用户的好奇心,单击"收到红包"按钮,就可以看得照片了,如图

20 所示. 图20 收到红包 【项目 6-1】视频播放器 视频播放器是一种用于播放各种视频文件的多媒体播放软件, 本项目将完成一个自定义 控制栏的 HTML5 网页视频播放器,如图

21 所示. 图21 视频播放器 【项目 6-2】HTML5 Web 钢琴 目前网络上有许多支持在线弹奏的钢琴小游戏,可以直接在手机或 PC 端进行弹奏,效 果像极了电子琴,本项目将带领读者完成一个 HTML5 的Web 钢琴,如图

22 所示. 图22 HTML5 Web 钢琴 当鼠标移动到某个琴键上时,鼠标变为小手状,琴键颜色发生变化,如图

23 所示. 图23 鼠标移动的琴键效果 单击钢琴琴键,可以进行弹奏,琴键上的字符 c

4、c4m 等为当前琴键的音调标识. 【项目 6-3】音乐播放器 音乐播放器是一种用于播放各种音频文件的多媒体播放软件,本项目要完成一款网页 版的音乐播放器页面,如图

24 所示. 图24 音乐播放器 单击图

24 中的播放按钮" " ,音乐开始播放,并显示暂停按钮,当鼠标悬停到某 个按钮上时,按钮颜色将发生变化.如图

25 所示. 图25 音乐播放状态 图25 的播放按钮下方,可以调节音量, 单击" "按钮,可以显示该歌曲的歌词, 如图

26 所示. 图26 显示歌词 单击图

26 中的" "按钮,收起歌词. 【项目 7-1】第一个响应式网站 第一个响应式设计网站对于读者意义非凡,所以本项目也选择了一个非常有意义的主 题――环保网站.网页效果如图

27 所示. 图27 环保网站 PC 版 将浏览器窗口缩小到移动设备大小后,页面效果如图

28 所示. 图28 环保网站移动版 该项目适用于多种屏幕大小,页面效果会随屏幕大小的改变实时调整. 【项目 7-2】社交网站个人信息页面 由于生活节奏越来越快,通过社交网站结交朋友、组织聚会等已经是一种时尚,本项 目将带领读者实现一个社交网站的个人信息页面,如图

29 所示. 图29 个人信息页面-PC 版 将浏览器窗口缩小到移动设备大小,页面效果如图

30 所示. 图30 个人信息页面-移动版 该项目适用于多种屏幕大小,页面效果会随屏幕大小的改变实时调整. 【项目 8-1】Bootstrap 餐饮类网站首页 目前电商网站层出不穷,由于移动设备方便携带,移动端用户人数倍增,逐渐超过 PC 端,所以众电商们十分注重网站的响应式设计,特别是在移动端也能提供良好的用户体验. 本单元将带领读者实现一个响应式的餐饮类电商网站, 相信这些美食可以吸引你的眼球! 该 网页效果如图