【案例 8-1 】 制作音频播放界面 一、案例描述 1、 考核知识点 在 HTML5 中插入音频 2、 练习目标 Ø 掌握插入音频的方法 Ø 复习浮动的设置方法 3、 案例分析 1) 效果如图 8-1 所示。 图8-1 音乐播放界面效果展示 2) 具体实现步骤如下: a) 定义一个大盒子,里面嵌套两个小盒子来搭建结构。 b) 两个小盒子分别左右浮动,左边的盒子用来添加背景图片,右边的盒子用来添加文字内容和歌曲内容。 二、案例实现 1 、制作页面结构 新建 HTML 页面,形式如下: 1 标题为:某某的音频播放页面( 注:以自己的名字命名,如的音频播放页面 ) 2 页面中,一个大盒子中,包含两个小盒子。其中,左边的盒子内容为空;右边的盒子为:超链接:红旗飘飘;段落:歌手:;插入:音频 hongqipiaopiao.mp3" 并加控制。 2 、定义 CSS 样式 使用内嵌式 CSS 样式表为页面添加样式,具体 CSS 要求如图:(注,左右盒子没有边框,图中为说明盒子位置,画出的边框 保存后,在各个浏览器中预览, 。 1、 controls 属性供添加播放、暂停和音量控件,但各浏览器提供的样式不同。 2、 autoplay 各浏览器的支持情况不同。(有的已经停用) 提交实验结果: 1 )将在一种浏览器中的运行截图,以图片形式上传到答案栏(图片要有第一行标题栏); 2 )将源代码复制到答案栏。