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

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

马黑黑 发表于 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; }

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

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

这个棋盘是核心部分，周边的标记，没有弄上

红影发表于 2022-10-17 20:50

这个代码的css倒是很简洁，html要写8组div啊{:4_173:}

马黑黑 发表于 2022-10-17 21:50

本帖最后由马黑黑于 2022-10-17 22:13 编辑

红影发表于 2022-10-17 20:50
这个代码的css倒是很简洁，html要写8组div啊
八行，所以需要个div；

每一个 div，又需要八个 span。

这就得出 8*8=64 的棋盘了

红影发表于 2022-10-18 12:18

马黑黑发表于 2022-10-17 21:50
八行，所以需要个div；

每一个 div，又需要八个 span。

是啊，所以纯CSS+HTML的绘制容易理解，却是看着繁琐{:4_173:}

马黑黑 发表于 2022-10-18 12:29

红影发表于 2022-10-18 12:18
是啊，所以纯CSS+HTML的绘制容易理解，却是看着繁琐

思路、逻辑要清晰

页: [1]

花潮论坛's Archiver

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