原文地址：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:;

    padding:;

}

/* 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);

}

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. DOM confirm setTimeout url刷新

    console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" ...

  2. Docker-compose ports和expose的区别

    docker-compose中有两种方式可以暴露容器的端口:ports和expose. 1 ports ports暴露容器端口到主机的任意端口或指定端口,用法: ports: - "80:8 ...

  3. 关于Javascript闭包（Closure）

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  4. ALGO-11_蓝桥杯_算法训练_瓷砖铺放(递归)

    问题描述 有一长度为N(<=N<=)的地板,给定两种不同瓷砖:一种长度为1,另一种长度为2,数目不限.要将这个长度为N的地板铺满,一共有多少种不同的铺法? 例如,长度为4的地面一共有如下5 ...

  5. （转）java基础-反射

    原文地址:https://blog.csdn.net/sinat_38259539/article/details/71799078 反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的C ...

  6. tarroni music

    1,tarroni http://www.tarronishoes.it/audio.php 2, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. C语言强化——链表（2）

    目录 链表的应用: 栈 循环队列 C语言实现动态数组 数组实现定长元素个数层次建树 队列实现不定元素个数层次建树 (*) 栈 栈(链表应用) "stack.h" #include ...

  8. T-SQL 事务

    use StudentManager go declare @errorSum int --定义变量,用于累计事务执行过程中的错误 --初始化为0,即无错误 begin transaction beg ...

  9. ORA-22922: 不存在的 LOB 值 可以使用外层嵌套wm_concat()解决

    select kw0408id, sjbh, ksrs, kch, to_char(wm_concat(kcmc)) as kcmc, ksxs, kssc, ksfs, kcxz, xsyx, nj ...

  10. WebSocket 跨域

    http://www.cnblogs.com/joeymary/p/5259464.html