Html 在这种情况下，如何制作页脚以及如何使图像居中？_Html_Css_Layout_Frontend_Footer

Html 在这种情况下，如何制作页脚以及如何使图像居中？

html css layout

Html 在这种情况下，如何制作页脚以及如何使图像居中？,html,css,layout,frontend,footer,Html,Css,Layout,Frontend,Footer,在这种情况下，如何制作页脚？当我尝试这样做时，页脚文本与页面顶部重叠。我想把这个页脚放在页面的底部第二个问题。由于现在仅以宽度为中心，如何将此标题的高度和宽度居中我的最后一个问题是这个页面布局正确吗？这不是外表的问题 html{宽度：100%；高度：100%；边距：0；填充：0；} 正文{宽度：100%；高度：100%；边距：0；填充：0；} 身体{ 字体系列：Garamond； } 标题{ 背景色：#3CB371；宽度：自动；高度：150像素；颜色：白色；字体大小：130%；文

在这种情况下，如何制作页脚？当我尝试这样做时，页脚文本与页面顶部重叠。我想把这个页脚放在页面的底部

第二个问题。由于现在仅以宽度为中心，如何将此标题的高度和宽度居中

我的最后一个问题是这个页面布局正确吗？这不是外表的问题

html{宽度：100%；高度：100%；边距：0；填充：0；}
正文{宽度：100%；高度：100%；边距：0；填充：0；}
身体{
字体系列：Garamond；
}
标题{
背景色：#3CB371；
宽度：自动；
高度：150像素；
颜色：白色；
字体大小：130%；
文本对齐：居中；
填充：10px；
}
部分{
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.左{
背景色：#FAEBD7；
位置：绝对位置；
左：0px；
宽度：55%；
高度：450px；
}
.对{
背景色：#FAEBD7；
位置：绝对位置；
右：0px；
宽度：45%；
高度：450px；
}
img{
填充：3倍；
利润率：15px；
边框：虚线；
边界半径：2px；
边框颜色：#3CB371；
}
页脚{
背景色：红色；
位置：绝对位置；
}


标题
一些H2
一些H3
大约5里
大约9 li
大约20里
一些href1文本
一些href2文本
一些页脚文本

首先，您必须关闭标签，如

和

。关于结束标记，您犯了一些错误

第二，你必须给出

bottom:0到你的页脚，如果你不这样做，你的页脚将被放置在某个奇怪的地方，因为位置：绝对
最后，您可以使用float:right而不是给出位置：绝对右侧：0。右侧分区中的code>。
首先，您必须关闭
和
等标记。关于结束标记，您犯了一些错误
<!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>

第二，你必须给出bottom:0到你的页脚，如果你不这样做，你的页脚将被放置在某个奇怪的地方，因为位置：绝对
最后，您可以使用float: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>

标题
*{
填充：0；
保证金：0；
框大小：边框框；
}    
身体{
最小高度：600px；
宽度：100%；
字体系列：Garamond；
背景色：#3CB371；
}
标题{
宽度：100%；
高度：150像素；
颜色：白色；
字体大小：130%；
文本对齐：居中；
填充：10px；
边框底部：1px纯黑；
线高：150px
}
部分{
最小高度：450px；
}
.左{
宽度：55%；
高度：450px；
浮动：左；
}
.对{
右边框：1px实心；
宽度：45%；
高度：450px；
浮动：左；
}
img{
填充：3倍；
利润率：15px；
边框：虚线；
边界半径：2px；
边框颜色：#3CB371；
}
页脚{
页脚：100px；
高度：100px；
边框：1px纯黑
}
ol{
文本对齐：居中
}
一些H2


一些页脚文本

我对您的代码做了一些更改，并添加了边框，这样可以帮助您轻松理解

标题
*{
填充：0；
保证金：0；
框大小：边框框；
}    
身体{
最小高度：600px；
宽度：100%；
字体系列：Garamond；
背景色：#3CB371；
}
标题{
宽度：100%；
高度：150像素；
颜色：白色；
字体大小：130%；
文本对齐：居中；
填充：10px；
边框底部：1px纯黑；
线高：150px
}
部分{
最小高度：450px；
}
.左{
宽度：55%；
高度：450px；
浮动：左；
}
.对{
右边框：1px实心；
宽度：45%；
高度：450px；
浮动：左；
}
img{
填充：3倍；
利润率：15px；
边框：虚线；
边界半径：2px；
边框颜色：#3CB371；
}
页脚{
页脚：100px；
高度：100px；
边框：1px纯黑
}
ol{
文本对齐：居中
}
一些H2


一些页脚文本

我对您的代码做了一些更改，还添加了边框，这样当我更改位置：绝对和右侧：0为浮动：右侧，然后我的所有页面都会向上并剪切一些文本等。底部：0在页脚中工作，但如何防止它与节标记重叠？@grtyz您使用的位置：绝对；把你的部分放在中间，对吗？所以这不是最好的居中方法。我编辑了你的代码一点，但我忘了告诉你，你必须改变你的居中风格。只需删除您所在部分的CSS内容并添加display:table；边距：0自动
。当我将位置：绝对和右侧：0更改为浮动：右侧时，我的所有页面都会向上并剪切一些文本等。底部：0在页脚中工作，但如何防止它与节标记重叠？@grtyz您使用了位置：绝对；把你的部分放在中间，对吗？所以这不是最好的居中方法。我编辑了你的代码一点，但我忘了告诉你，你必须改变你的居中风格。只需删除您所在部分的CSS内容并添加display:table；边距：0自动
。在样式中添加此css。css文件