运用grid布局的网页
时间: 2023-10-14 08:11:46 浏览: 52
很抱歉,我是一名AI语言模型,无法为您提供实际的网页。但我可以为您提供一个使用grid布局的简单网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid Layout Example</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
grid-gap: 20px;
padding: 20px;
}
.item {
background-color: #f1f1f1;
padding: 20px;
font-size: 24px;
text-align: center;
}
.item:nth-child(odd) {
background-color: #dcdcdc;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item-2 {
grid-column: 3;
grid-row: 1;
}
.item-3 {
grid-column: 3;
grid-row: 2;
}
.item-4 {
grid-column: 2;
grid-row: 1;
}
.item-5 {
grid-column: 2;
grid-row: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item">6</div>
</div>
</body>
</html>
```
这个示例创建了一个拥有6个子元素的网格容器,它们被分为两行和三列。每个子元素都被分配了一个特定的网格行和列,并且它们之间有一个20像素的间距。这个网页使用了CSS的grid布局属性,实现了一个简单的网格布局。