Question

我创建了一个类，但我的背景颜色没有显示。我使用另一个课程但它有效，但我不想影响我的徽标课程，所以我创建了一个交易课程。

这是我的HTML代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Cloud 9 Vapor
        </title>
        <meta name="ropots" content="noindex">
        <link rel="stylesheet" href = "styles.css" type="text/css" media = "screen" />
        <style>
            .myslides {display:none;}
        </style>
    </head>
    <body id = "bg">
        <div class = "logo">
            <a href = "index.html">
                <img src="cloud-9-vapor-logo-white.png" alt = "Logo for page">
            </a>
        </div>
            <nav>
                <ul>
                    <li><a href = "#signup" > Sign Up </a></li>
                    <li><a href = "#member" > Member Login </a></li>
                    <li><a href = "#about" > About </a></li>
                    <li><a href = "#customer" > Customer Service </a></li>
                </ul>
           </nav>
            <br><br><br><br><br><br><br>
        <div class = "w3-content w3-section" style = "min-width:300px">
            <img class = "myslides w3-animate-top" src = "crew.jpg" style = "width:300px" alt = "slide">
            <img class = "myslides w3-animate-top" src = "bg.jpg" style = "width: 300px" alt = "slider">
    </div>
    <script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("myslides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
    setTimeout(carousel, 2500);
    }
    </script>
    <br>
    <div class = "deals">
        <p>there should be something here</p>
    </div>
</body>

这是我的CSS代码：

body{
margin: 0;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    overflow: hidden;
    height: 80px;

}

li{
    float: right;
    border-right: 1px solid #FFF;
}


li a{
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-size: 2em;
    padding: 14px 16px;
    background-color: #4078A7;
    text-decoration: none;
}

li a:hover{
    background-color: #000;
    color: #4078A7;
}

.active{
    background-color: #FFF;
    color: #4078A7;
}

#bg{
    height: 1000px;
    background-image: url(webbg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.logo{
    margin: 0;
    background-color: #25415E;
    float: left;
    box-shadow: 10px 10px 5px 0 black;
}

.deals{
    position: absolute;
    width: 70px;
    float: left;
    background-color: #25415E;
    height: 40px;
}



@media only screen and (max-width:75em) {

    ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    overflow: hidden;
    height: auto;
    }

li a{
display: block;
color: #FFF;
text-align: center;
font-size: 1.09em;
padding: 8px 10px;
background-color: #4078A7;
text-decoration: none;
}

#bg{
    height: 1550px;
    background-position: 10% 90%;
    background-position: left;
}


}

Answer 1

它确实有效，但是您需要使该元素更大，以便为文本提供足够的位置（因为它绝对定位）

body{
margin: 0;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    overflow: hidden;
    height: 80px;

}

li{
    float: right;
    border-right: 1px solid #FFF;
}


li a{
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-size: 2em;
    padding: 14px 16px;
    background-color: #4078A7;
    text-decoration: none;
}

li a:hover{
    background-color: #000;
    color: #4078A7;
}

.active{
    background-color: #FFF;
    color: #4078A7;
}

#bg{
    height: 1000px;
    background-image: url(webbg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.logo{
    margin: 0;
    background-color: #25415E;
    float: left;
    box-shadow: 10px 10px 5px 0 black;
}

.deals{
    position: absolute;
    width: 240px;
    float: left;
    background-color: #25415E;
    height: 40px;
}

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Cloud 9 Vapor
        </title>
        <meta name="ropots" content="noindex">
        <link rel="stylesheet" href = "styles.css" type="text/css" media = "screen" />
        <style>
            .myslides {display:none;}
        </style>
    </head>
    <body id = "bg">
        <div class = "logo">
            <a href = "index.html">
                <img src="cloud-9-vapor-logo-white.png" alt = "Logo for page">
            </a>
        </div>
            <nav>
                <ul>
                    <li><a href = "#signup" > Sign Up </a></li>
                    <li><a href = "#member" > Member Login </a></li>
                    <li><a href = "#about" > About </a></li>
                    <li><a href = "#customer" > Customer Service </a></li>
                </ul>
           </nav>
            <br><br><br><br><br><br><br>
        <div class = "w3-content w3-section" style = "min-width:300px">
            <img class = "myslides w3-animate-top" src = "crew.jpg" style = "width:300px" alt = "slide">
            <img class = "myslides w3-animate-top" src = "bg.jpg" style = "width: 300px" alt = "slider">
    </div>
    <script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("myslides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
    setTimeout(carousel, 2500);
    }
    </script>
    <br>
    <div class = "deals">
        <p>there should be something here</p>
    </div>
</body>



}

在调用类时不显示div background-color

1 个答案: