【Html.js——页面布局】水果摆盘（蓝桥杯真题-1767）【合集】

Rossy Yan

发布于 2025-01-24 11:18:34

42400

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，这次试题将利用 Flex 实现经典布局效果。

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip

下载完成之后的目录结构如下：

├── index.css
└── index.html
└── img

其中：

index.css 是本次挑战的需要补充样式文件。
index.html 为主页面。
img 图片文件夹。

你可以参考下图中的步骤访问项目：

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】。

考试要求

提示

align-self 值 ：
  flex-start flex-end center baseline stretch

order:<整数>(... -1, 0 (default), 1, ..)

在需要修改部分的代码有相关提示，请仔细阅读之后，使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码，把对应的水果放在对应的盘子里面，最终效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

/* 菠萝 TODO 待补充代码 */
.yellow {
	order: 1;
	align-self:flex-end;
}


/* 以下代码不需要修改 */
#board {
	position: sticky;
	top: 0;
	width: 50vw;
	height: 50vw;
	min-width: 300px;
	min-height: 300px;
	max-width: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

#pond {
	z-index: 20;
}

#pond, #background {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
}

.lilypad, .frog {
	position: relative;
	width: 20%;
	height: 20%;
	overflow: hidden;

}


.frog.green .bg {
	background-image: url(./img/1.png);
}

.frog.yellow .bg {
	background-image: url(./img/2.png);
}

.frog .bg {
	background-size: 60% 60%;
}

.lilypad .bg, .frog .bg {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.lilypad.green .bg {
	border-radius: 50%;
	background: #9B100A;
	opacity: 0.5;
}



.lilypad .bg, .frog .bg {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

* {
	box-sizing: border-box;
}

.lilypad.yellow .bg {
	border-radius: 50%;
	background: #863A1B;
	opacity: 0.5;

}

代码解析📑

1. HTML 部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="board">
        <div id="pond">
            <div class="frog yellow">
                <div class="bg animated pulse infinite"></div>
            </div>
            <div class="frog green">
                <div class="bg animated pulse infinite"></div>
            </div>
            <div class="frog yellow">
                <div class="bg animated pulse infinite"></div>
            </div>
            <div class="frog green">
                <div class="bg animated pulse infinite"></div>
            </div>
            <div class="frog green">
                <div class="bg animated pulse infinite"></div>
            </div>
        </div>
        <div id="background">
            <div class="lilypad yellow" style="align-self: flex-end; order: 2;">
                <div class="bg" style="transform: scale(0.84003) rotate(229.647deg);"></div>
            </div>
            <div class="lilypad green">
                <div class="bg" style="transform: scale(0.920888) rotate(270.938deg);"></div>
            </div>
            <div class="lilypad yellow" style="align-self: flex-end; order: 2;">
                <div class="bg" style="transform: scale(0.986074) rotate(0.647772deg);"></div>
            </div>
            <div class="lilypad green">
                <div class="bg" style="transform: scale(0.802433) rotate(325.245deg);"></div>
            </div>
            <div class="lilypad green">
                <div class="bg" style="transform: scale(0.903708) rotate(203.839deg);"></div>
            </div>
        </div>
    </div>
</body>

</html>

（1）文档声明和头部：

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：定义 HTML 文档的根元素，并指定语言为英语。
<head>：包含文档的元数据，如字符集、兼容性设置、视口设置和样式表链接。
- <meta charset="UTF-8">：设置字符集为 UTF - 8。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">：指定 IE 浏览器以最新模式渲染页面。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度为设备宽度，初始缩放比例为 1.0，确保页面在移动设备上正确显示。
- <title>Document</title>：设置页面标题为 “Document”。
- <link rel="stylesheet" href="index.css">：链接外部样式表index.css，用于设置页面的样式。

（2）主体部分：

<div id="board">：定义一个容器，作为整个布局的基础。它具有sticky定位，使其在页面滚动时保持固定在顶部。
<div id="pond">：表示池塘区域，包含青蛙元素。z - index: 20使其显示在背景之上。
- 多个<div class="frog yellow">和<div class="frog green">：定义青蛙元素，通过yellow和green类来区分不同颜色的青蛙。每个青蛙内部包含一个<div class="bg animated pulse infinite">，用于显示青蛙的背景图像，并应用动画效果。
<div id="background">：表示背景区域，包含荷叶元素。
- 多个<div class="lilypad yellow">和<div class="lilypad green">：定义荷叶元素，通过yellow和green类来区分不同颜色的荷叶。每个荷叶内部包含一个<div class="bg">，用于显示荷叶的背景，并通过style属性设置旋转和缩放效果。

2. CSS部分

.yellow {
    order: 1;
    align-self: flex-end;
}

/* 以下代码不需要修改 */
#board {
    position: sticky;
    top: 0;
    width: 50vw;
    height: 50vw;
    min-width: 300px;
    min-height: 300px;
    max-width: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#pond {
    z - index: 20;
}

#pond,
#background {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1em;
}

.lilypad,
.frog {
    position: relative;
    width: 20%;
    height: 20%;
    overflow: hidden;
}

.frog.green.bg {
    background - image: url(./img/1.png);
}

.frog.yellow.bg {
    background - image: url(./img/2.png);
}

.frog.bg {
    background - size: 60% 60%;
}

.lilypad.bg,
.frog.bg {
    width: 100%;
    height: 100%;
    background - position: center center;
    background - size: contain;
    background - repeat: no - repeat;
}

.animated.infinite {
    -webkit - animation - iteration - count: infinite;
    animation - iteration - count: infinite;
}

.pulse {
    -webkit - animation - name: pulse;
    animation - name: pulse;
}

.animated {
    -webkit - animation - duration: 1s;
    animation - duration: 1s;
    -webkit - animation - fill - mode: both;
    animation - fill - mode: both;
}

.lilypad.green.bg {
    border - radius: 50%;
    background: #9B100A;
    opacity: 0.5;
}

.lilypad.bg,
.frog.bg {
    width: 100%;
    height: 100%;
    background - position: center center;
    background - size: contain;
    background - repeat: no - repeat;
}

* {
    box - sizing: border - box;
}

.lilypad.yellow.bg {
    border - radius: 50%;
    background: #863A1B;
    opacity: 0.5;
}

.yellow类：
- order: 1;：设置元素在 Flex 容器中的排列顺序为 1。
- align-self: flex-end;：使元素在 Flex 容器中沿交叉轴（垂直方向）对齐到末尾。
#board样式：
- position: sticky;：设置粘性定位，使元素在滚动时保持固定在顶部。
- top: 0;：将元素固定在顶部。
- width: 50vw; height: 50vw;：设置宽度和高度为视口宽度的 50%，创建一个正方形区域。
- min-width: 300px; min-height: 300px;：设置最小宽度和高度为 300px，防止在小屏幕上布局过小。
- max-width: 100vh; max-height: 100vh;：设置最大宽度和高度为视口高度的 100%，防止在大屏幕上布局过大。
- overflow: hidden;：隐藏超出容器范围的内容。
#pond和#background样式：
- display: flex;：将容器设置为 Flex 布局。
- position: absolute;：设置绝对定位，使其相对于#board容器定位。
- top: 0; left: 0;：将容器定位在#board的左上角。
- width: 100%; height: 100%;：设置宽度和高度为#board的 100%。
- padding: 1em;：添加 1em 的内边距。
.lilypad和.frog样式：
- position: relative;：设置相对定位，为内部元素提供定位参考。
- width: 20%; height: 20%;：设置宽度和高度为父容器的 20%，创建一个正方形子元素。
- overflow: hidden;：隐藏超出元素范围的内容。
青蛙背景样式：
- .frog.green.bg：为绿色青蛙设置背景图像为./img/1.png。
- .frog.yellow.bg：为黄色青蛙设置背景图像为./img/2.png。
- .frog.bg：设置青蛙背景图像的大小为 60%×60%。
通用背景样式：
- .lilypad.bg,.frog.bg：设置背景图像的位置为中心，大小为包含内容，不重复。
动画相关样式：
- .animated.infinite：设置动画无限循环。
- .pulse：指定动画名称为pulse。
- .animated：设置动画持续时间为 1 秒，填充模式为both，即动画开始和结束时应用关键帧样式。
荷叶背景样式：
- .lilypad.green.bg：为绿色荷叶设置圆形边框，背景颜色为#9B100A，透明度为 0.5。
- .lilypad.yellow.bg：为黄色荷叶设置圆形边框，背景颜色为#863A1B，透明度为 0.5。
通用盒模型样式：
- * { box-sizing: border-box; }：设置所有元素的盒模型为border-box，使内边距和边框包含在元素的宽度和高度内。

3. 工作流程 ▶️

HTML 结构搭建：
- 创建一个#board容器作为整个布局的基础，设置其为粘性定位并固定在顶部。
- 在#board内部创建#pond和#background容器，分别用于放置青蛙和荷叶。
- 在#pond中创建多个青蛙元素，在#background中创建多个荷叶元素，并通过类名区分颜色。
CSS 样式设置：
- 使用 Flex 布局来排列#pond和#background中的元素，使其均匀分布。
- 为青蛙和荷叶元素设置相对定位和固定大小，确保它们在容器内有合适的尺寸。
- 为不同颜色的青蛙设置不同的背景图像，为荷叶设置背景颜色和圆形边框，并通过透明度和旋转、缩放等变换来营造出 “摆盘” 效果。
- 为青蛙背景添加动画效果，使其具有动态感。
最终效果呈现：
- 页面加载时，#board容器固定在顶部，#pond和#background中的青蛙和荷叶元素按照设定的布局和样式显示，形成类似水果摆盘的效果。青蛙的动画效果使其具有动态感，增加页面的趣味性。