原文地址：https://segmentfault.com/a/1190000015310484
感想：棋盘是 CSS 画的，棋子是 unicode 字符。
HTML code：
<html> <head> <link rel="stylesheet" href="index.css"> <title>棋盘是 CSS 画的，棋子是 unicode 字符。</title> </head> <body> <!-- 定义 dom，一共 8 个列表，每个列表包含 8 个元素 --> <!-- 可以搜索象棋符：https://unicode-table.com/cn/sets/ --> <!-- 博客园：http://www.cnblogs.com/change-oneself/p/5329837.html --> <div class="chess"> <ul> <li>♜</li> <li>♞</li> <li>♝</li> <li>♛</li> <li>♚</li> <li>♝</li> <li>♞</li> <li>♜</li> </ul> <ul> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> </ul> <ul> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> </ul> <ul> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> </ul> <ul> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> </ul> <ul> <li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li> </ul> <ul> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> <li>♟</li> </ul> <ul> <li>♜</li> <li>♞</li> <li>♝</li> <li>♛</li> <li>♚</li> <li>♝</li> <li>♞</li> <li>♜</li> </ul> </div> </body> </html>
CSS code：
html, body, ul { margin: 0; padding: 0; } /* body子元素水平垂直居中 */ body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: darkslategray; } /* 设置.chess容器的样式 */ .chess{ font-size: 32px; background-color: burlywood; border: 0.2em solid tan; box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3); } /* 画出网格状棋盘 */ .chess ul{ display: table; } .chess ul:nth-child(-n+2) { color: black; } .chess ul:nth-child(n+7) { color: white; } .chess ul li{ display: table-cell; width: 1.5em; height: 1.5em; text-align: center; line-height: 1.5em; /* 给字符（符号）加粗 */ font-weight: bold; } /* 设置网格交错的颜色 */ .chess ul:nth-child(odd) li:nth-child(even), ul:nth-child(even) li:nth-child(odd){ background-color: rgba(0, 0, 0, 0.6); }