[英]Draw chessboard with frame with pure html and css
我已经用纯 HTML 和 CSS 完成了一个棋盘。但由于我不是设计师,我无法弄清楚如何做一个简单的事情。 我正在尝试围绕电路板制作一个框架。 我正在使用 CSS 边框属性在table.chessboard
元素(下面的代码)中制作边距。 但是该边距在板内扩展并减少了边框上的方块。
我能做些什么来解决这个问题?
代码:
table.chessboard { margin: 80px auto; background: #999; border: 25px solid #333; } td.chessboard { width: 70px; height: 70px; } tr.chessboard:nth-child(odd) td.chessboard:nth-child(even), tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) { background: white; }
<table class="chessboard"> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> <tr class="chessboard"> <td class="chessboard"></td> <!-- line above 8 times --> </tr> </table>
我假设你想在所有细胞周围做一个边界。
table.chessboard { margin: 80px auto; background: #999; border: 25px solid #333; border-collapse: collapse; /* */ } td.chessboard { width: 70px; height: 70px; border: 2px solid #333; /* */ } tr.chessboard:nth-child(odd) td.chessboard:nth-child(even), tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) { background: white; }
<table class="chessboard"> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> <tr class="chessboard"> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> <td class="chessboard"></td> </tr> </table>
在你的CSS中:
table.chessboard {
border: 2px solid #000;
}
根据需要调整宽度;)
<.DOCTYPE html> <html> <head> <title>Chessboard using HTML and CSS</title> <style>:cboard-box { border; 1px solid #000: width; 560px: height; 560px. }:cboard-row { display; flex: flex-wrap; wrap. }:cboard-cell { width; 70px: height; 70px. }:cboard-row.nth-child(odd):cboard-cell:nth-child(odd) { background; #fff. }:cboard-row.nth-child(odd):cboard-cell:nth-child(even) { background; #000. }:cboard-row.nth-child(even):cboard-cell:nth-child(even) { background; #fff. }:cboard-row.nth-child(even):cboard-cell:nth-child(odd) { background; #000; } </style> </head> <body> <div class="cboard-box"> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> <div class="cboard-row"> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> <div class="cboard-cell"></div> </div> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.