前端日常实践：54#视频演示如何使用纯CSS制作国际象棋
时间：2023-04-02 16:06:21
HTML
效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/WyXrjz互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/czVVNtd源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一共8个列表，每个列表包含8个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:darkslategray;}定义容器的背景颜色和大小（由字体大小决定）：.chess{background-color:burlywood;font-size:32px;}画一个网格状的棋盘：ul{display:table;保证金：0；填充：0；}li{显示：表格单元格；宽度：1.5em；height:1.5em;}settingGridinterlacedcolor:ul:nth-child(odd)li:nth-child(even),ul:nth-child(even)li:nth-child(odd){背景颜色：rgba(0,0,0,0.6);}在棋盘上放置棋子：
设置棋子颜色：ul:nth-child(-n+2){color:black;}ul:nth-child(n+7){color:white;}最后给棋盘加一点立体效果：.chess{border:0.2em所以盖棕褐色;box-shadow:00.3em2em0.4emrgba(0,0,0,0.3);}大功告成！
