纯CSS+HTML绘制国际象棋棋盘

马黑黑 · 发表于 2022-10-17 20:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-10-17 20:21

代码:

<style>
#papa {
margin: 50px auto;
width: 400px;
height:400px;
display: grid;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: 100%;
border: 2px solid black;
position: relative;
}
.line1, .line2 {
display: grid;
grid-template-rows: 100%;
grid-template-columns: repeat(8, 1fr);
}
.line1 > span, .line2 > span { padding: 0; margin: 0; }
.line1 > span:nth-child(odd) { background: snow; }
.line1 > span:nth-child(even) { background: black; }
.line2 > span:nth-child(odd) { background: black; }
.line2 > span:nth-child(even) { background: snow; }
</style>
<div id="papa">
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
</div>

复制代码

马黑黑 · 发表于 2022-10-17 20:21

本帖最后由马黑黑于 2022-10-17 20:33 编辑

解释：
首先说思路。

grid布局嵌套。

一、父元素，#papa 选择器所指向的元素，使用 grid 布局，八行一列：

display: grid;
grid-template-rows: repeat(8, 1fr);
grid-template-columns: 100%;

二、papa 的直系子元素

papa父元素下面带八个子元素，分为两类：

.line1, .line2 {
display: grid;
grid-template-rows: 100%;
grid-template-columns: repeat(8, 1fr);
}

.line1 和 .line2 属性是一样的，但要各自独立，因为，将来棋盘的黑白交替它们是不一样的，需要各自设定。

三、.line1 和 .line 2 的子元素 span

span 标签将是棋盘格子的最终归宿，换言之，span标签构成一个个的棋盘格子。

line1 和 line2 下面的 span 标签，拥有统一的属性：

.line1 > span, .line2 > span { padding: 0; margin: 0; }

line1 下面的 span 标签，奇数的底色为雪白，偶数的底色为纯黑：

.line1 > span:nth-child(odd) { background: snow; }

.line1 > span:nth-child(even) { background: black; }

line2 下面的 span 标签反过来，奇数的底色为纯黑，偶数的底色为雪白：

.line2 > span:nth-child(odd) { background: black; }
.line2 > span:nth-child(even) { background: snow; }

这就成了，虽然代码繁琐一点——这是木有办法的。