用纯html和css画带框的棋盘
[英]Draw chessboard with frame with pure html and css
问题描述
I have already finished a chessboard with pure HTML and CSS. But as I'm not a designer, and I can't figure out how to do a simple thing.
我已经用纯 HTML 和 CSS 完成了一个棋盘。但由于我不是设计师，我无法弄清楚如何做一个简单的事情。 I'm trying to make a frame around the board.我正在尝试围绕电路板制作一个框架。 I'm using CSS border property to make a margin in table.chessboard element (code below).我正在使用 CSS 边框属性在table.chessboard元素（下面的代码）中制作边距。 But that margin expands inside the board and decreases the squares on borders.但是该边距在板内扩展并减少了边框上的方块。
What can I do to solve this?我能做些什么来解决这个问题？
Code:代码：
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>
3 个解决方案
解决方案1
4 2016-08-18 00:50:39
I assume you want to make a border around all the cells. 我假设你想在所有细胞周围做一个边界。
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>
解决方案2
0 2016-08-18 00:50:27
in your css: 在你的CSS中：
table.chessboard {
border: 2px solid #000;
}
adjust width as desired ;) 根据需要调整宽度;）
解决方案3
0 2022-03-20 11:17:30
<.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.
相关问题
通过输入选择html：选中-纯CSS - Select html through input:checked - pure css
下拉/切换的标签菜单（纯CSS / HTML） - tab menu that drops/toggles (pure css/html)
动态循环进度栏纯CSS和HTML - Dynamic Circular progress bar pure CSS and HTML
具有纯CSS的HTML5样式音频标签 - HTML5 style Audio tag with pure CSS
在html5画布上逐帧绘制视频并使用滑块进行控制 - Draw video frame-by-frame on html5 canvas and control with slider
使用纯CSS / HTML创建虚拟HTML布局，并将其显示为文本 - Create a dummy HTML Layout with pure CSS / HTML and display it as text
在HTML5画布上绘制CSS列文本 - Draw css columned text on HTML5 canvas
使用纯HTML5 / CSS3创建标签云 - Creating tag cloud using pure HTML5/CSS3
如何使用Pure CSS在HTML元素的顶部创建带有轮廓的三角形笔尖？ - How to create a triangular tip with outline on top of an HTML element with Pure CSS?
纯HTML和CSS可切换下拉菜单 - Pure HTML and CSS toggleable drop-down menu
相关标签