如何用純CSS實現一副國際象棋

來源：懂視網責編：小采時間：2020-11-27 18:47:53

如何用純CSS實現一副國際象棋

如何用純CSS實現一副國際象棋:這篇文章主要介紹了關于如何用純CSS實現一副國際象棋，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：https://github.com/comehope/front-end-daily-challen

推薦度：

點擊下載本文 文檔為doc格式

導讀如何用純CSS實現一副國際象棋:這篇文章主要介紹了關于如何用純CSS實現一副國際象棋，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下源代碼下載每日前端實戰系列的全部源代碼請從 github 下載：https://github.com/comehope/front-end-daily-challen

這篇文章主要介紹了關于如何用純CSS實現一副國際象棋，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

3035574702-5b25da43a547a_articlex[1].png

源代碼下載

每日前端實戰系列的全部源代碼請從 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>♜</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);
}

大功告成！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何用純CSS實現一副國際象棋

推薦度：

點擊下載本文 文檔為doc格式

標簽：國際象棋實現實現一

熱門焦點

如何用純CSS實現一副國際象棋

如何用純CSS實現一副國際象棋

源代碼下載

代碼解讀

如何用純CSS實現一副國際象棋

最新推薦

猜你喜歡

熱門推薦