HTML 围棋棋盘代码：简单实现棋盘布局

以下是使用 HTML 和 CSS 生成一个围棋棋盘的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>围棋棋盘</title>
    <style>
      .board {
        display: grid;
        grid-template-columns: repeat(19, 1fr);
        grid-template-rows: repeat(19, 1fr);
        width: 600px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid black;
      }

      .board div {
        border: 1px solid black;
        background-color: #f6d79e;
      }

      .board div:before {
        content: "";
        display: block;
        padding-top: 100%;
      }

      .board .line {
        border-color: #00000000;
        background-color: #000000;
      }

      .board .dot {
        border-radius: 50%;
        background-color: #000000;
      }

      .board .stone {
        border-radius: 50%;
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <div class='board'>
      <!-- 生成棋盘格子 -->
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='dot'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>

      <div class='dot'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
      <div class='dot'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>

      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
      <div class='stone'></div>
    </div>
  </body>
</html>

这个代码使用 CSS Grid 布局来创建一个 19x19 的棋盘，每个格子都使用 div 元素来表示。棋盘的背景颜色设置为 #f6d79e，每个格子都有一条黑色边框。

星位使用 div 元素并添加 dot 类来表示，棋子使用 div 元素并添加 stone 类来表示。你可以在代码中添加更多样式来定制棋盘的外观。

注意: 这只是一个简单的示例，它不包括任何棋盘游戏逻辑。如果你想开发一个完整的围棋游戏，你需要添加 JavaScript 代码来处理玩家的动作、棋盘状态和游戏规则。

如果你想让棋盘更美观，可以调整 CSS 样式，例如添加阴影效果、改变棋盘颜色和棋子颜色等。

这个代码只是一个基础，你可以根据自己的需要进行修改和扩展。