css太极图菜鸟教程

在前端开发领域中，CSS 是非常重要的一部分。CSS 太极图是 CSS 技能的基础练习之一，也很好地解释了 CSS 的盒子模型和居中排列。下面是太极图的 HTML 代码：

<div class="wrapper">
  <div class="yin">
    <div class="yuan"></div>
    <div class="wenzi">阴</div>
  </div>
  <div class="yang">
    <div class="yuan"></div>
    <div class="wenzi">阳</div>
  </div>
</div>

我们使用一个 wrapper 容器来进行太极图的整体布局，以及分别使用 yin 和 yang 两个容器来表示阴和阳两个部分。

下面是相应的 CSS 代码：

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}
.yin,.yang {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  border-radius: 50%;
}
.yin {
  background-color: black;
}
.yang {
  background-color: white;
  transform: rotate(180deg);
}
.yuan {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
}
.wenzi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.wenzi:nth-of-type(1) {
  color: white;
}
.wenzi:nth-of-type(2) {
  color: black;
}

详细解释 CSS 太极图的代码可以学习这篇菜鸟教程：CSS 太极图-配合古诗快速入门 CSS。这也可以作为 CSS 基础的练习。如果你是前端新手，不妨把它作为部分样式的练习，掌握 CSS 常用属性和盒子模型的实现原理。