视觉上吸引人的水果拼盘

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

完成的水果拼盘布局

🎯 任务

在这个项目中,你将学习:

  • 如何设置一个弹性容器来组织拼盘上的水果
  • 如何将相同颜色的水果放置在其相应颜色板的中间

🏆 成果

完成这个项目后,你将能够:

  • 使用 CSS Flexbox 创建类似网格的布局
  • 在弹性容器中居中并对齐元素
  • 以视觉上吸引人的方式在网页上有效地组织和展示元素

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css/BasicConceptsGroup -.-> css/properties("`Properties`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") subgraph Lab Skills css/properties -.-> lab-300081{{"`视觉上吸引人的水果拼盘`"}} css/box_model -.-> lab-300081{{"`视觉上吸引人的水果拼盘`"}} css/width_and_height -.-> lab-300081{{"`视觉上吸引人的水果拼盘`"}} css/display_property -.-> lab-300081{{"`视觉上吸引人的水果拼盘`"}} css/flexbox -.-> lab-300081{{"`视觉上吸引人的水果拼盘`"}} end

设置项目结构

在这一步中,你将学习如何设置项目结构。

首先,打开编辑器。你应该能看到一些文件——编辑器中的 index.htmlstyle.cssimages

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,你就会看到页面。

未完成的项目结构预览

设置弹性容器

在这一步中,你将学习如何设置弹性容器来组织拼盘上的水果。

  1. 在你的代码编辑器中打开 index.css 文件。
  2. #pond 选择器内,添加以下 CSS 属性:
#pond {
  /* 待办事项:在此处添加你的 CSS 代码 */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

display: flex 属性将 #pond 元素设置为弹性容器,使我们能够使用弹性盒布局来定位水果。

flex-direction: column 属性将弹性项目(水果容器)垂直堆叠。

flex-wrap: wrap 属性允许弹性项目在当前行放不下时换行到下一行。

最终结果如下:

弹性容器最终结果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程