html整体页面布局代码
时间: 2023-08-11 12:03:45 浏览: 97
网页布局代码
好的,以下是一个简单的 HTML 页面布局代码示例,使用了 CSS Flexbox 进行布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>页面布局示例</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: row;
}
aside {
background-color: #f2f2f2;
padding: 20px;
flex: 1;
}
article {
background-color: #fff;
padding: 20px;
flex: 3;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>页面标题</h1>
<p>页面副标题</p>
</header>
<main>
<aside>
<h2>侧边栏</h2>
<p>这里是侧边栏内容</p>
</aside>
<article>
<h2>主要内容</h2>
<p>这里是主要内容区域</p>
</article>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
这个示例代码中,整个页面被分为了四个部分:header、main、footer 和两个子元素 aside 和 article。使用了 CSS Flexbox 进行布局,侧边栏和主要内容区域采用了 flex 属性进行布局,使得它们的宽度自适应。通过这种方式,可以实现比较灵活的页面布局。
阅读全文