在这种情况下如何制作页脚？当我尝试这样做时，页脚文本会与页面顶部重叠。我想要这个页脚在页面的底部。
第二项质询。我如何才能将此页眉的高度和宽度居中，因为现在只有宽度居中。
我的最后一个问题是这个页面布局正确吗？这与外表无关吗。
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; }
body {
font-family: Garamond;
}
header {
background-color: #3CB371;
width: auto;
height: 150px;
color: white;
font-size: 130%;
text-align: center;
padding: 10px;
}
section {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.left {
background-color: #FAEBD7;
position: absolute;
left: 0px;
width: 55%;
height: 450px;
}
.right {
background-color: #FAEBD7;
position: absolute;
right: 0px;
width: 45%;
height: 450px;
}
img {
padding: 3px;
margin: 15px;
border: dotted;
border-radius: 2px;
border-color: #3CB371;
}
footer {
background-color: red;
position: absolute;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2>Some H2<h2>
</header>
<section>
<article>
<div class="right">
<h3>Some H3</h3>
<ol>
<li value="5">Some5 LI</li>
<li value="9">Some9 LI</li>
<li value="20">Some20 LI</li>
<ol>
<a href="url1" target="_blank" rel="noopener">
<li>Some href1 text</li>
<a href="url" target="_blank" rel="noopener">
<li>Some href2 text</li>
</ol>
</ol>
</div>
<div class="left">
<img src="imgurl" alt="Image" class="center">
</div>
</article>
</section>
<footer>
Some footer text
</footer>
</body>
</html>谢谢你的帮助！
首先，您必须关闭像<a>和<h2>这样的标记。你在关闭标签时犯了一些错误。
第二，你必须给你的页脚bottom:0;，如果你不给，你的页脚会因为position:absolute;而被放在奇怪的地方。
最后，您可以使用float:right;，而不是在.right分区中使用position:absolute;right:0;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body {
min-height:600px;
width:100%;
font-family: Garamond;
background-color: #3CB371;
}
header {
width: 100%;
height: 150px;
color: white;
font-size: 130%;
text-align: center;
padding: 10px;
border-bottom:1px solid black;
line-height:150px
}
section {
min-height:450px;
}
.left {
width: 55%;
height: 450px;
float:left;
}
.right {
border-right:1px solid;
width: 45%;
height: 450px;
float:left;
}
img {
padding: 3px;
margin: 15px;
border: dotted;
border-radius: 2px;
border-color: #3CB371;
}
footer {
footer:100px;
height:100px;
border:1px solid black
}
ol{
text-align:center
}
</style>
</head>
<body>
<header>
<h2>Some H2</h2>
</header>
<section>
<article>
<div class="right">
<h3>Some H3</h3>
<ol>
<li value="5">Some5 LI</li>
<li value="9">Some9 LI</li>
<li value="20">Some20 LI</li>
<ol>
<li><a href="url" target="_blank" rel="noopener">Some href1 text</a></li>
<li><a href="url" target="_blank" rel="noopener">
Some href2 text</a></li>
</ol>
</ol>
</div>
<div class="left">
<img src="imgurl" alt="Image" class="center">
</div>
<div style="clear:both"></div>
</article>
</section>
<footer>
Some footer text
</footer>
</body>
</html>
我在你的代码中做了一些更改，还添加了边框，这样可以帮助你轻松理解