html母版页布局代码
时间: 2023-08-10 21:02:45 浏览: 54
以下是一个简单的 HTML 母版页布局代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>母版页示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.sidebar {
background-color: #eee;
flex-basis: 20%;
padding: 10px;
}
.main {
background-color: #fff;
flex-basis: 75%;
padding: 10px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1>这是一个母版页示例</h1>
</header>
<div class="container">
<aside class="sidebar">
<p>这是侧边栏内容</p>
</aside>
<main class="main">
<h2>这是主要内容区域</h2>
<p>这里可以放置文章内容、表格、图片等等。</p>
</main>
</div>
<footer class="footer">
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
这个示例中,我们定义了一个包含头部、侧边栏、主要内容区域和底部的母版页布局。其中,头部和底部都采用了相同的样式,使用了 `.header` 和 `.footer` 类来定义。侧边栏和主要内容区域使用了 Flex 布局来实现自适应布局,分别使用了 `.sidebar` 和 `.main` 类来定义。在实际使用中,我们可以在此基础上进行修改,根据具体需求添加或删除元素。