编程实现下面的功能,只需要写出对应的HTML代码即可。要求: (1)要求使用网格布局; (2)要求写出完整的HTML和CSS代码。 (3)所涉及的元素的宽度和高度可自己设定。边框的宽为1,线型为实线,颜色为黑色即可。
时间: 2024-03-13 18:44:22 浏览: 73
以下是实现要求的HTML和CSS代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网格布局示例</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
border: 1px solid black;
width: 500px;
height: 400px;
}
.item {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>
</body>
</html>
```
以上代码实现了一个网格布局,包含了4行3列共计12个小方块,每个小方块都有1像素宽度的黑色实线边框。整个布局被1像素宽度的黑色实线边框所包围,宽度为500像素,高度为400像素。其中,`.container`类定义了整个网格布局的样式,`.item`类定义了每个小方块的样式。可以根据需要更改样式属性,如宽度、高度、边框线型、颜色等。
阅读全文