Make me a html example code chess
Here's a basic example of a chess board in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Chess Board</title>
<style>
/* Define the size of each square */
.square {
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 30px;
}
/* Define the colors of the squares */
.white {
background-color: #f0d9b5;
}
.black {
background-color: #b58863;
}
</style>
</head>
<body>
<h1>Chess Board</h1>
<div>
<!-- Create the rows of the board -->
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
</div>
</body>
</html>
This code creates a simple chess board using HTML and CSS. Each square is defined as a separate element with a class of square. The colors of the squares are defined using CSS classes of white and black. The board is created by nesting rows and squares within a containing div.
原文地址: https://www.cveoy.top/t/topic/1Qi 著作权归作者所有。请勿转载和采集!