我有这个html

<html lang="en">
  <head>
    <style>.wf-force-outline-none[tabindex="-1"]:focus{
      outline:none;
      }
    </style>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SUSBOOKS</title>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='mdb.dark.min.css') }}" />
    <link rel="stylesheet" href="{{ url_for('static', filename='all.min.css') }}" />
       
    <link href="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/css/das-dynamite-site-5ede7b.webflow.54c285831.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript">
    </script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic,900,900italic" media="all">
    <script type="text/javascript">WebFont.load({
        google: {
          families: ["Merriweather:300,300italic,400,400italic,700,700italic,900,900italic"]  }
      }
                                               );
    </script>
    <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->
    <script type="text/javascript">!function(o,c){
        var n=c.documentElement,t=" w-mod-";
        n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}
      (window,document);
    </script>
    
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
    <style>
      @font-face{
        font-family: 'Circular';
        font-weight: 400;
        src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot);
        src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot?#iefix) format('embedded-opentype'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff2) format('woff2'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff) format('woff'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.ttf) format('truetype'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.svg) format('svg');
      }
      @font-face{
        font-family: 'Circular';
        font-weight: 700;
        src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot);
        src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot?#iefix) format('embedded-opentype'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff2) format('woff2'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff) format('woff'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.ttf) format('truetype'),
          url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.svg) format('svg');
      }
      body {
  background-color:#000000 ;
      }
      .tab {
            display: inline-block;
            margin-left: 40px;
        }
        .wrapper {
        width: 100%;
        max-width: 31.25rem;
        margin: 6rem auto;
        padding: 15px;
        }

        .label {
        font-size: .625rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: +1.3px;
        margin-bottom: 1rem;
        }
        .btn-primary {
  color: var(--button-color);
  background-color: var(--button-background-color);
  border-radius: var(--border-radius);
}

.btn-primary:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.btn-primary:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  opacity: .5;
}

    </style>
  </head>
  <body class="body">
    <div class="navbar-logo-left wf-section">
      <div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar-logo-left-container shadow-three w-nav">
        <div class="container">
          <div id="Navbar" class="navbar-wrapper">
            <a href="#" class="navbar-brand w-nav-brand">
              <img src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png" loading="lazy" sizes="(max-width: 479px) 63vw, 225px" width="225" srcset="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-500.png 500w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-800.png 800w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png 1085w" alt="">
            </a>
            <nav role="navigation" class="nav-menu-wrapper w-nav-menu">
              <ul role="list" class="nav-menu-two w-list-unstyled">
                <li>
                  <a href="/" aria-current="page" class="nav-link w--current">
                    <span class="text-span">Home
                    </span>
                  </a>
                </li>
                <li class="list-item">
                  <div data-hover="true" data-delay="0" class="nav-dropdown w-dropdown">
                    <div class="nav-dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
                      <div class="nav-dropdown-icon w-icon-dropdown-toggle" aria-hidden="true">
                      </div>
                      <div class="text-block">
                        <span class="text-span-2">Genres
                        </span>
                      </div>
                    </div>
                    <nav class="nav-dropdown-list shadow-three mobile-shadow-hide w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0">
                      <a href="/drama" class="w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Drama
                        </span>
                      </a>
                      <a href="/fantasy" class="dropdown-link w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Fantasy
                        </span>
                      </a>
                      <a href="/mystery" class="dropdown-link-2 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Mystery
                        </span>
                      </a>
                      <a href="/comedy" class="dropdown-link-3 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Comedy
                        </span>
                      </a>
                      <a href="/adventure" class="dropdown-link-4 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Adventure
                        </span>
                      </a>
                      <a href="/action" class="dropdown-link-5 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Action
                        </span>
                      </a>
                      <a href="/teen" class="dropdown-link-6 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Teen
                        </span>
                      </a>
                      <a href="/romance" class="dropdown-link-7 w-dropdown-link" tabindex="0">
                        <span class="text-span-3">Romance
                        </span>
                      </a>
                    </nav>
                  </div>
                </li>
                <li>
                  <div class="nav-divider">
                  </div>
                </li>
                <li class="mobile-margin-top-10">
                  <a href="/search" class="btn btn-primary mb1 black bg-white"><span class="text-span-2">Search
                </span>
                  </a>
                </li>
              </ul>
            </nav>
            <div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
              <div class="w-icon-nav-menu">
              </div>
            </div>
          </div>
        </div>
        <div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0">
        </div>
      </div>
    </div>
    <div style="text-align: center;">
      <h2 style="text-align: center;">
        <span style="color: #ffffff;">Popular Books
        </span>
      </h2>
    </div>
    <div class="container"style="text-align: center;">
      <div class="row">
        {% for item in data %}
        <div class="col-lg-2 col-md-3 col-sm-5">
          <div style="border-radius:20px;" class="card h-1 mb-2">
            <a href="api/default?query={{item.name}}" names="{{ item.name }}" class="ripple">
              <img style="border-radius:20px;" class="card-img-top img-fluid" names="{{ name }}" src={{item.cover}} alt="{{ name }}" width="1500px" height="2250px" onerror="this.onerror=null; this.src='../static/default.png'" />
            </a>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812513324418518"
            crossorigin="anonymous">
    </script>
    <!-- lower banner -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-5812513324418518"
         data-ad-slot="1770889507"
         data-ad-format="auto"
         data-full-width-responsive="true">
    </ins>
    <script>
      (adsbygoogle = window.adsbygoogle || []).push({
      }
                                                   );
    </script>
    <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="SUSTEAM" data-description="Support me on Buy me a coffee!" data-message="Thanks for all the support !!" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18">
    </script>
    <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63b8e36b0f5b782ef248d8ab" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
    </script>
    <script src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/js/webflow.efb10e0b9.js" type="text/javascript">
    </script>
    <!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
  </body>
  <footer style="margin-top: 200px;" class="bg-dark text-center">
    <div class="text-center p-3" style="background-color:#000000">
      <p style="color: white">SusBooks.com
      </p>
      <p style="color: white">Powered by 
        <img class="px-2" src="{{ url_for('static', filename='vexer.png') }}" style="width: 150px">
      </p>
    </div>
  </footer>
  <div id="ed73d0f4-3465-4dc6-87a9-e49c622764bb" style="display: block !important; z-index: 2147483647 !important;">
  </div>
</html>

我的导航栏在浏览器中是正确的，白色文本和黑色背景，但在移动的上导航栏背景变成白色，文本保持白色。我怎么去改变手机导航栏背景，以配合桌面导航栏。我已经尝试了几个小时，仍然不能弄清楚如何改变手机导航栏的背景。

3条答案

按热度按时间

byqmnocz1#

我不明白为什么你会得到这个错误。因为你没有@媒体屏幕和（最小宽度），只有一个主颜色改变

body {
     background-color:#000000 ;
  }

所以我能提供的唯一的东西（因为我已经运行了这段代码，它仍然是黑色的），如果这是你想要的，那么它的工作。
增加：

body {
   color: #fff;
  }

颜色用于文本，它只适用于文本：）。
如果你是在自己的手机上测试，你可能想测试隐姓埋名或删除您的历史记录的网站（只有）保持您的密码等，然后再试一次。
你也可以在它混乱的时候试试这个：

@media screen and (min-width 1000px)

改变1000px到它不工作的点，改变颜色到你想要的。或者任何事情。
希望这有帮助!：）

赞(0）回复(0）举报 2023-01-14

fjaof16o2#

你的问题似乎漏掉了很多信息。

CSS变量在哪里定义？
1.是不是有些脚本（javascript）影响了风格？
1.这似乎不是HTML，而是某种模板语言（可能是Handlebars），因为它包含一个for循环{% for items in data %}和一个{{name}}引用？
1.你有没有检查过你的浏览器是否有相同的配色方案设置？我怀疑一个是暗模式，一个是亮模式。
要在CSS中为元素着色，只需通过className或id选择元素，然后应用background-color: black。
就你而言，我相信你可以

.navbar-logo-left-container.shadow-three {
    background-color: black;
}

否则您可以使用

.navbar-logo-left-container {
    background-color: black !important;
}

您需要包含!important，因为为该元素创建的许多样式稍后会被覆盖。
如果没有进一步的消息，我就帮不了你。
注：我尝试在浏览器（基于chrome）中运行，导航栏是黑色的。

ne5o7dgx3#

通过添加

.nav-menu-two {
    background-color: black !important;
}

在科斯比的帮助下

css 网页浏览器上的导航栏为黑色，但移动的上的导航栏为白色

3条答案

相关问题

热门标签

最新问答