首页《HTML5 开发实例大全》——1.3 使用HTML 5的新元素对页面进行分栏设计

《HTML5 开发实例大全》——1.3 使用HTML 5的新元素对页面进行分栏设计

时间: 2023-11-12 08:05:36 浏览: 86

好的，我明白了你的问题。使用HTML5的新元素进行页面分栏设计非常简单，只需要使用新的语义化标签，如```<header>```、```<section>```、```<article>```、```<aside>```和```<footer>```等等。这些标签可以更好地描述页面内容的结构，并且可以帮助搜索引擎更好地理解页面内容。下面是一个使用HTML5新元素进行分栏设计的例子： ``` <!DOCTYPE html> <html> <head> <title>页面分栏设计</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .container section { flex-basis: 30%; margin-bottom: 30px; } .container aside { flex-basis: 20%; margin-bottom: 30px; } .container article { flex-basis: 60%; margin-bottom: 30px; } </style> </head> <body> <header> <h1>网站标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <main> <div class="container"> <section> <h2>栏目1</h2> <p>这是栏目1的内容</p> </section> <aside> <h2>侧边栏</h2> <p>这是侧边栏的内容</p> </aside> <article> <h2>文章标题</h2> <p>这是文章的内容</p> </article> </div> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` 在上面的例子中，我们使用了```<header>```、```<nav>```、```<main>```和```<footer>```等HTML5新元素来表示页面的结构。同时，我们还使用了```<section>```、```<article>```和```<aside>```等标签来分别表示页面的不同部分。最后，我们使用了CSS的Flexbox布局来将页面分为三列，并且让它们自适应浏览器窗口大小。

阅读全文