首页三栏页面布局使用新HTML5的完整代码不使用div

三栏页面布局使用新HTML5的完整代码不使用div

时间: 2024-09-15 20:06:00 浏览: 50

在HTML5中，如果你想要创建一个简单的三栏页面布局，而不直接使用`<div>`标签，可以利用`<section>`、`<article>`或`<aside>`等元素，它们也是块级元素，适合做容器。以下是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>三栏页面布局</title> <style> body { margin: 0; padding: 0; display: flex; } .column { box-sizing: border-box; /* 包含边框和内填充 */ } .main { width: 60%; } .sidebar-left { width: 25%; background-color: lightblue; } .sidebar-right { width: 25%; background-color: pink; text-align: right; } </style> </head> <body> <header>  </header> <main class="main column">  </main> <aside class="sidebar-left column">  </aside> <aside class="sidebar-right column">  </aside> <footer>  </footer> </body> </html> ``` 在这个例子中，我们使用了CSS的`display: flex;`属性来创建一个弹性布局，然后给每个栏目分配相应的宽度。注意这里的`.column`类设置了`box-sizing: border-box;`使得包含边框和内填充后的总宽度固定。

阅读全文