T3.CSS初识 ​

难度系数：简单

难度系数：简单

前端三件套之一的CSS(层叠样式表)是网页设计的基石，是负责控制网页的视觉表现和布局的样式语言，可以让HTML的内容更美观易读。

任务 ​

题目背景 ​

青子同学最近迷上了一款名为“明日方舟”的游戏，在游戏中干员的攻击范围多样，以格子为单位覆盖一部分战场。

正好你刚刚了解了CSS在网站中是如何工作的，那么能不能通过CSS，运用一些经典的布局与样式，在网页上表现出一些具有特色的干员攻击范围呢？

要求图片如下：

要求 ​

每个小方格长宽均为30px，互相之间间隔5px，干员本体位置用蓝色标记。两图分别置于有边界的框里居中。最后让它们并排显示。 展示在你的网页中即可，尽可能的如图片所示。当然，如果你有完成要求之后更多的想法请随意施展。

可能遇到的问题 ​

• 什么是盒子模型？
• 如何让元素水平居中？如何让两个div并排显示？
• 了解一个CSS的布局方式。
• 如何定位？CSS的样式有哪些都用用看。
• 菜鸟教程 CSS

本题提交方式 ​

提交点这里

出题者Q&A方式 ​

QQ：3352859153