蓝桥杯前端Web赛道-电影院排座位
题目链接:1.电影院排座位 - 蓝桥云课 (lanqiao.cn)
首先看题目要求:
座位区域和荧幕间隔 50px。座位区域每一行包含 8 个座位。第 2 列和第 6 列旁边都是走廊,需要和下一列间隔 30px,其他列都只需要间隔 10px。
并且要求不修改dom结构。
题目如下:
效果如下:
首先我们观察dom结构可以发现,我们只需要更改seat-area和seat的样式即可。
在css文件中,添加seat-area样式
.seat-area {
display: flex;
}
逐步解析,拿到题我们首先考虑使用flex布局,椅子数量太多,并且有规律的拜访,所以挨个移动不现实。
使用后变成这样
变成这样的原因是因为,包裹的宽度有限,由于使用了flex布局所以椅子会自动的缩小自己的宽度
所以我们需要在seat的样式上再加入这行代码
flex:0 0 auto
现在座椅宽度正常了但是都在一行上,所以我们需要使用flex的换行
flex-wrap: wrap;
现在换行了,根据要求在seat-area加上距离屏幕的上边距和屏幕隔开再在seat加上右边距隔开每个椅子
margin-top: 50px; //seat-area
margin-right:10px //seat
效果如下,我们发现座位并没有位于屏幕的中间,所以再在seat-area上一行代码
justify-content: center;
这次居中了,我们再来解决每个椅子间隔的问题。
根据题目分析,我们需要在第二列和第六列隔开30px,通过观察可知,我们可以使用子选择器 选出每(8n+2)和(8n+6)的椅子,分别给出
30px的间距
.seat:nth-child(8n+2),
.seat:nth-child(8n+6){
margin-right: 30px;
}
会出现以下情况,那么为什么会出现这种情况呢,原因是我们前面给seat都加了一个10px的右边距,由于空间不够,再加上每个椅子都有10px的外边距,所以就只能把其他盒子挤下去。此时只需要设最后一列椅子的右边距为0即可解决问题。
.seat:nth-child(8n+8){
margin-right: 0;
}
/*或者*/
.seat-area{
margin-right: -10px;
}
此时只需要给每一个椅子一个10px的上边距即可,如果给下边距会判断失败,且注意之前seat-area之前已经给了50px的上边距,所以我们最后还要减去10px的上边距才能答对该题。
margin-top:40px;//seat-area
margin-top:10px;//seat
参考链接
发表评论