井字游戲是一種簡單又有趣的游戲。我們可以使用CSS來畫出這個(gè)游戲的棋盤。

/* 定義棋盤的容器 */
.board {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
border: 1px solid #333;
}
/* 定義棋盤中的每一個(gè)格子 */
.cell {
width: 33.33%;
height: 33.33%;
box-sizing: border-box;
border: 1px solid #333;
}
/* 定義棋盤中的"X"和"O" */
.x:before {
content: 'X';
font-size: 80px;
}
.o:before {
content: 'O';
font-size: 80px;
}
/* 在HTML中創(chuàng)建棋盤 */
<div class="board"><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>

我們可以將游戲的棋子"X"和"O"放在每個(gè)格子中。
現(xiàn)在，我們已經(jīng)用CSS畫出了井字游戲的棋盤，您可以通過JavaScript來為其添加交互預(yù)覽效果。