时间戳

首页 > 解决方案 > css 中的类不起作用和显示问题

html - css 中的类不起作用和显示问题

问题描述

我在使用 CSS 或 HTML 以及在浏览器中显示内容时遇到了一些问题。我将从头开始。所以，我正在尝试为这个名为 hero 的类设置样式，但图像或最小高度不起作用。此外，样式仅适用于 vscode 中的 liveserver 插件，但不适用于 chrome/firefox。我感谢所有的帮助。

img {
  height: 50rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  color: black;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  padding: 1rem;
  background: blue;
  list-style-type: none;
}
.hero {
  min-height: 90vh;
  background-image: url("/noob_lvl_project-1/img/pexels-veeterzy-303383.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/noob_lvl_project-1/style.css">
    <title>Flourishe Collective</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <h1>Flourish Collective</h1>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Courses</a></li>
            </ul>
        </nav>
    </header>
    <sector class="hero">
        <h2>Want to create a profitable business model with cash?</h2>
        <button>Enroll Course</button>
    </sector>
    <section class="intro">
        <img src="/noob_lvl_project-1/img/pexels-junior-teixeira-2047905.jpg" alt="macbook-pro">
        <h2>Hey there I'm Mikołaj</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, perferendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni tempora aliquid neque quo earum modi quam animi? Necessitatibus, earum.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, repellat veritatis recusandae dolorem illo et.</p>

        </section>
</body>
</html>

标签： htmlcssvisual-studio-code

解决方案

您需要替换sector为section. （sector不存在）

我只是更改网址来尝试您的代码。

img {
  height: 50rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
a {
  color: black;
  text-decoration: none;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  padding: 1rem;
  background: blue;
  list-style-type: none;
}
.hero {
  min-height: 90vh;
  background-image: url("https://www.wallpapers13.com/wp-content/uploads/2016/01/Cool-and-Beautiful-Nature-desktop-wallpaper-image-2560X1600-1600x1200.jpg");
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/noob_lvl_project-1/style.css">
    <title>Flourishe Collective</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <h1>Flourish Collective</h1>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Courses</a></li>
            </ul>
        </nav>
    </header>
    <section class="hero">
        <h2>Want to create a profitable business model with cash?</h2>
        <button>Enroll Course</button>
    </section>
    <section class="intro">
        <img src="/noob_lvl_project-1/img/pexels-junior-teixeira-2047905.jpg" alt="macbook-pro">
        <h2>Hey there I'm Mikołaj</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum, perferendis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magni tempora aliquid neque quo earum modi quam animi? Necessitatibus, earum.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, repellat veritatis recusandae dolorem illo et.</p>

        </section>
</body>
</html>

推荐阅读