1.6 习题与项目实践

1．选择题

（1）代码“<link rel="stylesheet" epub:type="text/css" media="screen" href="xxx.css" />”中，media指定的属性就是设备，其中screen指的是（　）。

A. 显示器

B. 打印机

C. 电视

D. 投影仪

（2）overflow的默认选项是（　）。

A. auto

B. hidden

C. visible

D. scroll

（3）一个div元素设置宽度为400px，高度为100px，边框为红色。添加（　）代码能实现div元素居中对齐。

A. text-align:center;

B. margin:0 auto;

C. vertical-align:middle;

D. left:50%;right:50%;

（4）代码“<link rel="stylesheet"media="screen and (max-width:960px)"href="style1.css"/>”正确的含义是（　）。

A. 当屏幕宽度小于960px时，运行“style1.css”样式文件

B. 当屏幕宽度等于960px时，运行“style1.css”样式文件

C. 当屏幕宽度大于960px时，运行“style1.css”样式文件

D. 当屏幕宽度大于或等于960px时，运行“style1.css”样式文件

2．实践项目——使用媒体查询

一个页面布局为上下结构，顶部栏宽度为100%，高度为200px；下部分为左右结构，左侧栏宽度为100px，右侧栏宽度自适应响应，如图1-5所示，请写出具体的HTML和CSS代码。

当浏览器的宽度减少到768px以下时，顶部栏的高度变为50px，左侧栏消失，右侧栏宽度变为100%，如图1-6所示，请写出具体的CSS代码。