HTML/CSS教程：用DIV绘制芬兰国旗

想学习如何使用HTML和CSS绘制国旗吗？这篇教程将带你用简单的DIV元素和CSS样式，一步步绘制出芬兰国旗。

1. HTML代码：

<div class='flag-container'>
  <div class='white-stripe'></div>
  <div class='blue-stripe'>
    <div class='cross'></div>
  </div>
  <div class='white-stripe'></div>
</div>

我们使用一个 flag-container 类名的DIV作为容器，内部包含三个DIV，分别代表芬兰国旗的三条横条纹。

2. CSS代码：

.flag-container {
  width: 200px;
  height: 120px;
  background-color: blue;
  display: flex;
  flex-direction: column;
}

.white-stripe {
  height: 40px;
  background-color: white;
}

.blue-stripe {
  height: 40px;
  background-color: blue;
  display: flex;
  justify-content: center;
}

.cross {
  width: 100px;
  height: 20px;
  background-color: white;
}

flag-container：设置容器的宽度为200px，高度为120px，背景色为蓝色，并使用flex布局使其子元素垂直排列。
white-stripe：设置白色横条纹的高度为40px。
blue-stripe：设置蓝色横条纹的高度为40px，并使用flex布局使其内部元素水平居中。
cross：设置白色十字的宽度为100px，高度为20px。

通过以上简单的HTML和CSS代码，我们就成功绘制出了芬兰国旗！

代码解析：

这段代码巧妙地利用了HTML的DIV元素和CSS的盒子模型、flex布局等特性，简洁明了地实现了芬兰国旗的绘制。

学习要点：

HTML DIV元素
CSS 盒子模型
CSS flex布局
CSS 颜色属性

希望这篇教程能帮助你更好地理解HTML和CSS，并学会如何绘制简单的图形！