純粋な CSS を使用してチェスセットを実装する方法-CSSチュートリアル-php.cn

純粋な CSS を使用してチェスセットを実装する方法

不言

リリース： 2018-07-11 16:50:49

オリジナル

2560 人が閲覧しました

この記事では、純粋な CSS を使用してチェスセットを実装する方法を主に紹介します。これには、必要な友人全員が参照できるように共有します

純粋な CSS を使用してチェスセットを実装する方法

毎日のフロントエンド。演習このシリーズのすべてのソースコードを github からダウンロードしてください:

https://github.com/comehope/front-end-daily-challenges

コード解釈

dom を定義し、合計 8 つのリスト、各リストには以下が含まれます8つの要素:

<p 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>
</p>

ログイン後にコピー

中央表示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkslategray;
}

ログイン後にコピー

コンテナの背景色とサイズを定義します(サイズはフォントサイズによって決まります):

.chess {
    background-color: burlywood;
    font-size: 32px;
}

ログイン後にコピー

グリッド状のチェッカーボードを描画します:

ul {
    display: table;
    margin: 0;
    padding: 0;
}

li {
    display: table-cell;
    width: 1.5em;
    height: 1.5em;
}

ログイン後にコピー

コンテナの色を設定しますグリッドインターレース:

ul:nth-child(odd) li:nth-child(even),
ul:nth-child(even) li:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.6);
}

ログイン後にコピー

チェッカーボード上チェスの駒を配置します:

<p 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>
</p>

ログイン後にコピー

チェスの駒の色を設定します:

ul:nth-child(-n+2) {
    color: black;
}

ul:nth-child(n+7) {
    color: white;
}

ログイン後にコピー

最後に、チェス盤に少し立体感を追加します:

.chess {
    border: 0.2em solid tan;
    box-shadow: 0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3);
}

ログイン後にコピー

これで完了です。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

純粋な CSS を使用してチェス セットを実装する方法

毎日のフロントエンド。演習 このシリーズのすべてのソース コードを github からダウンロードしてください:

dom を定義し、合計 8 つのリスト、各リストには以下が含まれます8つの要素:

純粋な CSS を使用してチェスセットを実装する方法

毎日のフロントエンド。演習このシリーズのすべてのソースコードを github からダウンロードしてください: