《网页设计与制作》模块05挑战

Q1:姓名

Q2:班级（4位数字）

Q3:在CSS3中， ( ) 属性值不能建立定位上下文。

Q4:当使用Flexbox布局时， ( ) 属性用于控制子元素在交叉轴上的对齐方式。

Q5:下列哪种情况会导致z-index失效？ ( )

Q6:在Grid布局中， ( ) 属性用于定义网格列的宽度。

Q7:下列哪种清除浮动的方法不会增加额外的HTML元素？ ( )

Q8:下列关于position:sticky;的说法，正确的是 ( )。

Q9:在响应式布局中， ( ) 媒体查询表示屏幕宽度小于768px。

Q10:在下列选项中， ( ) 属性值可以创建一个BFC。

Q11:使用Grid布局实现一个三列等宽布局，正确的代码是 ( )。

Q12:关于Flexbox布局和Grid布局的区别，下列说法错误的是 ( )。

Q13:在Grid布局中，____属性用于设置网格项占据的列数。

Q14:BFC的中文全称是____，它可以解决浮动元素导致的父容器高度塌陷问题。

Q15:在响应式设计中，____单位可以根据视口宽度自动调整元素大小。

Q16:使用____属性可以让flex容器的子元素自动填充剩余空间。

Q17:在CSS3中，____函数可以根据不同的屏幕尺寸返回不同的值，实现响应式布局。

Q18:Grid布局可以实现Flexbox布局的全部效果。

Q19:设置float属性的元素会自动转换为block元素。

Q20:position:sticky;的元素在达到滚动阈值后会变为position:fixed;。

Q21:flex容器的子元素默认沿主轴方向排列。

Q22:使用CSS3变量可以实现主题颜色的全局统一修改。

Q23:说明BFC的概念、创建条件及其主要作用。

Q24:比较Flexbox布局和Grid布局的适用场景，并举例说明何时选择Grid布局而非Flexbox布局。

Q25:综合布局实现。现有一个容器（.container)，其内部需包含：（1）一个标题（h1）和一段引言文本（p），它们应处于正常文档流；（2）三张产品图片（img），要求它们向左浮动，并在容器内横向等间距排列；（3）一个“固定”在页面顶部的导航栏（.fixed-nav)，其宽度为100%，高度为60px；（4）一个“关于我们”的弹窗（.popup)，要求其在浏览器视口中水平、垂直均居中显示。任务要求：编写HTML结构；编写CSS3实现三张图片的浮动排列；为浮动图片的父元素添加清除浮动（推荐伪元素法）；实现固定导航栏并为body设置合适的上边距；使用position:absolute;配合transform:translate(-50%,-50%);实现弹窗的居中。

Q26:模拟顶部导航栏“吸顶”效果。实现一个导航栏（.sticky-nav)，其默认状态为position:relative;。当页面滚动、导航栏的上边缘距浏览器视口顶部为0时，导航栏变为position:fixed;，形成“吸顶”效果。任务要求：（1）编写一个高度足够长的HTML页面，以确保可以发生滚动；（2）编写CSS3代码，为.sticky-nav设置position:sticky;和top:0;；（3）观察并描述在滚动过程中导航栏行为的变化（何时开始固定，固定后对后续文档流内容的影响）。

Q27:实现“返回顶部”按钮。创建一个“返回顶部”按钮（#backToTop)，要求其始终固定在浏览器视口的右下角。当滚动条向下滚动超过200px时，按钮淡入显示；单击该按钮时，页面平滑滚动至顶部。任务要求：（1）使用CSS3将#backToTop按钮设置为position:fixed;并放置于右下角（如bottom:20px;right:20px;）；（2）初始时设置按钮为隐藏（如opacity:0;display:none;）；（3）使用JavaScript监听页面滚动事件，当滚动距离（scrollTop）大于200px时显示按钮（淡入效果），小于200px时隐藏按钮；（4）为按钮绑定点击事件，单击后使用window.scrollTo({top:0,behavior:smooth})实现平滑滚动至顶部。