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

编程问答 2022-08-11

问题描述

在这种情况下如何设置页脚？当我尝试执行此操作时，页脚文本与页面顶部重叠。我想要这个页尾的页脚。

第二个问题。因为现在仅以宽度为中心，所以我该如何居中此标头的高度和宽度。

最后一个问题是此页面布局正确吗？不是外观吗？

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;来代替position:absolute;格中的right:0; .right。

, 
<!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>

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

footerfrontendhtmllayout