HTML5 制作九宫格的方法有很多，这里介绍一种简单的方法，使用 HTML 和 CSS 实现。
1、我们需要创建一个 HTML 文件，然后在文件中添加一个 <div> 元素，用于存放九宫格的内容，接下来，我们需要为这个 <div> 元素添加一个类名，grid。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid"></div>
</body>
</html>
2、接下来，我们需要创建一个 CSS 文件（style.css），并在其中编写样式，我们需要设置 .grid 的宽度和高度，以及外边距，我们可以使用 display: grid; 属性将 .grid 设置为网格容器，接着，我们可以设置网格的列数、行数和间距，我们可以使用 grid-template-areas 属性为每个单元格分配一个区域名称。
.grid {
width: 300px;
height: 300px;
margin: 50px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.grid > div {
background-color: f1f1f1;
padding: 20px;
font-size: 30px;
text-align: center;
}
3、现在，我们需要在 HTML 文件中添加九个 <div> 元素，并为它们分配一个类名，item，我们需要为每个 <div> 元素设置一个 grid-area 属性，以便将其放置在指定的区域。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="item" grid-area="one"></div>
<div class="item" grid-area="two"></div>
<div class="item" grid-area="three"></div>
<div class="item" grid-area="four"></div>
<div class="item" grid-area="five"></div>
<div class="item" grid-area="six"></div>
<div class="item" grid-area="seven"></div>
<div class="item" grid-area="eight"></div>
<div class="item" grid-area="nine"></div>
</div>
</body>
</html>
4、我们可以在 CSS 文件中为每个单元格添加一些样式，例如背景颜色、边框等，这样，我们就完成了一个简单的九宫格布局。
.item {
background-color: 4CAF50; /* Green */
border: none; /* Remove borders */
color: white; /* White text */
text-align: center; /* Centered text */
font-size: 16px; /* Set font size */
}
至此，我们已经完成了一个简单的九宫格布局，接下来，我们可以在这个基础上添加更多的内容和样式，以满足我们的需求。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/197819.html
微信扫一扫 