首页请写一个围棋两人对峙的html

请写一个围棋两人对峙的html

时间: 2024-04-30 11:20:44 浏览: 64

以下是一个简单的围棋对弈的HTML代码示例： ``` <!DOCTYPE html> <html> <head> <title>围棋对弈</title> <style type="text/css"> #board { width: 500px; height: 500px; margin: 0 auto; background-color: #ffcc66; position: relative; } .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #000; } .circle { position: absolute; border-radius: 50%; } .black { background-color: #000; } .white { background-color: #fff; } </style> </head> <body> <div id="board">  <div class="line" style="width: 33.3%; left: 33.3%;"></div> <div class="line" style="width: 33.3%; left: 66.6%;"></div> <div class="line" style="height: 33.3%; top: 33.3%;"></div> <div class="line" style="height: 33.3%; top: 66.6%;"></div>  <div class="circle black" style="top: 50px; left: 50px;"></div> <div class="circle white" style="top: 100px; left: 100px;"></div> <div class="circle black" style="top: 150px; left: 150px;"></div> <div class="circle white" style="top: 200px; left: 200px;"></div> <div class="circle black" style="top: 250px; left: 250px;"></div> <div class="circle white" style="top: 300px; left: 300px;"></div> <div class="circle black" style="top: 350px; left: 350px;"></div> <div class="circle white" style="top: 400px; left: 400px;"></div> </div> </body> </html> ``` 这个代码创建了一个500x500的棋盘，并在上面绘制了棋盘线条和棋子。你可以通过调整CSS样式和添加JavaScript代码来实现对弈的交互功能。

阅读全文