首页请用html+css写一个网格布局的静态页面

请用html+css写一个网格布局的静态页面

时间: 2024-05-13 16:14:49 浏览: 14

好的，我来为你写一个简单的网格布局的静态页面。 HTML代码如下： ```html <!DOCTYPE html> <html> <head> <title>网格布局</title> <style type="text/css"> .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; grid-gap: 10px; padding: 10px; background-color: #f0f0f0; } .grid-item { background-color: #ffffff; padding: 20px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> </div> </body> </html> ``` CSS代码使用了Grid布局，将页面分为两行三列的网格，每个网格之间有10像素的间隔。每个网格内部显示数字，并设置了一些样式。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开，就可以看到静态页面了。