首页写一个html 上左中右下布局

写一个html 上左中右下布局

时间: 2023-03-06 07:11:32 浏览: 121

以下是一个简单的 HTML 页面，其中包括上、左、中、右和下的布局。您可以使用CSS来自定义布局的样式。 ```html <!DOCTYPE html> <html> <head> <title>布局示例</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .container { height: 100%; display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 2fr 1fr; grid-template-areas: "header header header" "sidebar content sidebar" "footer footer footer"; } .header { grid-area: header; background-color: #333; color: #fff; text-align: center; padding: 10px; } .sidebar { grid-area: sidebar; background-color: #ccc; padding: 10px; } .content { grid-area: content; background-color: #fff; padding: 10px; } .footer { grid-area: footer; background-color: #333; color: #fff; text-align: center; padding: 10px; } </style> </head> <body> <div class="container"> <div class="header">顶部</div> <div class="sidebar">左侧</div> <div class="content">中间</div> <div class="sidebar">右侧</div> <div class="footer">底部</div> </div> </body> </html> ``` 在此示例中，我们使用 CSS 网格布局来实现布局。`.container` 类表示一个网格容器，其中我们定义了三个行和三个列，并在网格区域中命名了每个区域。然后，我们为每个区域定义了一个类，并使用`grid-area`属性将它们放在正确的网格区域中。最后，我们定义了每个区域的样式，例如背景颜色、文本颜色和内边距。

阅读全文