Bootstrap响应式网站开发任务式教程习题答案 (1).docxVIP

PAGE15

拓展训练-答案

1.选择题

（1）代码linkrel=”stylesheet”type=”text/css”media=”screen”href=”xxx.css”/中media指定的属性就是设备，其中screen指的是（A）。

A.显示器B.打印机C.电视D.投影仪

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

A.autoB.hiddenC.visibleD.scroll

（3）一个div元素设置宽度为30rem，高度为6rem，边框为红色。添加(B)代码能实现div元素居中对齐。

A.text-align:center; B.margin:0auto;

C.vertical-align:middle; D.left:50%;right:50%;

（4）代码linkrel=stylesheetmedia=(min-width:960px)href=styl1.css/正确的含义是（D）。

A.当浏览器窗口小于960px时，运行“style.css”样式文件。

B.当浏览器窗口等于960px时，运行“style.css”样式文件。

C.当浏览器窗口大于960px时，运行“style.css”样式文件。

D.当浏览器窗口大于等于960px时，运行“style.css”样式文件。

2.实践项目：使用媒体查询。

一个页面布局为分布为上中下结构，顶部栏与底部栏宽度为100%，高度为4rem，中部部栏内部又分为4部分，宽度在小于48rem时，页面呈现上下流式布局，页面效果如图的a图所示；宽度在大于等于48rem而小于75rem时，中部4个子元素各占50%，分2行布局，页面效果如图1-10的b图所示；当宽度大于等于75rem时，中部4个子元素各占25%，页面效果如图1-10的c图所示，请写出具体的HTML和CSS代码。

（a）分辨率小于48rem时的页面效果（b）分辨率大于等于48rem而小于75rem的页面效果

（c）分辨率大于等于75rem时的页面效果