原文地址：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. 调试PHP错误

    error_reporting(E_ALL & ~E_NOTICE); ini_set('display_errors', "On");

  2. 在windows server上配置java jdk后，可能要些时间生效。

    特别是程序调用java写的bat脚本时.

  3. 【优化】自定义抛出throw 对象练习

    package ltb6w; import java.util.*; public class Bank { private boolean bool=true; private String sel ...

  4. IDEA运行tomcat8.5.35源代码

    前提环境,安装和配置好java1.8+环境,maven,IDEA 1.下载Tomcat源代码:https://tomcat.apache.org/download-80.cgi#8.5.35 2.创建 ...

  5. Temporary ASP.NET Files\root 空间增长太快

    估计是虚拟目录有新的文件,造成项目重新被编译要么把新文件放到另一个目录,要么使用web application而不是web project

  6. 使用StringEscapeUtils对Java中特殊字符进行转义和反转义

    https://blog.csdn.net/zdx1515888659/article/details/84966214 Java中转义字符反斜杠 \ 的代替方法 | repalceAll 内涵解析 ...

  7. Scrapy学习篇（七）之Item Pipeline

    在之前的Scrapy学习篇(四)之数据的存储的章节中,我们其实已经使用了Item Pipeline,那一章节主要的目的是形成一个笼统的认识,知道scrapy能干些什么,但是,为了形成一个更加全面的体系 ...

  8. python urlib2报错gaierror: [Errno 11004] getaddrinfo failed

    gaierror : get address info error,获取网络地址信息错误. url不正确,代理信息配置不正确都会报这个错误. 摘自https://blog.csdn.net/qq_19 ...

  9. [UE4]自定义结构体、类、数据表

    自定义数据表: #pragma once #include "CoreMinimal.h" #include "Engine/UserDefinedStruct.h&qu ...

  10. Oracle安装完成后如何创建表空间及用户

    1.select file_Name from dba_data_files;(查询表空间) 2.create tablespace QUAN datafile '/app/ADMINISTRATOR ...