3：CSS初识

难度系数：简单

在前端三件套中，CSS（层叠样式表）负责控制网页的视觉表现、排版布局和交互反馈，让原本朴素的HTML内容变得生动、美观且易于阅读。

在完成了”1：初识HTML”的任务后，你已经搭建了一个属于自己的线上主题展览馆。现在，是时候用CSS为它增添一些有趣的视觉板块了。

你决定在展览馆中设计一面5×5的”图片展示墙”，用于展示与主题相关的图片。

使用CSS的布局与样式能力，将这图片格子整齐排列，并在标蓝位置用”微光工作室”的LOGO进行标记，打造一个既有秩序又富有特色的展示区域。

最终效果示意如下：

(示意图：5×5网格，蓝色格子为微光LOGO)

1. 创建5×5网格：在网页中构建一个5行5列的网格布局，每个小格子代表一个展示位。

2. 中心位置标记：将网格中蓝色格子内容替换为”微光工作室”的LOGO。

3. 格子样式与间距：

   • 每个小格子的长宽和相互之间的间隔（gap）由你自由设定，但要保证整体视觉效果协调且清晰。

4. 并排展示：你需要创建两组展示墙，并将它们水平并排显示在页面中。两组展示墙应各自置于一个有边界的框（容器）中，并整体居中。

5. CSS美化：在完成基本布局后，请运用CSS为你的展示墙增添更多视觉趣味。至少使用以下两种或以上的样式属性：

   • border
   • border-radius
   • background-color
   • box-shadow
   • font-family / color
   • hover

   例如，你可以让每个格子带有圆角和阴影，鼠标悬停时颜色变化或轻微放大。

• 什么是盒子模型（Box Model）？
• 如何让一个元素（如整个展示墙的容器）在页面中水平居中？
• 如何让两个 div 容器并排显示？（提示：display: inline-block;，float，或 flex 布局）
• 了解并尝试一种CSS布局方式：Flexbox 或 Grid，哪一种更适合实现规则的网格布局？
• 如何精确控制元素的位置？（position 属性的简单应用）
• 菜鸟教程 CSS
• CSS Flexbox 布局教程 | 菜鸟教程
• CSS Grid 网格布局教程 | 菜鸟教程

提交完整可运行的 HTML + CSS 源码文件（或单页 HTML）即可。

提交点这里

出题人：  Xx

QQ：2191131478

邮箱：2191131478@qq.com