蓝桥杯练习05水果摆盘

水果摆盘

介绍

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

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

其中:
·index.css是本次需要补充样式文件。
·index.html为主页面。
·img图片文件夹。
在浏览器中预览index.html,当前页面效果如下:

目标

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

提示

align-self值有:
flex-start、flex-end、center、baseline、stretch
order:<整数>(…-l,0(default),l,…)

代码

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>

css

/* 菠萝 TODO 待补充代码 */

.yellow {
    /* display: flex; */
}


/* 以下代码不需要修改 */

#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 {
    /* display: flex; */
    align-self: flex-end;
    order: 1;
}

小结:基本上是把答案给了试都可以试出来,但这些基础的css最好还是会一点比较好。

知识点

align-self 的属性值及其含义:

  • auto:默认值。元素继承其父 Flex 容器的 align-items 属性的值。如果没有父容器的显式设置,或者是根 Flex 项,则默认行为通常等同于 stretch
  • stretch:元素会在侧轴方向上拉伸,填满容器的整个高度(或宽度,取决于主轴方向)。这是在没有显式定义尺寸或 align-self 属性时的默认行为。
  • flex-start:元素在侧轴起点对齐。
  • flex-end:元素在侧轴终点对齐。
  • center:元素在侧轴中心点对齐。
  • baseline:元素根据其第一个基线对齐。对于文本元素,基线通常是字母 x 的下边缘;对于其他元素,可能是内容区的底边。
  • initial:将属性设置为其初始值(在这种情况下,就是 auto)。
  • inherit:从父元素继承 align-self 属性的值。

通过使用 align-self,你可以针对不同的 Flex 子项进行细致的布局调整,即使它们存在于同一个 Flex 容器中,也能表现出各自不同的侧轴对齐方式。

order 属性值及含义:

  • order: <integer>:接受一个整数值,可以为正数、负数或 0。数值越小,Flex 项目在流体布局中的顺序越靠前;数值越大,顺序越靠后。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/472787.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Visual Studio 2013 - 重置窗口布局

Visual Studio 2013 - 重置窗口布局 1. Microsoft Visual Studio 2013 - 重置窗口布局References 1. Microsoft Visual Studio 2013 - 重置窗口布局 窗口 -> 重置窗口布局 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

闭包机制的底层实现原理

说明:此次分享不涉及ES6的let,const,块级作用域,这些其实都是对本次分享内容的扩展。 闭包的重要性 JS的内功心法,闭包是JavaScript中非常重要的核心概念,关系着JS里很多核心的机制,理解了它,很多问题都会迎刃而解,不理解闭包用JS永远像隔着一层窗户纸。 前端发展日新…

2 使用GPU理解并行计算

2.1 简介 本章旨在对并行程序设计的基本概念及其与GPU技术的联系做一个宽泛的介绍。本章主要面向具有串行程序设计经验&#xff0c;但对并行处理概念缺乏了解的读者。我们将用GPU的基本知识来讲解并行程序设计的基本概念。 2.2 传统的串行代码 绝大多数程序员是在串行程序占据…

备战蓝桥杯D33 - 真题 - 松散子序列

题目描述 解题思路 ps&#xff1a;思路是我看了大佬的题解后自己的理解&#xff0c;自己给自己捋清楚思路。 1.设置输入&#xff0c;将字符串输入 2.因为输入的是字符&#xff0c;但要找出字符的最大价值&#xff0c;所以先将字符串转化成对应的数值。 这时候就要用到ord函…

中国(京津冀)太阳能光伏展

中国(京津冀)太阳能光伏展是一场关于太阳能光伏技术和产业的展览会&#xff0c;主要在中国的京津冀地区举办。该展览会旨在推动太阳能光伏产业的发展&#xff0c;促进技术交流和商业合作。 在中国&#xff0c;太阳能光伏产业一直是重点发展的领域之一。中国政府制定了一系列政策…

水电能源智能化监控系统

水电能源智能化监控系统是利用现代信息技术&#xff0c;对水电站的运行状态、设备性能、环境参数等进行实时监测和管理的一种智能化系统。随着我国水电能源事业的快速发展&#xff0c;水电能源智能化监控系统在水电能源行业中的应用越来越广泛&#xff0c;为我国水电能源事业的…

【Qt学习笔记】(六)界面优化

界面优化 1 QSS1.1 背景介绍1.2 基本语法1.3 QSS设置方式1.3.1 指定控件样式设计1.3.2 全局样式设置1.3.3 使用 Qt Designer 编辑样式 1.4 选择器1.4.1选择器概况1.4.2 子控件选择器&#xff08;Sub-Controls&#xff09;1.4.3伪类选择器(Pseudo-States) 1.5 样式属性1.5.1 盒模…

[C++]20:unorderedset和unorderedmap结构和封装。

unorderedset和unorderedmap结构和封装 一.哈希表&#xff1a;1.直接定址法&#xff1a;2.闭散列的开放定址法&#xff1a;1.基本结构&#xff1a;2.insert3.find4.erase5.补充&#xff1a;6.pair<k,v> k的数据类型&#xff1a; 3.开散列的拉链法/哈希桶&#xff1a;1.基…

PyTorch 深度学习(GPT 重译)(四)

第二部分&#xff1a;从现实世界的图像中学习&#xff1a;肺癌的早期检测 第 2 部分的结构与第 1 部分不同&#xff1b;它几乎是一本书中的一本书。我们将以几章的篇幅深入探讨一个单一用例&#xff0c;从第 1 部分学到的基本构建模块开始&#xff0c;构建一个比我们迄今为止看…

图书馆RFID(射频识别)数据模型压缩/解压缩算法实现小工具

1. 前言 最近闲来无聊&#xff0c;看了一下《图书馆射频识别数据模型第1部分&#xff1a;数据元素的设置及应用规则》以及《图书馆射频识别数据模型第2部分&#xff1a;基于ISO/IEC 15962的数据元素编码方案》&#xff0c;决定根据上面的编码方法实现一下该算法&#xff0c;于…

算法沉淀——贪心算法四(leetcode真题剖析)

算法沉淀——贪心算法四 01.最长回文串02.增减字符串匹配03.分发饼干04.最优除法 01.最长回文串 题目链接&#xff1a;https://leetcode.cn/problems/longest-palindrome/ 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的回文串 。 …

【软件测试】如何设计自动化测试脚本

企业中如何设计自动化测试脚本呢&#xff1f;今天我们就来为大家分享一些干货。 一、线性设计 线性脚本设计方式是以脚本的方式体现测试用例&#xff0c;是一种非结构化的编码方式&#xff0c;多数采用录制回放的方式&#xff0c;测试工程师通过录制回访的访问对被测系统进行…

在ComfyUI中,IP-Adapter的一大堆模型应该怎么放?

&#x1f381;背景介绍 IP-Adapter有一大堆的模型&#xff0c;那么这个模型在ComfyUI中&#xff0c;这些模型到底应该怎么放呢&#xff1f;这篇文章简单介绍一下。 首先&#xff0c;大家需要到huggingface上找到对应的模型&#xff0c;把所有的模型先下载下来。 huggingface…

vue2 项目认识 vue2 各个文件夹作用 vue工程文件作用 main.js是什么 package.json是什么

1. node_modules : 项目依赖文件夹&#xff0c;相当于java类库。依赖包 2. public 文件夹: 一般放置一些静态资源&#xff08;图片&#xff09;&#xff0c;注意&#xff1a; 放在public文件夹内的文件&#xff0c;webpack打包时候&#xff0c;会原封不动打包到dist文件夹中 …

隐私计算实训营学习二:隐私计算开源如何助力数据要素流通

文章目录 一、数据要素流转与数据内外循环二、数据外循环中的信任焦虑三、数据要素流通对隐私计算的期望四、隐私计算开源助力数据要素流通 一、数据要素流转与数据内外循环 数据要素流转过程(从数据采集加工->到数据价值释放)&#xff1a; 链路主要包括采集、存储、加工、…

Pandas-排序函数sort_values()

Pandas-排序函数sort_values() pandas中的sort_values()函数原理类似于SQL中的order by&#xff0c;可以将数据集依照某个字段中的数据进行排序&#xff0c;该函数即可根据指定列数据也可根据指定行的数据排序。 pandas中的sort_values()函数原理类似于SQL中的order by&#xf…

RR级别为什么不能完全解决幻读案例分析 | 什么是MCVV

0. 知识前要&#xff1a;1. 举个栗子&#xff1a;1.1. 栗子一&#xff1a;两次快照读之间存在更新语句&#xff0c;更新其他事务已经更新过的数据1.1.1. 执行过程分析&#xff1a;1.1.2. MVCC分析&#xff1a; 1.2. 栗子二&#xff1a;两次快照读之间存在更新语句&#xff0c;更…

LightDB24.1 存储过程支持inner和outer对变量的引用

背景 Oracle oracle plsql支持如下场景&#xff1a; 在for循环中&#xff0c;将select查询的结果给一个record类型&#xff0c;这一操作也被称为隐式游标操作。record类型中一个字段用来接收查询结果中的一个select查询语句&#xff08;update,delete,insert在这个语法中都会…

CentOS安装zsh与ohmyzsh

文章目录 安装 zsh安装 ohmyzsh安装插件.zshrc 配置终端效果 安装 zsh yum install -y git curl # 安装zsh yum install -y zsh # 查看已经安装shell cat /etc/shells # 切换shell chsh -s /bin/zsh安装 ohmyzsh 国内镜像 sh -c "$(curl -fsSL https://gitee.com/pocmo…

算法·动态规划Dynamic Programming

很多人听到动态规划或者什么dp数组了&#xff0c;或者是做到一道关于动态规划的题目时&#xff0c;就会有一种他很难且不好解决的恐惧心理&#xff0c;但是如果我们从基础的题目开始深入挖掘动规思想&#xff0c;在后边遇到动态规划的难题时就迎难而解了。  其实不然&#xff…