Simple HTML Chess Game: Build Your Own Board
<html>
<head>
<title>Simple HTML Chess Game</title>
<style>
.board {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 0px;
width: 600px;
height: 600px;
background-color: #ececec;
}
<pre><code> .square {
padding: 0;
background-color: #f0d9b5;
border: 1px solid #7d7d7d;
}
.piece {
width: 50px;
height: 50px;
}
.white {
background-image: url('http://simplechess.org/assets/white-queen.png');
}
.black {
background-image: url('http://simplechess.org/assets/black-queen.png');
}
</style>
</code></pre>
</head>
<body>
<div class="board">
<div class="square white"><div class="piece white"></div></div>
<div class="square black"><div class="piece black"></div></div>
<div class="square white"><div class="piece white"></div></div>
<div class="square black"><div class="piece black"></div></div>
<div class="square white"><div class="piece white"></div></div>
<div class="square black"><div class="piece black"></div></div>
<div class="square white"><div class="piece white"></div></div>
<div class="square black"><div class="piece black"></div></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
<div class="square white"></div>
<div class="square black"></div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmoK 著作权归作者所有。请勿转载和采集!