<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.head {
background-color: pink;
}
.content {
width: 1200px;
margin: 0 auto;
background-color: aqua;
}
.content h1 {
color: #fff;
padding: 20px 0;
}
.banner {
background-color: blue;
}
.banner img {
width: 1200px;
}
.main {
width: 1170px;
/*height: 20px;*/
padding: 30px 15px;
}
.foot {
background-color: gray;
padding: 20px 0;
}
.f-cont {
background-color: pink;
}
</style>
</head>
<body>
<!-- 头部开始 -->
<div class="head">
<div class="content">
<h1 >我是顶部的内容</h1>
</div>
</div>
<!-- 头部结束 -->
<!-- banner轮播图开始 -->
<div class="banner content">
<!-- <img src="../../01_HTML/images/古诗词.webp" alt=""> -->
<h3>我是轮播图1</h3>
<h3>我是轮播图2</h3>
<h3>我是轮播图3</h3>
</div>
<!-- banner 轮播图结束 -->
<!-- 中心内容开始 -->
<div class="main content">
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
<h3>中心内容</h3>
</div>
<!-- 中心内容结束 -->
<!-- 底部开始 -->
<div class="foot">
<div class="f-cont content">
<p>内容</p>
<p>内容</p>
<p>内容-</p>
<p>内容</p>
<p>内容</p>
<p>内容-</p>、
<p>内容</p>
<p>内容</p>
<p>内容-</p>
</div>
</div>
<!-- 底部结束 -->
</body>
</html>
上述运行结果: