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

Question

因此，Im当前正在创建一个网页，我想在顶部放置一个导航栏，但是由于某种原因，即使我在CSS中将其颜色设置为黑色，也无法显示该导航栏。 我需要标题“ JG.OFFICIAL”位于导航栏内，因为其徽标。 但这似乎效果不佳，我们建议您提供一些建议。

我的网站： https : //jgofficial1.000webhostapp.com/index.html

这是我的代码：

 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%; }

 <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>

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非常高。 您可能需要重新考虑这个数字，因为我不知道有一个20亿左右的z-index的充分理由。

<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 个解决方案

解决方案1
0

解决方案2
0 已采纳 2017-12-11 12:39:38

解决方案3
0 2017-12-11 12:42:31

解决方案4
0 2017-12-11 13:02:30

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

问题描述

4 个解决方案

解决方案1 0

解决方案2 0 已采纳 2017-12-11 12:39:38

解决方案3 0 2017-12-11 12:42:31

解决方案4 0 2017-12-11 13:02:30

解决方案1
0

解决方案2
0 已采纳 2017-12-11 12:39:38

解决方案3
0 2017-12-11 12:42:31

解决方案4
0 2017-12-11 13:02:30