Question

所以我刚刚了解了include函数，我做了一个： include（“header.php”）;和 include（“mainSection.php”）;但它们似乎相互重叠。是用我的CSS或HTML吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Chocoot</title>
</head>
<body>
    <div id="wrapper">
        <?php
           include ("header.php");
           include ("mainSection.php");
         ?>
     </div>
</body>
</html>

header.php

<header id="logoheader">
    <h1 id="logo">Chocoot</h1>
    <div id="orangeborder1">
        <nav>
            <ul>
                <li><a href ="index.php">Home</a></li>
                <li><a href ="chocolate.php">Chocolate</a></li>
                <li><a href ="beans.php">Beans</a></li>
                <li><a href ="history.php">History</a></li>
                <li><a href ="contact.php">Contact</a></li>     
            </ul>
        </nav>
    </div>
        <div id="slider"></div>
        <div id="orangeborder2"></div>
</header>

mainSection.php

    <section id="midSection">

    </section>

CSS：

*{
    margin: 0px;
    padding: 0px;
}

#logoheader{
    width: 1366px;
    height: 30px;
    background-color: #2b292a;
}

body{
    background-color: #171515;
}

#wrapper{
    width: 1366px;
    height: auto;
    margin: auto;
    background-color:#2b292a;

}
header{
    width: 1366px;
    height: 475px;
    float: left;
}
#logo{
    font-family: Georgia;
    font-weight: bold;
    font-style: italic;
    font-size: 32px;
    color: white;
    margin-left: 28px;
    margin-top: -3px;
    margin-bottom: -3px;
    float: left;
}
#orangeborder1{
    width: 1366px;
    height: 30px;
    float: left;
    background-color: #2b292a;
}

#orangeborder1{
    width: 1366px;
    height: 86px;
    background-color: #9b3210;
    float: left;    
}
nav ul li{
    float: left;
    list-style: none;
    margin-top: 28px;
}

nav ul li a{    
    font-family: Georgia;
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
    color: #fff;
}

nav ul li:first-child{
    margin-left: 250px;
}
nav ul li:nth-child(2){
    margin-left: 64px;
}
nav ul li:nth-child(3){
    margin-left: 90px;
}
nav ul li:nth-child(4){
    margin-left: 63px;
}
nav ul li:nth-child(5){
    margin-left: 50px;
}

a{
    text-decoration: none;
}

#slider{
    width: 1366px;
    height: 301px;
    float: left;
    background-color: black;
    color: white;
}
#slider2{
    width: 1366px;
    height: 301px;
    float: left;
    background-color: black;
    color: white;
}

#orangeborder2{
    width: 1366px;
    height: 59px;
    background-color: #9B3210;
    float: left;
}
#midSection{
    width: 1366px;
    height: 570px;
    background-color: #2b292a;
    float: left;
}
#pictureContainer{
    width: 250px;
    height: 570px;
    float: left;

}
footer{
    width: 1366px;
    height: 155px;
    background-color: #433f40;
    float: left;
}

我希望你能帮助我：s

Answer 1

删除＆＃39;身高：30px;＆＃39;在你的CSS的#logoheader块中。所以它看起来像这样：

#logoheader {
width: 1366px;
background-color: #2b292a;
}

这有什么用吗？您不必告诉元素在页面上开始的距离。默认情况下，除非另有说明，否则它们将相互堆叠。

PHP包括相互重叠

1 个答案: