HTML5中footer结构元素不显示的一种原因及解决方案

最新推荐文章于 2024-02-17 12:23:33 发布

weixin_41682106

最新推荐文章于 2024-02-17 12:23:33 发布

阅读量2.8k

点赞数

分类专栏： HTML5 文章标签： HTML5 FOOTER

本文链接：https://blog.csdn.net/weixin_41682106/article/details/79583041

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始的时候，编码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页全知道</title>
    <style>
        header,section,footer{
            height: 200px;
            border: 1px saddlebrown;
        }
    </style>
</head>
<body>
    <header>
        <h1>头部信息</h1>
    </header>
    <article>
        <ul>
            <li>
                <img src="img/美女.jpg" width="136" height="76"/><a href="ulhot.html" target="myf" >美女全知道</a>
            </li>
            <li>
                <img src="img/海贼2.gif" width="136" height="76"/><a href="liqingzhao.html" target="myf" >李清照全知道</a>
            </li>
            <li>
                <img src="img/海贼3.jpeg" width="136" height="76"/><a href="media.html" target="myf" >多媒体全知道</a>
            </li>
        </ul>
        <iframe name="myf" width="780" height="480"src="media.html"/>
        

    </article>
    <footer>
        <h3> footer里的信息</h3>
    </footer>

</body>
</html>

结果就是footer一直都显示不出来，无论是将footer放在article内外都不行，F12直接就没有footer

可是当我删掉article里面的内容时，footer就出来了。于是我先删了无序列表<ul>还是不显示。然后删了<iframe>,显示了！！！

最后我将iframe放到了article外面，并保证在footer后面就正常了

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页全知道</title>
    <style>
        header,section,footer{
            height: 200px;
            border: 1px saddlebrown;
        }
    </style>
</head>
<body>
    <header>
        <h1>头部信息</h1>
    </header>
    <article>
        <ul>
            <li>
                <img src="img/美女.jpg" width="136" height="76"/><a href="ulhot.html" target="myf" >美女全知道</a>
            </li>
            <li>
                <img src="img/海贼2.gif" width="136" height="76"/><a href="liqingzhao.html" target="myf" >李清照全知道</a>
            </li>
            <li>
                <img src="img/海贼3.jpeg" width="136" height="76"/><a href="media.html" target="myf" >多媒体全知道</a>
            </li>
        </ul>
        <footer>
            <h3> footer里的信息</h3>
        </footer>

    </article>
    <iframe name="myf" width="780" height="480"src="media.html"/>

</body>
</html>

这其中的原理还没搞懂，请懂的大神不吝赐教