原文地址：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. windebug 与 office Home

    https://officecdn.microsoft.com/sg/492350f6-3a01-4f97-b9c0-c7c6ddf67d60/media/zh-CN/HomeStudentRetai ...

  2. 黄聪：保持web页面生成的app一直处于用户登录状态不退出

    用户登录了会员中心,怎么保持登录状态! 由于封壳的内核及组件肯定没有浏览器APP应用那么强大,所以目前暂时的解决方案是: jquery.cookie.js  本文转载至:https://www.cnb ...

  3. Hadoop2.2.0 eclipse插件编译及Ecliipse配置说明（图文版）

    一.引言: 最近在做一个城商行项目的POC测试it版本,涉及到编译Linux64bti的源码和开发插件使用,作为笔记分享给大家. 二.插件编译 Hadoop2x版本的Eclipse插件已经单独抽取成独 ...

  4. Firefox不支持event解决方法

    IE 中可以直接使用event 对象,而FF 中则不可以,解决方法之一如下: var theEvent = window.event || arguments.callee.caller.argume ...

  5. HTML背景图片自适应

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  6. 1118 Birds in Forest （25 分）

    1118 Birds in Forest (25 分) Some scientists took pictures of thousands of birds in a forest. Assume ...

  7. 给VMware下的Linux扩容磁盘空间到根分区（以centos7.0为例）

    一.扩展VMWare硬盘空间 关闭Vmware 的 Linux系统,这样,才能在VMWare菜单中设置: VM -> Settings... -> Hardware -> Hard ...

  8. Toast--报错

    Toast的makeText()方法报错帖上一代码,用Toast来简单处理回调机制.但是Toast的makeText()方法老报错:import android.content.Context;imp ...

  9. [UE4]Transform镜面翻转

  10. linux达人养成计划

    一.命令基本格式: ls -1 详细列表 (ll) -h 人性化显示文件大小 -a 显示所有文件,包括隐藏文件 -d 查看目录属性 -i 显示iNode 二.文件处理命令 mkdir -p [目录名] ...