Question

所以我现在正在创建一个网页，我想在顶部放置一个导航栏，但由于某种原因它没有显示，即使我在CSS中将它的颜色设置为黑色。我需要标题＆＃34; JG.OFFICIAL＆＃34;自徽标以来就在导航内部。但它似乎没有运作良好，一些建议值得赞赏。

我的网站：subnet

这是我的代码：

＆＃13;

h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  height: 40px;
  width: 70px;
}
  body {
  background-image: url("../images/hello.jpg");
  background-size: cover;
  position: fixed;
}
nav {
  color: black;
  height: 60px;
  width: 100%;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">

<nav>
    <div class="header-logo">
        <h1>JG.OFFICIAL</h1>
    </div>
    <ul>
        <li><a href="index.html">HOME</a>
        </li>
        <li><a href="work.html">WORK</a>
        </li>
    </ul>
</nav>

<h2>There's Still a bit of work to be done, come back soon</h2>

＆＃13;

Answer 1

用于设置背景颜色的CSS属性为background或background-color，而非color。

h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  height: 40px;
  width: 70px;
}

body {
  background-image: url("../images/hello.jpg");
  background-size: cover;
  position: fixed;
}

nav {
  background: black;
  height: 60px;
  width: 100%;
}

<nav>
  <div class="header-logo">
    <h1>JG.OFFICIAL</h1>
  </div>

  <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="work.html">WORK</a></li>

  </ul>
</nav>

<h2>There's Still a bit of work to be done, come back soon</h2>

Answer 2

如果那就是您要找的内容，您应该在background: black;中声明nav。

Answer 3

此代码适用于您

h1 {
  color: white;
  font-family: 'Montserrat', sans-serif;
  height: 40px;
  width: 70px;
}

body {
  background-image: url("../images/hello.jpg");
  background-size: cover;
  margin:0;
  padding:0;
}

nav {
  background-color: #e76160;
  height: 60px;
  width: 100%;
}
ul{
  list-style: none;
}
li{
  display: inline-block;
}

<nav>
  <div class="header-logo">
    <h1>JG.OFFICIAL</h1>
  </div>

  <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="work.html">WORK</a></li>

  </ul>
</nav>

<h2>There's Still a bit of work to be done, come back soon</h2>

Answer 4

除背景颜色外还有其他问题。我使用Chrome添加了一些内联样式，可能有助于查看可能的更改。底部还有一个元素z-index，它非常高。你可能想重新考虑这个数字，因为我不知道有一个z-index有20亿的东西。

<html>
  <head>        
    <meta charset="utf-8">
    <title>JG.OFFICAL</title>
    <link rel="stylesheet" href="style.css">        
    <!--fonts-->
    <link href="https://fonts.googleapis.com/css?
    family=Montserrat:600" rel="stylesheet">    
  </head>


  <body data-gr-c-s-loaded="true" cz-shortcut-listen="true">

    <nav>        
      <div class="header-logo" style="
            display: inline-block;
            margin-left: 20px;
            margin-right: 50px;">
        <h1>JG.OFFICIAL</h1>
      </div>

      <ul style="
        display: inline-block;
        margin-left: 650px;">
        <li><a href="index.html">HOME</a></li>
        <li><a href="work.html">WORK</a></li>
      </ul>
    </nav>
    <h2>There's Still a bit of work to be done, come back soon</h2>
    <!-- the rest of your body -->
  </body>

如何在背景上添加导航栏？

4 个答案: