我对CSS或HTML以及在浏览器中显示东西有一些问题。我会从头开始。所以，我试着对这个叫做hero的类进行样式化，但是图像或者min-height不能工作。此外，样式化只适用于vscode中的liveserver插件，而不适用于Chrome/Firefox。我很感激所有的帮助。
null
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>null
您需要将
我只是更改url来尝试您的代码。
null
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>