帮我用html写一个网页的框架包括标题栏导航栏中间内容栏分三段下面是页脚,用html和css和div
时间: 2023-05-14 12:06:33 浏览: 126
好的,以下是一个简单的网页框架,包括标题栏、导航栏、中间内容栏和页脚:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
#nav {
background-color: #ccc;
padding: 10px;
text-align: center;
}
#content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
#content div {
flex-basis: 30%;
margin-bottom: 10px;
background-color: #f2f2f2;
padding: 10px;
box-sizing: border-box;
}
#footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>网页标题</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">导航链接1</a></li>
<li><a href="#">导航链接2</a></li>
<li><a href="#">导航链接3</a></li>
</ul>
</div>
<div id="content">
<div>
<h2>内容1</h2>
<p>这是内容1的描述。</p>
</div>
<div>
<h2>内容2</h2>
<p>这是内容2的描述。</p>
</div>
<div>
<h2>内容3</h2>
<p>这是内容3的描述。</p>
</div>
</div>
<div id="footer">
<p>版权信息</p>
</div>
</body>
</html>
```
这个网页框架包括一个标题栏、一个导航栏、一个中间内容栏(分为三段),以及一个页脚。中间内容栏使用了 flexbox 布局,可以自适应不同屏幕大小。
阅读全文