十四届蓝桥杯省赛Web大学组真题（1）-慈云数据

1.电影院排座位 (考点 CSS样式，选择器）

题目链接：

https://www.lanqiao.cn/problems/5133/learning/?subject_code=4&group_code=2&match_num=14&match_flow=1&origin=cup

题目解读：

实现目标：

座位区域和荧幕间隔 50px。
座位区域每一行包含 8 个座位。
第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。

通过编写样式，将图一变成图二，那么首先我们要知道为什么会呈现图一的样子，我们结合index.js和style.css可以知道screen与seat-area为container的子元素平级，呈现出图一是因为块级元素div将screen撑到了看不到的位置。
```
.seat-area{
 display: flex;
 flex-wrap: wrap;
 margin-top: 40px;
}
.seat{
 margin-top: 10px;
 margin-right: 10px;
}
.seat:nth-child(4n-2){
 margin-right: 30px;
}
.seat:nth-child(8n){
 margin-right: 0;
}
```
通过在index.js添加以下代码可以实现该效果，这里我们用到了伪选择器:nth-child(),flex布局，

        实现目标3，我们用到.seat:nth-children(4n-2)巧妙地设立了第二行与第六行间隔下一行为30px，这时我们发现没有容下8个座位，我们只需.seat:nth-children(8n)将间隔设置为0。

        需要注意magin合并问题，如果给seat设置了margin-top:10px,那么screen只需设置margin-botton：40px

2. 图片水印生成 (考点 DOM）

题目链接：

https://www.lanqiao.cn/problems/5134/learning/?subject_code=4&group_code=2&match_num=14&match_flow=1&origin=cup

题目解读：

实现目标：

请完善 js/index.js 文件中的 TODO 部分，实现创建水印函数的功能，创建的水印需要使用  标签展示。

//补充index.js
```
for(var i =0;i
```