この記事では、純粋な CSS を使用してチェス セットを実装する方法を主に紹介します。これには、必要な友人全員が参照できるように共有します
https://github.com/comehope/front-end-daily-challenges
コード解釈
<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>♜</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>
チェスの駒の色を設定します:
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 を使用してカラーカードの効果を実現する方法純粋な CSS を使用して漫画のオウムの効果を実現する方法以上が純粋な CSS を使用してチェス セットを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。