HTML/CSS绘制芬兰国旗：简单易懂的代码示例

使用HTML和CSS绘制芬兰国旗

本教程将教你如何使用简单的HTML和CSS代码片段，在网页上绘制芬兰国旗。

HTML代码:

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

CSS代码:

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

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

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

.blue-cross .white-stripe {
  width: 100px;
  height: 20px;
}

代码解释:

1. HTML: 我们使用多个嵌套的<div>元素来构建芬兰国旗的结构，包括三条水平条纹和中间的蓝色十字。
2. CSS:
   • .finnish-flag: 设置国旗的宽度、高度和背景颜色 (蓝色)。
   • .white-stripe: 设置白色条纹的高度和背景颜色。
   • .blue-cross: 设置蓝色十字的高度、背景颜色，并使用flexbox使其内部元素居中。
   • .blue-cross .white-stripe: 设置蓝色十字内部白色条纹的宽度和高度。

通过这段简洁易懂的代码，你可以轻松地在网页上添加芬兰国旗图案。