原文地址：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. NDK学习笔记(Add.cpp注释)(一)

    // Add.C // Copyright (c) 2009 The Foundry Visionmongers Ltd. All Rights Reserved. static const char ...

  2. WIN10 网速问题,边下载 边逛论坛 电脑 有点卡

    引用:https://www.chiphell.com/forum.php?mod=viewthread&tid=1961836&extra=page%3D1&mobile=2 ...

  3. Docker的一些概念

    Docker的一些概念 2.1 什么是Docker? 说实话关于Docker是什么并太好说,下面我通过四点向你说明Docker到底是个什么东西. Docker 是世界领先的软件容器平台. Docker ...

  4. Azure REST API (4) 在Python环境下，使用Azure REST API

    <Windows Azure Platform 系列文章目录> 之前遇到的项目中,客户需要在Python环境下,监控Azure VM的CPU利用率,在这里简单记录一下. 笔者的环境是Win ...

  5. 构建Jenkins自动化编译管理环境

    今天研究了一下Jenkins,有了一个粗浅的认识,顺手把构建的过程说一下,后续慢慢补充: (1)Secure CRT 连接到Linux服务器 要注意的一点是,要搞好一个文件传输的路子,否则不好传东西. ...

  6. Java工程师高手之路

    JVM方面 JVM内存结构 堆.栈.方法区.直接内存.堆和栈区别 Java内存模型 内存可见性.重排序.顺序一致性.volatile.锁.final 垃圾回收 内存分配策略.垃圾收集器(G1).GC算 ...

  7. git撤销本地所有未提交的更改

    1. git clean -df2. git reset --hard第一个命令只删除所有untracked的文件,如果文件已经被tracked, 修改过的文件不会被回退.而第二个命令把tracked ...

  8. P1033自由落体

    传送 杯具wa,惨痛的教训————别写一些情况多到要打表的判断,写着写着就wa了 这个题,我主要死在判断上了 第一遍20分的思路:看小车此时跨越几个整数点.因为我求出了此时小车的车头坐标和车尾坐标.然 ...

  9. OpenSSH多路复用Multiplexing配置

    设置 Session Multiplexing 在客户端节点如下配置/etc/ssh/ssh_config 或~/.ssh/config 就可以直接开启 Session Multiplexing 功能 ...

  10. 身高安排方法（基础dfs）

    P1085 时间限制: 0 Sec  内存限制: 128 MB提交: 64  解决: 44[提交][状态][讨论版][命题人:外部导入] 题目描述 Matrix67发现身高接近的人似乎更合得来.Mat ...