原文地址：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. Mysql 性能优化6【重要】 索引优化

    b tree索引 myisam 是通过物理位置来查找引用行的 innodb 是通过主键来查找引用行的 索引优化策略 b-tree索引对数据长度有限制,所以text等比较长的列可以建立前缀索引 btre ...

  2. vue项目中， 字段信息为空时不渲染，是真的不渲染吗

    代码 样式,宽度pro_proj 此class设置有宽度,考虑字数如果太多就进入下一行就没有设置高度 样式改为 数据 渲染. 开始以为,null时vue不渲染,然后审查元素,发现渲染的dom是存在的, ...

  3. LaTex与数学公式

    w(t) \longrightarrow \bigg[\frac{\sqrt{2\sigma ^2\beta}}{s+\beta}\bigg]  \longrightarrow \bigg[\frac ...

  4. Linux网路查看工具

    源自:http://mp.weixin.qq.com/s?__biz=MzA3OTgyMDcwNg==&mid=2650625758&idx=1&sn=856dda86869d ...

  5. Python 里面什么时候用一个=，什么时候用两个=

    赋值用=                                                                   i != j != k   >>>> ...

  6. js实现照片墙效果

    本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...

  7. Rabbitmq 安装&启动

    安装socat [root@Aliyun software]# yum -y install epel-release [root@Aliyun software]# yum -y install s ...

  8. Scala的内建控制结构

    Scala中的内建控制机构仅有if.while.for.try.match和函数调用.虽然Scala的基础控制结构少,但也足以支持指令式语言里所有的实质内容.因为它们都能产生值,有助于缩短代码. 程序 ...

  9. [转][C#][WebApi]

    在 WebApi 中获取网页在服务器上的位置可以使用以下两种方式: string filePath = HostingEnvironment.MapPath(string.Format("/ ...

  10. Oracle之ora-01031 insufficient privileges

              解决ora-01031insufficient privileges错误 解决system用户不能登录的问题 alter user system account unlock id ...