Html 调用类时不显示div背景色_Html_Css

Html 调用类时不显示div背景色

html css

Html 调用类时不显示div背景色,html,css,Html,Css,我已经创建了一个类，但我的背景色没有显示。我使用另一个类，它可以工作，但我不想影响我的logo类，所以我创建了一个deals类以下是我的HTML代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title> Cloud 9 Vapor </title> <m

我已经创建了一个类，但我的背景色没有显示。我使用另一个类，它可以工作，但我不想影响我的logo类，所以我创建了一个deals类

以下是我的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>

它确实可以工作，但您需要将该元素放大，以便有足够的位置放置文本（因为它是绝对定位的）

正文{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
浮动：对；
溢出：隐藏；
高度：80px；
}
李{
浮动：对；
右边框：1px实心#FFF；
}
李阿{
显示：内联块；
颜色：#FFF；
文本对齐：居中；
字号：2em；
填充：14px 16px；
背景色：#4078A7；
文字装饰：无；
}
李娜：停下来{
背景色：#000；
颜色：#4078A7；
}
.主动{
背景色：#FFF；
颜色：#4078A7；
}
#背景{
高度：1000px；
背景图片：url（webbg.jpg）；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.标志{
保证金：0；
背景色：#25415E；
浮动：左；
盒影：10px 10px 5px 0黑色；
}
.交易{
位置：绝对位置；
宽度：240px；
浮动：左；
背景色：#25415E；
高度：40px；
}


云9蒸汽
.myslides{display:none；}














var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“myslides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，2500）；
}


这里应该有东西
}

发送您的网站链接..让我来检查msmith.php.cs.dixie.edu/finalproject再次解释您的问题…无法获得正确答案当我调用deals类时，背景色不显示。您的代码片段可以工作，但当我更改代码时，它就不工作了。我应该取消这个位置，因为它正好位于我的滑块下面吗？我发现了…我是个白痴…这只是一个缓存问题

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;
}


}