原文地址：https://segmentfault.com/a/1190000015310484

感想：棋盘是 CSS 画的，棋子是 unicode 字符。

HTML code：

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="index.css">
  4.         <title>棋盘是 CSS 画的，棋子是 unicode 字符。</title>
  5.     </head>
  6.     <body>
  7.         <!-- 定义 dom，一共 8 个列表，每个列表包含 8 个元素 -->
  8.         <!-- 可以搜索象棋符：https://unicode-table.com/cn/sets/-->
  9.         <!-- 博客园：http://www.cnblogs.com/change-oneself/p/5329837.html-->
  10.         <div class="chess">
  11.             <ul>
  12.                 <li>♜</li>
  13.                 <li>♞</li>
  14.                 <li>♝</li>
  15.                 <li>♛</li>
  16.                 <li>♚</li>
  17.                 <li>♝</li>
  18.                 <li>♞</li>
  19.                 <li>♜</li>
  20.             </ul>
  21.             <ul>
  22.                 <li>♟</li>
  23.                 <li>♟</li>
  24.                 <li>♟</li>
  25.                 <li>♟</li>
  26.                 <li>♟</li>
  27.                 <li>♟</li>
  28.                 <li>♟</li>
  29.                 <li>♟</li>
  30.             </ul>
  31.             <ul>
  32.                 <li></li><li></li><li></li><li></li>
  33.                 <li></li><li></li><li></li><li></li>
  34.             </ul>
  35.             <ul>
  36.                 <li></li><li></li><li></li><li></li>
  37.                 <li></li><li></li><li></li><li></li>
  38.             </ul>
  39.             <ul>
  40.                 <li></li><li></li><li></li><li></li>
  41.                 <li></li><li></li><li></li><li></li>
  42.             </ul>
  43.             <ul>
  44.                 <li></li><li></li><li></li><li></li>
  45.                 <li></li><li></li><li></li><li></li>
  46.             </ul>
  47.             <ul>
  48.                 <li>♟</li>
  49.                 <li>♟</li>
  50.                 <li>♟</li>
  51.                 <li>♟</li>
  52.                 <li>♟</li>
  53.                 <li>♟</li>
  54.                 <li>♟</li>
  55.                 <li>♟</li>
  56.             </ul>
  57.             <ul>
  58.                 <li>♜</li>
  59.                 <li>♞</li>
  60.                 <li>♝</li>
  61.                 <li>♛</li>
  62.                 <li>♚</li>
  63.                 <li>♝</li>
  64.                 <li>♞</li>
  65.                 <li>♜</li>
  66.             </ul>
  67.         </div>
  68.     </body>
  69. </html>

CSS code：

  1. html, body, ul {
  2.     margin:;
  3.     padding:;
  4. }
  5. /* body子元素水平垂直居中 */
  6. body{
  7.     height: 100vh;
  8.     display: flex;
  9.     justify-content: center;
  10.     align-items: center;
  11.     background-color: darkslategray;
  12. }
  13. /* 设置.chess容器的样式 */
  14. .chess{
  15.     font-size: 32px;
  16.     background-color: burlywood;
  17.     border: 0.2em solid tan;
  18.     box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
  19. }
  20. /* 画出网格状棋盘 */
  21. .chess ul{
  22.     display: table;
  23. }
  24. .chess ul:nth-child(-n+2) {
  25.     color: black;
  26. }
  27. .chess ul:nth-child(n+7) {
  28.     color: white;
  29. }
  30. .chess ul li{
  31.     display: table-cell;
  32.     width: 1.5em;
  33.     height: 1.5em;
  34.     text-align: center;
  35.     line-height: 1.5em;
  36.     /* 给字符（符号）加粗 */
  37.     font-weight: bold;
  38. }
  39. /* 设置网格交错的颜色 */
  40. .chess ul:nth-child(odd) li:nth-child(even),
  41. ul:nth-child(even) li:nth-child(odd){
  42.     background-color: rgba(0, 0, 0, 0.6);
  43. }

54.纯 CSS 创作一副国际象棋的更多相关文章

  1. 如何用纯 CSS 创作一副国际象棋

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WyXrjz 可交互视频 ...

  2. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  5. 前端每日实战：113# 视频演示如何用纯 CSS 创作一个赛车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...

  6. 75.纯 CSS 创作一支摇曳着烛光的蜡烛

    原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...

  7. 74.纯 CSS 创作一台 MacBook Pro

    原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...

  8. 73.纯 CSS 创作一只卡通狐狸

    原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...

  9. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

随机推荐

  1. Azure Application Gateway (5) Application Gateway SSL Offload配置

    <Windows Azure Platform 系列文章目录> 之前有个客户提出了一个需求,他们的互联网访问的架构分为两种: 1.第一层是使用Azure Application Gatew ...

  2. Vistual Studio XML 智能提示

    开发中经常遇到要和各种各样的 XML 打交道,编辑 XML 文件时最头痛的便是要记住许多 XML 元素名称.属性名称. 幸运的是,Vistual Studio 的 XML 智能提示功能可以大大地减轻这 ...

  3. 卸载QQ,360,迅雷，搜狗

    如题. 以及一切中国的流行软件. 这帮家伙都不是一个人,后面都跟着一帮子助手,杀毒,自我保护,管家,桌面,播放器,等等等等,你也不知道电脑速度为什么会这么慢,但是他变慢了. 今天头天用 360优化速度 ...

  4. 高CPU排查方法分享

    1 软件性能较差,占用CPU较多,往往是由于某段代码逻辑算法不佳导致,那如何在数以千计的函数中找到问题函数呢?2 在使用!runaway命令比较不同时间各线程占用CPU时间,找到CPU时间增涨较多的线 ...

  5. openssl命令实例

    基本知识 1,证书标准 X.509 X.509 - 这是一种证书标准,主要定义了证书中应该包含哪些内容.其详情可以参考RFC5280,SSL使用的就是这种证书标准. X.509的证书文件,一般以.cr ...

  6. 筛选法求n以内所有的素数

    求n以内所有的素数? 筛选法:将2到n中所有的数都列出来,然后从2开始,先化掉所有2的倍数,然后每次从下一个剩下的数(必然是素数)开始,划掉其内所有的倍数,最后剩下来的数就都是素数 例:13  红色为 ...

  7. RPM包安装软件 -- 详细解读

    一.RPM包命名规则 1.RPM包在哪 RPM包在光盘中 2.RPM包命名原则 httpd-2.2.15-15.e16.centos.1.i686.rpm httpd 软件包名 2.2.15 软件版本 ...

  8. SEO优化之“不要轻易使用泛解析”

    原文地址:http://www.chinaz.com/web/2007/0505/8077.shtml 半夜三更的突然想起这个老想提出或者大家都知道的问题! 先续在这里,之后给予全面补充! 什么是泛解 ...

  9. Vue + TypeScript + ElementUI 封装表头查询组件

    前段时间有朋友私信我 Vue + TypeScript 的问题,然后就打算写一篇 Vue + TypeScript 封装组件的文章 正好公司项目中需要封装一个表头查询组件,就拿出来分享一下~ 组件的整 ...

  10. [UE4]碰撞机制

    应用于两种情况: 一.射线追踪,LineTrace 1.射线来自某个Trace Channel 2.Trace Channel 默认有两个:Visibility(不是可见的意思.只是Channel名称 ...