简介
在这个项目中,你将学习如何使用 CSS Flexbox 创建一个视觉上吸引人的水果拼盘。目标是将相同颜色的水果放置在其相应颜色板的中间,创建一个和谐且美观的展示效果。
👀 预览

🎯 任务
在这个项目中,你将学习:
- 如何设置一个弹性容器来组织拼盘上的水果
- 如何将相同颜色的水果放置在其相应颜色板的中间
🏆 成果
完成这个项目后,你将能够:
- 使用 CSS Flexbox 创建类似网格的布局
- 在弹性容器中居中并对齐元素
- 以视觉上吸引人的方式在网页上有效地组织和展示元素
在这个项目中,你将学习如何使用 CSS Flexbox 创建一个视觉上吸引人的水果拼盘。目标是将相同颜色的水果放置在其相应颜色板的中间,创建一个和谐且美观的展示效果。
在这个项目中,你将学习:
完成这个项目后,你将能够:
在这一步中,你将学习如何设置项目结构。
首先,打开编辑器。你应该能看到一些文件——编辑器中的 index.html
、style.css
和 images
。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,你就会看到页面。
在这一步中,你将学习如何设置弹性容器来组织拼盘上的水果。
index.css
文件。#pond
选择器内,添加以下 CSS 属性:#pond {
/* 待办事项:在此处添加你的 CSS 代码 */
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
display: flex
属性将 #pond
元素设置为弹性容器,使我们能够使用弹性盒布局来定位水果。
flex-direction: column
属性将弹性项目(水果容器)垂直堆叠。
flex-wrap: wrap
属性允许弹性项目在当前行放不下时换行到下一行。
最终结果如下:
恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。