zoukankan      html  css  js  c++  java
  • 54.纯 CSS 创作一副国际象棋

    原文地址: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>&#9820;</li>
                    <li>&#9822;</li>
                    <li>&#9821;</li>
                    <li>&#9819;</li>
                    <li>&#9818;</li>
                    <li>&#9821;</li>
                    <li>&#9822;</li>
                    <li>&#9820;</li>
                </ul>
                <ul>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</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>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                    <li>&#9823;</li>
                </ul>
                <ul>
                    <li>&#9820;</li>
                    <li>&#9822;</li>
                    <li>&#9821;</li>
                    <li>&#9819;</li>
                    <li>&#9818;</li>
                    <li>&#9821;</li>
                    <li>&#9822;</li>
                    <li>&#9820;</li>
                </ul>
            </div>
        </body>
    </html>

    CSS code:

    html, body, ul {
        margin: 0;
        padding: 0;
    }
    /* 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);
    }
  • 相关阅读:
    背水一战 Windows 10 (26)
    背水一战 Windows 10 (25)
    背水一战 Windows 10 (24)
    背水一战 Windows 10 (23)
    背水一战 Windows 10 (22)
    背水一战 Windows 10 (21)
    背水一战 Windows 10 (20)
    背水一战 Windows 10 (19)
    背水一战 Windows 10 (18)
    背水一战 Windows 10 (17)
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10606034.html
Copyright © 2011-2022 走看看