十四届蓝桥杯省赛Web大学组真题（1）_第十四届蓝桥杯web大学组国赛真题

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 部分，实现创建水印函数的功能 ，创建的水印需要使用 <span> 标签展示。

//补充index.js

for(var i =0;i<count;i++){
 
  let span = document.createElement("span");
 
  span.innerHTML=text;
 
  span.style.color=color;
 
  span.style.transform= 'rotate('+deg+'deg)';
 
  span.style.opacity=opacity;
 
  container.appendChild(span)
 
 }

        想要产生多个多个水印，既然就想到for循环cout，再创建span节点，添加先对应innerHTml，css，值得注意的是产生角度偏移 span.style.transform= 'rotate('+deg+'deg)';再添加到父容器container中。