慕清海 2021-06-22 01:07 采纳率: 72.2%
浏览 87
已采纳

为什么会多出一片空白界面

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link type="text/css" href="登录界面.css" rel="stylesheet "><body><!--头部，导航栏--><div class="head">    <nav>        <ul id="head-1">            <li><a  href="#" target="_self">开课吧首页</a></li>            <li><a href="#">创业微学院</a></li>            <li><a href="#">摄影微学院</a></li>            <li><a href="#">微聚</a></li>            <li><a href="#">论坛</a></li>        </ul>        <ul id="head-2">            <li><a href="登录界面.html" target="_self">登录&nbsp;|&nbsp; 注册</a></li>            <li><a href="#">播放记录</a></li>            <li><a href="#">APP下载</a></li>        </ul>    </nav></div><div class="body">    <div class="body-1">        <ul id="ul1">            <li id="li1"></li>            <li><a href="个人中心链接.html">个人中心</a></li>            <li><a href="#">视频播放</a></li>        </ul>        <ul id="ul2">            <li>&#xe66e;</li>            <li>&#xe608;</li>            <li>&#xf012a;</li>            <li>&#xe68e;</li>        </ul>    </div></div><!--尾部div--><div class="top-div">    <p class="div-p-top">top</p></div><footer>    <p class="tail-character">Copyright[表情]2015&nbsp;开课吧&nbsp;kaikeba.com &nbsp;版权所有</p></footer></body></html>

 

 

 

外链式

@charset "UTF-8";*{margin: 0; padding: 0; font-family: 微软雅黑;}.head{width: 100%; height: 46px; background-color: #0a2536;}.head nav li a{text-decoration: none; color: white; line-height: 46px; margin-right:30px;}#head-1{float: left; padding-left: 10pc;}#head-2{float: right; padding-right: 300px;}.head nav li{ display: inline-block; font-size: 20px;}.body{background:url("images/banner01.jpg")no-repeat; width: 100%; height: 675px; position: relative; font-size: 20px;}#li1{background: url("images/LOGO.png")no-repeat; width: 118px; height: 28px; margin-left: 300px; margin-right: 30px; margin-top: 10px }#ul1{float: left; color: white;}#ul1 a{text-decoration: none; color: white; line-height: 50px; margin-right:30px;}.body .body-1 ul li{display: inline-block;}.body-1{ width: 100%; height: 50px; position: absolute; background-color: rgba(250,250,250,0.5);}#ul2{float: right; line-height: 50px; margin-right:160px ;}footer{background-color: #0a2536; width: 100%; height: 100px; position: relative; top: 573px; /*margin-top: 50px;*/}footer .tail-character{color: white; text-align: center; line-height: 100px;}.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ margin-top: 20px; margin-left: 725px; }.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ position: absolute; top: 521px; }.top-div .div-p-top{text-align: center; color: white; line-height: 2;}

 

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2021-06-22 09:00
    关注

    以后发布问题最好用代码块发布。可以提高可读性

    1.你少了head的闭合标签。

    2..body 的background:url 和no-repeat要有空格。

    3.至于是空白说明你的url地址不对。

    <!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="登录界面.css" rel="stylesheet ">
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 微软雅黑;
        }

        .head {
            width: 100%;
            height: 46px;
            background-color: #0a2536;
        }

        .head nav li a {
            text-decoration: none;
            color: white;
            line-height: 46px;
            margin-right: 30px;
        }

        #head-1 {
            float: left;
            padding-left: 10pc;
        }

        #head-2 {
            float: right;
            padding-right: 300px;
        }

        .head nav li {
            display: inline-block;
            font-size: 20px;
        }

        .body {
            background: url("../1623738862\(1\).png") no-repeat;
            width: 100%;
            height: 675px;
            position: relative;
            font-size: 20px;
        }

        #li1 {
            background: url("images/LOGO.png") no-repeat;
            width: 118px;
            height: 28px;
            margin-left: 300px;
            margin-right: 30px;
            margin-top: 10px
        }

        #ul1 {
            float: left;
            color: white;
        }

        #ul1 a {
            text-decoration: none;
            color: white;
            line-height: 50px;
            margin-right: 30px;
        }

        .body .body-1 ul li {
            display: inline-block;
        }

        .body-1 {
            width: 100%;
            height: 50px;
            position: absolute;
            background-color: rgba(250, 250, 250, 0.5);
        }

        #ul2 {
            float: right;
            line-height: 50px;
            margin-right: 160px;
        }

        footer {
            background-color: #0a2536;
            width: 100%;
            height: 100px;
            position: relative;
            top: 573px;
            /*margin-top: 50px;*/
        }

        footer .tail-character {
            color: white;
            text-align: center;
            line-height: 100px;
        }

        .top-div {
            background: url("images/sanjiao.png")no-repeat;
            background-size: cover;
            width: 58px;
            height: 32px;
            /*border: solid yellow;*/
            margin-top: 20px;
            margin-left: 725px;
        }

        .top-div {
            background: url("images/sanjiao.png")no-repeat;
            background-size: cover;
            width: 58px;
            height: 32px;
            /*border: solid yellow;*/
            position: absolute;
            top: 521px;
        }

        .top-div .div-p-top {
            text-align: center;
            color: white;
            line-height: 2;
        }
    </style>
</head>

<body>
    <!--头部，导航栏-->
    <div class="head">
        <nav>
            <ul id="head-1">
                <li><a href="#" target="_self">开课吧首页</a></li>
                <li><a href="#">创业微学院</a></li>
                <li><a href="#">摄影微学院</a></li>
                <li><a href="#">微聚</a></li>
                <li><a href="#">论坛</a></li>
            </ul>
            <ul id="head-2">
                <li><a href="登录界面.html" target="_self">登录&nbsp;|&nbsp; 注册</a></li>
                <li><a href="#">播放记录</a></li>
                <li><a href="#">APP下载</a></li>
            </ul>
        </nav>
    </div>
    <div class="body">
        <div class="body-1">
            <ul id="ul1">
                <li id="li1"></li>
                <li><a href="个人中心链接.html">个人中心</a></li>
                <li><a href="#">视频播放</a></li>
            </ul>
            <ul id="ul2">
                <li>&#xe66e;</li>
                <li>&#xe608;</li>
                <li>&#xf012a;</li>
                <li>&#xe68e;</li>
            </ul>
        </div>
    </div>
    <!--尾部div-->
    <div class="top-div">
        <p class="div-p-top">top</p>
    </div>
    <footer>
        <p class="tail-character">Copyright[表情]2015&nbsp;开课吧&nbsp;kaikeba.com &nbsp;版权所有</p>
    </footer>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型