2017-06-10 30 views
1

我创建了一个类,并且我的背景颜色未显示。我使用另一个班级,但它的工作原理,但我不想影响我的标志类,所以我创建了一个交易类。div的背景颜色没有显示何时上课

这里是我的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; 
} 


} 
+0

发送您的网站链接..我检查 – Jana

+0

msmith.php.cs.dixie.edu/finalproject – Mychsmit

+0

再次解释您的问题...无法得到确切的 – Jana

回答

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> 
 

 

 

 
}