Question

我想要＆＃34;幻灯片＆＃34;和＆＃34;目的地＆＃34; div将彩色背景放在＃34; mainheader＆＃34; ＆＃34;搜索Maincontent＆＃34;和＆＃34;内容＆＃34; 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;

}

Answer 1

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

将box-shadow更改为background-color

.slideshow {
    box-shadow: green;

像这样

.slideshow {
    background-color: green;

无法在另外两个div

1 个答案: