如何用css和javascript绘制围棋板

我试图用html/css/js绘制一个围棋板，但我想不出一个好方法。这就是我所做的：

#Board {position: relative; left:100; top:100; height:570; width:570;}
.Square {position: absolute; height:30; width:30; background-color:#DCB579; border-color: black; border-width: 1; border-style: solid;}

.lineh0{top:0;}
.lineh1{top:30;}
.lineh2{top:60;}
.lineh3{top:90;}
.lineh4{top:120;}
.lineh5{top:150;}
.lineh6{top:180;}
.
.
.lineh18{top:540;}

.linev0{left:0;}
.linev1{left:30;}
.linev2{left:60;}
.linev3{left:90;}
.linev4{left:120;}
.linev5{left:150;}
.linev6{left:180;}
.
.
.linev18{left:540;}

我使用它们在板上绘制正方形的方法是，我使用

square

类和

lineh

和

linev

类在

board

元素中创建元素，具体取决于正方形的位置。例如，左上角和右下角的正方形：

<div id="Board">
<div class="Square lineh0 linev0"></div>
<div class="Square lineh18 linev18"></div>
</div>

问题是围棋板上有361个方块，用手把它们都打出来不是一种好技术。我的问题是，更好的方法是什么？

将您的“板”准备为具有正确列数和行数的网格（提示：

网格模板列：重复（19，30px）；

）

通过网格行和网格列定位你的.Squares，通过javascript在div的style属性中设置，而不是使用类。

将你的#板准备为具有正确列数和行数的网格（提示：

网格模板列：重复（19，30px）；

）

---

通过网格行和网格列定位.Squares，通过javascript在div的style属性中设置，而不是使用类。

我会这样做：

let board=document.getElementById（“board”）；
//每行
for（设i=0；i<19；i++）{
//每列
对于（设j=0；j<19；j++）{
//创建一个正方形
设square=document.createElement（“div”）；
//添加Square类
square.classList.add（“square”）；
//而不是linehx类
square.style.top=30*i+“px”；
//或者使用：square.classList.add（“lineh”+i）；
//而不是linevx类
square.style.left=30*j+“px”；
//或者使用：square.classList.add（“linev”+j）；
//把它加到黑板上
板子（方形）；
}
}

.Square{
位置：绝对位置；
身高：30；
宽度：30；
背景色：#DCB579；
边框颜色：黑色；
边界宽度：1；
边框样式：实心；
}

---

我会这样做：

let board=document.getElementById（“board”）；
//每行
for（设i=0；i<19；i++）{
//每列
对于（设j=0；j<19；j++）{
//创建一个正方形
设square=document.createElement（“div”）；
//添加Square类
square.classList.add（“square”）；
//而不是linehx类
square.style.top=30*i+“px”；
//或者使用：square.classList.add（“lineh”+i）；
//而不是linevx类
square.style.left=30*j+“px”；
//或者使用：square.classList.add（“linev”+j）；
//把它加到黑板上
板子（方形）；
}
}

.Square{
位置：绝对位置；
身高：30；
宽度：30；
背景色：#DCB579；
边框颜色：黑色；
边界宽度：1；
边框样式：实心；
}

---

我会将flex与flex wrap结合使用，这样就不必单独定位每个正方形

#板{
宽度：570px；
高度：570px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
调整内容：灵活启动；
调整项目：灵活启动；
}
.广场{
宽度：30px；
高度：30px；
}
/*以下样式仅用于演示*/
.square:第n个孩子（奇数）{
背景：灰色；
}
.square：第n个孩子（偶数）{
背景：浅灰色；
}

---

我会将flex与flex wrap结合使用，这样就不必单独定位每个正方形

#板{
宽度：570px；
高度：570px；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
调整内容：灵活启动；
调整项目：灵活启动；
}
.广场{
宽度：30px；
高度：30px；
}
/*以下样式仅用于演示*/
.square:第n个孩子（奇数）{
背景：灰色；
}
.square：第n个孩子（偶数）{
背景：浅灰色；
}