一、选择题
1.主流网站实现精灵图技术主要依靠CSS的()属性
选项 A.background-position;B.background-color ;C.color; D.font;
答案 A
答案说明 实现精灵图技术主要是靠background-position控制背景图像的显示位置实现的
2.使用精灵图技术可以()
选项 A. 提高网站效率,减少用户请求图片的数量;
B. 提升网站的SEO排名;
C. 提升网站的访问人数;
D.不确定;
答案 A
答案说明 使用精灵图技术可以有效减少用户请求图片的数量,减少请求图片上的资源消耗
3.通过CSS中的()属性可以控制精灵图在元素中的显示位置
选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;
答案 C
答案说明 通过background-position属性可以设置背景图片在元素中的显示位置
4.CSS中()属性主要用于控制精灵图在页面元素中的显示位置
选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;
答案 C
答案说明 通过background-position属性可以设置背景图片在元素中的显示位置
5.精灵图技术主要是通过CSS中的()属性对精灵图背景图片进行操作
选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;
答案 C
答案说明 通过background-position属性可以设置背景图片在元素中的显示位置
6.CSS中的()属性可以用来操作精灵图在元素中的显示位置
选项 A. background-attachment ;B. background-color;C.background-position; D.不确定;
答案 C
答案说明 通过background-position属性可以设置背景图片在元素中的显示位置
7.通过设置CSS中的()属性,可以设置元素在页面中水平居中对齐。
选项 A.text-align:center ;B.margin:0 auto;C.background-position:center; D.不确定;
答案 B
答案说明 设置一个元素在页面中水平居中对齐的CSS是:margin:0 auto
8.通过设置CSS中的()属性,可以设置页面中的图片垂直居中
选项 A.vertical-align:middle;B.margin:0 auto;C.background-position:center; D.不确定;
答案 A
答案说明 CSS设置图片在页面中垂直居中的CSS属性是:vertical-align:middle
9.页面中版心元素一般要水平居中对齐,需要对版心元素设置CSS()
选项 A.vertical-align:middle;B.margin:0 auto;C.background-position:center; D.不确定;
答案 B
答案说明 设置一个元素在页面中水平居中对齐的CSS是:margin:0 auto
10.如果需要设置某个元素透明,应该使用CSS的()属性
选项 A.opacity ;B.color ;C.background-position; D.不确定;
答案 A
答案说明 CSS设置透明度的属性是:opacity
11.下列选项中哪个CSS属性隐藏元素后不会占页面空间()
选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;
答案 C
答案说明 Display:none隐藏的元素由于被释放了空间,所以隐藏后不会占据页面位置
12.以下哪种隐藏元素方式,元素隐藏后会占用页面位置()
选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;
答案 D
答案说明 Visibility:hidden设置元素隐藏后会在页面中保留该元素的位置
13.下列哪个CSS属性设置后会在页面上完全隐藏元素()
选项 A. hidden;B.overflow:hidden;C.display:none; D.visibility:hidden;
答案 C
答案说明 Display:none隐藏的元素由于被释放了空间,所以隐藏后不会占据页面位置,达到完全隐藏元素的目的
14.对页面上一个元素设置CSS样式display:none以后,该元素将()
选项 A.从页面上彻底隐藏;
B.从页面上隐藏但会保留位置;
C.该元素不会完全隐藏;
D.不确定;
答案 A
15.CSS属性Overflow:hidden主要用于()
选项 A.设置元素内容超出部分显示滚动条;
B.设置元素内容超出部分自动显示滚动条;
C.设置元素内容超出部分隐藏;
D.不确定;
答案 C
答案说明 设置元素内容超出部分隐藏的CSS属性是overflow:hidden
二、填空题
1.网页中的”精灵图”技术(CSS”雪碧技术”)主要是通过CSS的___________属性实现的。
答案background-position
答案说明雪碧技术主要是通过background-position控制背景图片在元素中显示位置实现的
2. CSS中的_____________属性可以用来控制背景图片在元素中的显示位置
答案background-position
答案说明background-position属性是CSS中专门用来控制背景图像在元素中的显示位置的
3.使用CSS雪碧/精灵图技术可以有效降低页面_____________数量
答案请求
答案说明由于精灵图中集合了页面很多的小图像,有效减少了页面图片的数量,从而降低用户请求页面时候发出的请求数量
4.页面中使用的“精灵图”技术主要是通过CSS__________属性对元素中的背景图像显示进行控制。
答案background-position
答案说明雪碧技术主要是通过background-position控制背景图片在元素中显示位置实现的
5.现在主流网站中使用的”精灵图”技术,主要是依靠CSS中__________属性实现的。
答案background-position
答案说明精灵图主要依赖CSS中的background-position属性实现的
6. CSS中可以通过设置_________属性使元素透明
答案opacity
答案说明CSS3中设置元素透明属性为opacity
7.如果需要设置一个元素的不透明度为50%,CSS属性应该设置为__________
答案Opacity:0.5
答案说明设置透明度属性为Opacity:0.5
8.如果希望设置元素溢出内容隐藏需要设置CSS的__________属性为__________
答案(1)overflow
(2)hidden
答案说明设置页面中超出元素内容的隐藏需要设置该元素的overflow属性为hidden
9.如果要隐藏页面上的某个元素,可以通过设置CSS中的________或________属性实现
答案(1)display
(2)visiblity
答案说明通过对页面上某个元素设置display属性或设置visiblity属性都可以实现隐藏该元素的效果
10.如果要隐藏页面上的某个元素,并且该元素隐藏后不能占据页面位置,要设置CSS的属性为_________
答案display:none
答案说明在页面中设置了display:none的元素会被隐藏且不占据页面位置
11.如果需要隐藏页面上的某个元素,但需要保留该元素在页面上占据的位置,需要设置的CSS属性为__________
答案visibility:hidden;
答案说明如果使用visibility:hidden;隐藏页面中的某个元素,那么该元素在隐藏后会依旧占据页面位置
12.在对页面中某一个元素设置了visibility:hidden;后,那么该元素在页面中不可见但_____________
答案占据空间
答案说明如果使用visibility:hidden;隐藏页面中的某个元素,那么该元素在隐藏后会依旧占据页面位置
13.如果需要使用滚动条来显示元素溢出的内容需要设置overflow属性值为__________
答案scroll
答案说明当overflow属性设置为scroll时,元素溢出内容会以滚动条方式显示在元素内部
三、简答题
1.请简述display:none和visibility:hidden的用途及区别
答案两者都用于隐藏页面元素
visiblity:hidden :隐藏的元素在页面保留位置;
display:none :元素隐藏后不再占据页面位置;
答案说明两者都是用于隐藏元素,但区别在于一个是完全隐藏,另一个会保留元素在页面的位置
2.如果要将一个div的不透明度设置为50%,请写出对应的CSS代码
答案div{
opacity:0.5;
}
答案说明可以通过设置opacity属性设置元素的不透明度
3.请简述精灵图技术的好处及主要使用的CSS属性
答案使用精灵图可以有效减少页面的请求数量,主要是通过减少对小图片的请求次数。通过background-position完成对背景图像显示位置的控制达到页面需要的显示效果。
答案说明精灵图技术是目前应用比较广泛的一种技术,对网站性能优化提升比较明显。
4.精灵图技术主要是依靠CSS的什么属性实现的?
答案主要是通过background-position属性实现的
答案说明通过background-position完成对背景图像显示位置的控制达到页面需要的显示效果。
领取专属 10元无门槛券
私享最新 技术干货