web蓝桥杯真题--13、水果摆盘

这篇具有很好参考价值的文章主要介绍了web蓝桥杯真题--13、水果摆盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景介绍

目前 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 图片文件夹。
  1. 选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
  2. 打开环境右侧的【Web 服务】。

web蓝桥杯真题--13、水果摆盘,蓝桥杯真题web,前端,蓝桥杯,职场和发展

web蓝桥杯真题--13、水果摆盘,蓝桥杯真题web,前端,蓝桥杯,职场和发展

考试要求

提示
align-self 值 :
  flex-start flex-end center baseline stretch

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

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

web蓝桥杯真题--13、水果摆盘,蓝桥杯真题web,前端,蓝桥杯,职场和发展

要求规定

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

解题思路

题目中给了提示

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

order:<整数>(... -1, 0 (default), 1, ..)这道题目也就简单了,挨个试都能试出来,偏偏我粗心把

align-self写成了align-items,一直出不来结果,然后看了题解

最终代码:文章来源地址https://www.toymoban.com/news/detail-823752.html

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

}

/* 以下代码不需要修改 */
#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;

}

到了这里,关于web蓝桥杯真题--13、水果摆盘的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【蓝桥杯Web】第十三届蓝桥杯(Web 应用开发)省赛真题

    第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,本文介绍第十三届蓝桥杯Web应用开发的省赛题目以及解析。 题目描述:使用Flex属性快速完成布局。 题目分析:主要涉及的是Flex弹性布局的知识,主要包括主轴方向和是否换行。 题目代码:

    2023年04月10日
    浏览(51)
  • 《蓝桥杯真题》:2022单片机省赛第二场_客观题(第十三 / 13届第二场)

    声明:我仅是贴出我认为正确的答案,不是标准答案! 解析:打开ISP看到下面两个文件类型,我就选了 BC 解析:比赛给的《STC15系列单片机用户手册》P301,可以看到是可以位寻址的都能够被8整除,不能够被8整除的无法进行位操作,SCON的地址为98H,P4的地址为C0H,可以位寻址

    2023年04月08日
    浏览(53)
  • web蓝桥杯真题--8、和手机相处的时光

    现在都提倡健康使用手机,那么统计一下在一周中每天使用手机的情况吧!本题使用 ECharts 实现统计手机使用时长的折线图,但是代码中存在 Bug 需要你去修复。 开始答题前,需要先打开本题的项目代码文件夹,目录结构如下: 其中: js/echarts.js  是 ECharts 文件。 index.html  

    2024年01月19日
    浏览(32)
  • web蓝桥杯真题--14、关于你的欢迎语

    营销号,有时候需要一些特定的欢迎语,但针对特定的用户,我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题,实现根据模版生成特定用户的欢迎语。 本题已经内置了初始代码,打开实验环境,目录结构如下: 其中: css/style.css  是页面样式文件。 c

    2024年01月25日
    浏览(32)
  • 2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题

    前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案( 真题源码资源在最后 ),因博主技术有限(请理解一下),博主只拿了省二 目录 1. 电影院排座位 2. 图⽚⽔印⽣成: 3.  收集帛书碎⽚ 4. ⾃适应⻚⾯ 5.  外卖给好评 6. 视频弹幕  7. ISBN 转换与⽣成

    2024年02月05日
    浏览(49)
  • 程序员在职场中如何让自己的技能快速提高,WEB前端开发工程师如何让自己快速成为团队的核心开发人员?

    今天聊一聊 就是我们在工作中就实际的 工资里面 写代码的过程中怎么提高自己的 一些技能 以及我们怎么样快速成为 就是一个团队的核心开发人 包括我以前 其实我也是一个小迷弟 后来就是慢慢慢慢 包括经历一些项目什么东西 其实现在已经慢慢成为核心开发人员 就是分享

    2023年04月16日
    浏览(64)
  • [职场] 会计学专业学什么 #其他#知识分享#职场发展

    会计学专业学什么 会计学专业属于工商管理学科下的一个二级学科,本专业培养具备财务、管理、经济、法律等方面的知识和能力,具有分析和解决财务、金融问题的基本能力,能在企、事业单位及政府部门从事会计实务以及教学、科研方面工作的工商管理学科高级专门人才

    2024年02月20日
    浏览(50)
  • 学习平台助力职场发展与提升

    近年来,随着互联网技术的发展, 学习平台 逐渐成为了职场发展和提升的必备工具。学习平台通过提供丰富的课程内容、灵活的学习时间和个性化的学习路径,帮助职场人士更好地提升自己的技能和知识储备,为职场发展打下坚实的基础。 学习平台的优势在于提供了丰富多

    2024年02月11日
    浏览(51)
  • web前端javascript笔记——(13)事件(1)

    鼠标/键盘属性 altKey               返回当事件被触发时,“ALT”是否被按下。 button               返回当事件被触发时,哪个鼠标按钮被点击 clientX               返回当事件被触发时,鼠标指针的水平坐标。 clientY               返回当事件被触

    2024年01月25日
    浏览(53)
  • 如何手机搜学法减分答案? #媒体#职场发展

    今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式,可以快速查找问题解析,加深对题目答案的理解。 1.证件照全能管家(APP) 一个非常好用的证件照APP 常用的证件照尺寸和底色都有、日常的证件照编辑完全够用,支持一键智能拍摄证件照,还可以对照片

    2024年02月19日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包