HTML Tetris Grid Code: Basic Structure and Styling
<!DOCTYPE html>
<html>
<head>
<title>Tetris Grid</title>
<style>
body {
background-color: #CCFF99;
}
<pre><code> .tetris-grid {
width: 500px;
height: 500px;
margin: auto;
border: 1px solid black;
}
.row {
height: 50px;
width: 500px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
}
.cell {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: white;
}
</style>
</code></pre>
</head>
<body>
<div class='tetris-grid'>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<pre><code> <div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>
</div>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmeI 著作权归作者所有。请勿转载和采集!