无法使div的背景在其他两个div上可见

我希望“幻灯片”和“目标”div在“mainheader”“maincontent”和“content”div上具有彩色背景。但背景不可见。这是我的代码。幻灯片和目标div中的文本是可见的，但背景不是。无法使div的背景在其他两个div上可见

HTML

<!Doctype html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 

<body> 
    <div class="content"> 
     <header class="mainheader"> 
     <a href="#"> 
      <img src="#" alt=""/><h1>HEADER</h1> 
     </a> 
     <nav> 
      <ul> 
       <li>blank</li> 
       <li>blank</li> 
       <li>blank</li> 
       <li>blank</li> 
      </ul> 
     </nav> 
     </header><!--mainheader--> 
     <div class="maincontent"> 
      <div name="slideshow"> 
       <img sr ="#" alt=""/><h2>Slideshow</h2> 
      </div><!--slideshow--> 
      <div name="destinations"> 
       <h2>Destinations</h2> 
      <div><!--destination--> 
     </div><!--maincontent--> 
    </div> <!--CONTENT--> 

</body> 
</html>

CSS

body { 
    align-content: center; 
    margin: 0px; 
} 
.content { 
    margin: 0px; 
    width: 100%; 
    height: 1000px; 
    background-color: brown; 
} 
.mainheader { 
    width: 100%; 
    height: 30%; 
    color: white; 
    background-color: #4949bf; 
    align-self: center; 
} 

.mainheader nav ul li { 
    list-style: none; 
    display: inline; 
} 
.maincontent { 
    background-image: url(img/transparent.png); 
    width: 80%; 
    position: relative; 
    margin-left: 10%; 
    margin-right: 10%; 
    margin-top: -10%; 
} 
.slideshow { 
    box-shadow: green; 
    width: 70px; 
    height: auto; 
    position: absolute; 
} 
.destinations { 
    background-color: orange; 
    width: 30px; 
    height: auto; 
    position: absolute; 

}

来源

2016-03-02 Vivek Tiwari

将是一个好主意，还包括一些标记你的CSS –

我不认为这是必要的。包括它现在。谢谢。 –

看起来像几个拼写错误给我。标记是否准确反映您的环境？ '

' should be '

<！ - destination - >'你有'.destinations'和'.slideshow'的CSS类样式，但是这些元素改用'name'属性。 –

你的HTML不正确。您已使用name而不是class。更改这些行<div name="slideshow"> <div name="destinations">像这样<div class="slideshow"> <div class="destinations">。

，并更改box-shadow到background-color

.slideshow { 
    box-shadow: green;

这样

.slideshow { 
    background-color: green;

来源

2016-03-02 15:39:43

在旁注中，您应该在CSS中使用div.slideshow和div.destinations。这是很好的做法。 – mcphersonjr

@mcphersonjr有趣的。这是一个好的做法的理由是什么？我认为正好相反，考虑缩小和'.slideshow'不太可能在任何其他非div元素上重用。 –

哦，天哪。我犯这样愚蠢的错误。感谢您抽出时间并指出它。 –

无法使div的背景在其他两个div上可见

回答

相关问题