Question

1我是html和css的新手，我在将导航栏放在横幅上方时遇到了麻烦。我希望导航条直接位于图像横幅上方。可能是我放入它的inner-container类正在影响我如何定位它？

＆＃13;

* {
    margin: 0;
    height: 100%;
}

body {
    width: 100%;
}

.img-container {
    background-image: url(restaurants.jpg);
    height: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.inner-container {
    text-align: center;
    position: absolute;
    width: 100%;
    color: #f2f2f2;
    height: auto;
    margin-top: 200px;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul li {
    float: left;
    width: 426px;
    height: 60px;
    background-color: black;
    opacity: .8;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
}

ul li a {
    text-decoration: none;
    color: white;
    display: block;
}

ul li a:hover {
    background-color: red;
}

h1 {
    font-size: 6em;
    font-family: sans-serif;
}

h2 {
    margin-top: -17px;
    font-family: sans-serif;
    font-size: 1.7em;
    text-align: center;
    font-weight: 300;
}

a {
    margin-top: 0px;
    font-size: 1em;
    font-family: sans-serif;
}

@media only screen and (max-width: 920) {
    .inner-container {
        margin-top: 100px;
    }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>All ABout The Buffalo</title>
  <link href="IntroBanner.css" rel="stylesheet" type="text/css">
</head>

<body>




  <div class="img-container">
    <div class="inner-container">



      <h1>All ABout The Buffalo</h1>
      <h2>Where Chicken Is Just The Tip of The Iceberg.</h2>
      <div class="menue">
        <ul>
          <li><a href="Intro.html" class="active">Home</a></li>
          <li><a href="Gallery.html">Gallery</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </div>



    </div>

  </div>



  <p>Heeeeeyyyy</p>


</body>

</html>

＆＃13;

将导航栏放在横幅CSS

0 个答案: