html-谁能帮我找到为什么我的英雄图像在CSS中不起作用？-堆栈溢出

顺晟科技

2022-10-19 11:36:06

我是一个初学者，每次看完教程后，我还是不明白为什么我的图像不能在CSS中工作。在此附上我的Html和CSS代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Responsive website</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@3.0.0/reset.min.css" />
    <link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
 <header>
    <nav class="navbar">
        <div class="brand-title">Brand Name</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
    </nav>
    <div class="hero">
    </div>
 </header>
      <script src="/Assets/main.js" defer></script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Responsive website</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@3.0.0/reset.min.css" />
    <link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
 <header>
    <nav class="navbar">
        <div class="brand-title">Brand Name</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
    </nav>
    <div class="hero">
    </div>
 </header>
      <script src="/Assets/main.js" defer></script>
</body>

顺晟科技：

尝试在标头选择器所在的属性中添加一个选项卡。

您可以使用vh（视口高度）而不是百分比来实现此目的-请在以下位置了解有关视口单元的更多信息:fun with viewport units

视口高度(vh)-占整个视口高度的百分比。10VH将解析为当前视口高度的10%。

尝试更改标题CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Responsive website</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@3.0.0/reset.min.css" />
    <link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
 <header>
    <nav class="navbar">
        <div class="brand-title">Brand Name</div>
        <a href="#" class="toggle-button">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </a>
        <div class="navbar-links">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
    </nav>
    <div class="hero">
    </div>
 </header>
      <script src="/Assets/main.js" defer></script>
</body>

检查css是否正常工作，例如，将主体背景设置为红色，检查图像是否为jpg或jpeg格式。

上一篇：JavaScript-++两个输出相下一篇：Python-使用Selenium