Question

我编写了一个简单的网站来测试我的技能，到目前为止一切都很顺利，但现在我添加的任何div都没有显示，但我放入div中的任何内容都有！（例如，如果我在div中写“你好”，那么我可以在网页上看到它，但如果我在CSS中更改背景颜色，高度和宽度，则这些更改都不会显示出来）。下面是代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Learning JavaScript</title>

        <meta charset="utf-8"></meta>
        <meta content="text/html; charset=utf-8" http-equiv="Content-type"></meta>
        <meta content="width=device-width, initial-scale=1" name="viewport"></meta>

    <style type="text/css">

    body{
        margin: 0;
        background-color: black;
    }

    #menubar{
        height: 60px;
        width: 100%;
        background-color: #FF8000;
    }
    #menubar img{
        float: left;
    }
    #menubar ul{
        float: left;
        list-style: none;
    }
    #menubar li{
        float: left;
        padding:2px 60px 0 50px;
        color: #2B2A29;
        font-weight: bold;
        border-right: 1px solid black;
    }

    #break{
        clear: both;
    }

    #flagImage{
        position: relative;
        top: -123px;
        z-index: -1;
    }
    #flagImage img{
        width: 100%;
        height: 400px;
    }

    #projectWindow{
        height: 505px;
        width: 385px;
        background-color: orange;
        float: left;
        position: relative;
        left: 200px;
        top: -100px;
    }
    #projectWindow img{
        height: 425px;
        width: 385px;
        margin: 0;
        padding: 0;
    }
    .bottomBanner{
        height: 50px;
        width: 100%;
        background-color: #2B2A29;
        color: orange;
        text-align: center;
        font-size: 2.5em;
        padding: 0;
    }
    .changingText{
        height: 25px;
        width: 100%;
        background-color: grey;
        text-align: center;
        color: white;
        padding: 0;
        position: relative;
        top: -5px;
    }
    #servicesWindow{
        height: 505px;
        width: 385px;
        background-color: orange;
        float: left;
        position: relative;
        left: 400px;
        top: -100px;
    }
    #servicesWindow img{
        height: 425px;
        width: 100%;
    }

    #contact{
        width: 100%;
        height: 200px;
        background color: white;
        position: relative;
        color: white;
        padding: 0;
        margin: 0;
    }


    </style>

    </head>

    <body>
        <div id="container">
            <div id="menubar"> <img src="images/placeholderLogo.jpg"/>
                <ul>
                    <li>PROJECTS</li>
                    <li>SERVICES</li>
                    <li>CONTACT</li>
                    <li>ABOUT</li>
                    <li>PLACEHOLDER</li>
                </ul>
            </div>

            <div id="break"></div>

            <div id="flagImage">
                <img src="images/placeholderImage.jpg"/>
            </div>

            <div id="projectWindow">
                <img src="images/gcon.jpeg"/>
                <div class="changingText">web development / CMS / wordPress</div>
                <div class="bottomBanner">RECENT PROJECTS</div>
            </div>

            <div id="servicesWindow">
                <img src="images/wordpress.jpg"/>
                <div class="changingText">wordPress Blog set-up</div>
                <div class="bottomBanner">OUR SERVICES</div>
            </div>

            <div id="break"></div>

            <div id="contact">
                <form>
                    hello



                </form>
            </div>


        </div>
    </body>
</html>

Answer 1

你的css中有一个拼写错误：

背景颜色为background-color而非background color。

所以改变：

#contact{
    width: 100%;
    height: 200px;
    background-color: white; /* <-- notice the dash */
    position: relative;
    color: white;
    padding: 0;
    margin: 0;
}

div没有显示，但他们的内容是

1 个答案: