网页前端设计-作业六（CSS3）

参考教材：HTML5网页前端设计（第2版）作者：周文洁

1 . 普通（3分）CSS3的Transition动画中使用何种属性可以设置渐变的持续时间？

在CSS3中transition-duration属性用于指定渐变动画效果的持续时长，持续时间越长渐变效果越慢。

2 . 普通（3分）CSS3中哪个属性可以自定义背景图片的尺寸？

在CSS3中，background-size属性可用于定义元素背景图片的尺寸大小。

3 . 普通（3分）CSS3中哪个属性可以为元素设置圆角边框？

在CSS3中，border-radius属性可用于直接创建带有圆角的边框样式，该属性值表示圆角边框的圆角半径长度，数值越大则圆的弧度越明显。

4 . 容易（3分）在CSS3中,text-shadow的默认属性值是 ___，表示无阴影效果。（区分大小写）

none

5 . 容易（3分）在CSS3中，如果设置动画渐变的延迟时间为10秒，以下哪句代码写法是正确的？（）。

A. transition-delay: 10ms

B. transition-delay: 1000ms

C. transition-delay: 10m

D. transition-delay: 10s

10秒的单位是s，ms是毫秒，1000毫秒=1秒。

6 . 容易（3分）在CSS3技术的Transition动画属性中，以下哪个可以用于指定对何种CSS属性进行渐变处理？（）。

A. transition-delay

B. transition-duration

C. transition-timing-function

D. transition-property

transition-property可以用于设指定对何种CSS属性进行渐变处理。

7 . 容易（3分）在CSS3技术的Transition动画属性中，以下哪个可以用于设置动画的延迟时间？（）。

A. transition-delay

B. transition-duration

C. transition-timing-function

D. transition-property

transition-delay可以用于设置动画的延迟时间。

8 . 容易（3分）在CSS3技术的Transition动画属性中，以下哪个可以用于设置动画的持续时间？（）。

A. transition-delay

B. transition-duration

C. transition-timing-function

D. transition-property

transition-duration用于设置动画的持续时间。

9 . 容易（3分）在CSS3中关于字体的说法不正确的是？（）。

A. 浏览器只能显示设备上已经安装的字体。

B. 浏览器可以使用@font-face来规定显示特殊字体。

C. 浏览器可以使用font-family来定义自定义名称的字体。

D. 浏览器可以显示放在服务器端的特殊字体。

在CSS3之前，浏览器确实只能显示设备上已经安装的字体。但是在CSS3技术中已经可以通过@font-face的规则自定义字体，然后使用font-family声明自定义字体的名称来引用它。这样就可以将特殊字体放在服务器端，让网页显示任何指定的字体了。

10 . 容易（3分）在CSS3中，假设有背景图片原图尺寸为宽400px、高800px。样式background-size:200px;可以将其缩放成何种尺寸，以下哪种说法正确？（）。

A. 宽高均缩放为200px。

B. 宽度缩放为200px、高度缩放为400px。

C. 宽度缩放为200px、高度不变仍然是800px。

D. 宽度不变仍然是400px、高度缩放为200px。

如果background-size属性的取值是一个参数，则表示宽度，高度会随着宽度等比例缩放。因此本题是宽度缩放到200px、高度等比例缩放到400px。

11 . 容易（2分）在CSS3中,以下哪个不属于background-size属性允许的取值？（）。

A. 50%

B. cover

C. contain

D. 100s

允许的取值有百分比、长度、auto、cover或者contain。100s单位是毫秒，不可以作为合法取值。

12 . 容易（2分）在CSS3中，以下哪个属性可以单独设置边框右上角的弧度？（）。

A. border-top-left-radius

B. border-top-right-radius

C. border-bottom-left-radius

D. border-bottom -right-radius

右上角是top-right，因此选border-top-right-radius。

13 . 容易（2分）在CSS3中给元素设置一个宽15像素的银色矩形阴影，如果希望该阴影在元素右下角出现（水平方向和垂直方向都偏移10像素），以下哪个写法正确？（）。

A. box-shadow:10px 10px 15px silver;

B. box-shadow:-10px 10px 15px silver;

C. box-shadow:10px -10px 15px silver;

D. box-shadow:-10px -10px 15px silver;

关键在box-shadow的参数1表示水平方向，正数为右边偏移、负数为左边偏移；参数2表示垂直方向，正数为下边偏移、负数为上边偏移。因此2个数值都是正数时，投影会出现在元素的右下角。

14 . 容易（2分）在CSS3中，以下哪个属性可以用于设置元素4个角的圆角边框？（）。

A. border-radius

B. box-shadow

C. border-image

D. border-bottom

border-radius用于为元素设置圆角边框。

15 . 普通（2分）如果浏览器不支持<audio>或<video>标签，有什么备选方案可以让浏览器正常播放媒体文件？

由于不支持<audio>或<video>标签的浏览器会执行该标签首尾标记内部的内容，可以利用该原理为此类浏览器增加一个Flash播放器的备选项，以保证浏览器可以正常播放媒体文件。

16 . 容易（2分）假设media是已经声明过的视频对象，media. ___可以开始播放视频内容。（区分大小写）

play()

17 . 普通（2分）HTML5音频使用了何种标签作为统一标准？有哪些音频格式可以被支持？

HTML5提供了一种使用<audio>标签来显示音频的标准方法。目前HTML5支持的常用音频格式有三种：MP3格式、Ogg格式、Wav格式。

18 . 普通（2分）HTML5视频使用了何种标签作为统一标准？有哪些视频格式可以被支持？

HTML5提供了一种使用<video>标签来包含视频的标准方法。目前HTML5支持的常用视频格式有三种：MPEG4格式、Ogg格式、WebM格式。

19 . 普通（2分）如何跳转媒体文件的当前播放时间？

可以通过设置<audio>或<video>标签的currentTime属性值（单位：秒）来完成。例如： var mediaFile = document.getElementById("media"); mediaFile.currentTime=200;

20 . 容易（2分）在<audio>元素中可以使用 <___>标签来声明多个音频来源。（区分大小写）

source

21 . 容易（2分）<audio>和<___>都属于HTML5媒体元素。（区分大小写）

video

22 . 容易（2分）___属性可以使嵌入到<audio>元素中的音频处于静音状态。（区分大小写）

muted

23 . 容易（2分）假设media是已经声明过的视频对象，media. ___可以暂停播放。（区分大小写）

pause()

24 . 容易（2分）通过设置媒体元素的___属性可以让音频或视频跳转到指定的时间点继续播放。（区分大小写）

currentTime

25 . 容易（2分）___属性可以使嵌入到<audio>元素中的音频循环播放。（区分大小写）

loop

26 . 容易（2分）___属性可以使嵌入到<audio>元素中的音频自动播放。（区分大小写）

autoplay

27 . 普通（2分）当前HTML5的音频支持常用格式是：SWF、Wav和Ogg。

错误

SWF是Flash文件格式，当前HTML5的音频支持常用格式是：MP3、Wav和Ogg。

28 . 普通（2分）音频处于暂停状态时，执行play()方法，音频会从0分0秒初始时间重新播放。

错误

暂停状态重新恢复后，可以继续从暂停的时间节点继续播放。

29 . 容易（2分）已知有： <video controls> <source src="song.ogg"> <source src="song.mp4"> </video> 假设当前浏览器支持.ogg和.mp4格式文件，但song.ogg文件不存在，下列说法正确的是？（）。

A. 报错无法继续播放视频。

B. 随机播放song.ogg或song.mp4，所以有时候可以成功、有时候失败。

C. 先尝试播放song.ogg发现没有，则继续播放song.mp4视频。

D. 先播放了song.mp4视频，因为成功了所以没有检测song.ogg文件。

会按照先后顺序依次尝试播放.ogg和.mp4文件的，如果.ogg文件不存在，则继续播放.mp4文件。

30 . 普通（2分）在HTML5音频的应用中，autoplay属性可以为<audio>提供音乐播放器的进度条和播放按钮控件效果。

错误

autoplay属性是提供自动播放的功能，这里应该是controls属性为<audio>提供音乐播放器的进度条和播放按钮控件效果。

31 . 普通（2分）当前HTML5的视频支持的常用格式是：MPEG4、Ogg和SWF。

错误

SWF是Flash的文件格式，当前HTML5视频支持的常用格式是MPEG4、Ogg和WebM。

32 . 容易（2分）假设有<audio src="test.mp3" controls>你好</audio>，如果浏览器不支持HTML5的<audio>标签，以下哪句说法是正确的？（）。

A. 页面上只会显示音频控件，不会显示<audio>首尾标签之间的文字内容。

B. 页面上会显示音频控件，但是报错无法播放。

C. 页面上会显示音频控件，并且在控件的下方显示<audio>首尾标签之间的文字内容。

D. 页面上只会显示<audio>首尾标签之间的文字内容。

如果浏览器不支持<audio>标签则不会显示音频控件，只会显示其首尾标签内部的文字。

33 . 容易（2分）假设有一个视频元素id="test"，相关JavaScript代码如下： var m = document.getElementById("test");那么以下哪句代码可以让视频的宽度更新为800像素？（）。

A. m.height("800");

B. m.height = "800";

C. m.width("800");

D. m.width = "800";

m.width = "800";用于更改width属性值的，也可以不加引号直接写成m.width = 800;同样可以生效。

34 . 容易（2分）在HTML5中视频或音频的哪个属性可以用于显示播放、暂停按钮和声音调节控件？（）。

A. src

B. loop

C. autoplay

D. controls

controls属性是用于显示播放、暂停按钮和声音调节控件的，如果不写则不会在网页上显示出来。

35 . 容易（2分）在HTML5中视频或音频的哪个属性可以用于指定播放媒体文件的url地址？（）。

A. url

B. source

C. src

D. href

src属性可以用于指定播放媒体文件的url地址。

36 . 容易（2分）在HTML5中假设已有m表示视频对象，以下哪句代码可以将视频播放时间跳转到第7分钟？（）。

A. m.currentTime = 7

B. m.currentTime = 420

C. m.time = 7

D. m.time = 420

currentTime属性可以制造时间节点，并且进行视频播放时间的跳转。该属性值的单位是秒，因此需要将7分钟换算为420秒。

37 . 容易（2分）已知某视频文件的画面大小为宽800px，高600px。有代码<video src="视频文件的URL地址" width="400"></video>？（）。

A. 视频会变形成宽400px，高600px，画面内容完整。

B. 视频会被从左上角开始切割，只保留宽400px，画面内容只有原画面的一半。

C. 视频仍然是显示为宽800px，高600px不变。

D. 视频会被缩放到宽400px，高300px，画面内容完整。

1.当使用属性width和height可以改变原视频大小，保持内容完整，不是切割。2.如果单独使用其中一个属性，表示该属性值固定，另外一个属性值等比例放大或缩小。3.因此本题宽度会变为400px，而高度也要等比例缩一半，是300px。

38 . 容易（2分）假设有一个视频元素id="test"，相关JavaScript代码如下： var m = document.getElementById("test");那么以下哪句代码可以让视频播放？（）。

A. m.pause();

B. m.currentTime = 120;

C. m.src="";

D. m.play();

m.pause();是让视频暂停。m.play();是让视频播放。m.currentTime = 120;是将当前视频跳转到120秒。m.src="";是清空媒体文件来源。

39 . 容易（2分）HTML5提供了以下哪种元素标签用于显示视频？（）。

A. <audio></audio>

B. <canvas></canvas>

C. <video></video>

D. <vedio></vedio>

<video></video>正确。<canvas></canvas>是画布元素，<audio></audio>是音频元素。<vedio></vedio>是拼写错误。

40 . 容易（2分）HTML5提供了以下哪种元素标签用于显示音频？（）。

A. <canvas></canvas>

B. <audio></audio>

C. <video></video>

D. <vedio></vedio>

<audio></audio>正确。<canvas></canvas>是画布元素，<video></video>是视频元素。<vedio></vedio>是拼写错误。

41 . 容易（2分）以下哪种不属于HTML5视频所支持的文件格式？（）。

A. .mp4

B. .flv

C. .ogg

D. .webm

HTML5视频支持的是mp4、ogg和webm格式。

42 . 容易（2分）以下哪个属性可以使媒体文件循环播放？（）。

A. muted

B. controls

C. preload

D. loop

loop是循环的意思，这里用于循环播放。

43 . 容易（2分）以下哪个属性可以使媒体文件自动播放？（）。

A. autoplay

B. preload

C. muted

D. loop

autoplay属性用于自动播放。

44 . 容易（2分）已知有： <audio controls> <source src="music/song.ogg" > <source src="music/song.mp3"> </audio> 下列说法正确的是？（）。

A. song.ogg和song.mp3会被同时播放。

B. song.ogg和song.mp3会先后播放。

C. 如果浏览器支持ogg格式，就会只播放song.ogg，不会播放mp3格式。

D. 如果浏览器2个格式都支持，会随机播放任意一个。

1.绝对不会被同时播放或先后播放 2.浏览器会按照从上往下的顺序查看，如果ogg可以播放，就不看mp3是否支持了，也不播放mp3格式。如果ogg不能播放，才会去看mp3文件。

45 . 容易（2分）以下哪种不属于HTML5音频所支持的文件格式？（）。

A. .ogg

B. .wav

C. .mp3

D. .mkv

HTML5音频支持的是ogg,mp3和wav格式。

网页前端设计-作业六（CSS3）相关推荐

网页前端设计-作业三(JavaScript)
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值? 使用Math.round()方法. 2 . 普 ...
网页前端设计-作业二（CSS）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (4分)元素可以向哪些方向进行浮动?如何清除浮动效果? 在CSS中float属性可以用于令元素向左或向右浮动.常用clear ...
网页前端设计-作业四（HTML5）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1. 普通 (2分)如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字? 关于正则表达式有多种用法,这里选择其中 ...
网页前端设计-作业一（HTML5）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)HTML5新增的格式标签有哪些? HTML5新增的格式标签如下: </p> <p> < ...
web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
html and css3 实现分屏设计-网页前端设计 id1086
html and css3 实现分屏设计-网页前端设计 id1086 源码下载地址在新演示地址 <!DOCTYPE html> <html lang="en"& ...
web前端网页设计作业_如何学习网页前端设计培训？
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
HTML5前端页面设计,HTML5网页前端设计
HTML5网页前端设计编辑锁定讨论上传视频 <HTML5网页前端设计>是2017年6月清华大学出版社出版的图书,作者是周文洁. 书名 HTML5网页前端设计作者 ...
html5网页前端设计当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...

网页前端设计-作业六（CSS3）

网页前端设计-作业六（CSS3）相关推荐

最新文章

热门文章