创建一个html网页,分为上中下三部分,中间又分为左右两部分,要求使用div标签
时间: 2023-05-31 10:07:45 浏览: 65
很高兴回答您的问题。以下是创建一个HTML网页,分为上中下三部分,中间又分为左右两部分,使用DIV标记的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>使用DIV标记的HTML网页</title>
<style>
.container {
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
}
.header, .footer {
height: 80px;
background-color: #333;
color: #fff;
text-align: center;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.left-col, .right-col {
width: 50%;
height: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.left-col {
background-color: #aaa;
}
.right-col {
background-color: #bbb;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部</div>
<div class="content">
<div class="left-col">左侧</div>
<div class="right-col">右侧</div>
</div>
<div class="footer">底部</div>
</div>
</body>
</html>
```
希望这个示例能够帮助您创建您的HTML网页。如果您有任何其他问题,请随时问我。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)