我试图在我的 html 作业中添加一个标题横幅，但是我无法让标题图像出现......或任何背景图像。
这是我的代码
所有文件都在名为assign1_1 的文件夹中，图像在名为images 的文件夹中，css 在名为styles 的文件夹中.
CSS 中的其他所有内容都有效，但图像无效。帮助将不胜感激!
* {
padding: 0;
margin: 0;
font-family: Arial
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header{
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("images/bg.jpg") no-repeat;
height: 100%;
width: 97%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li><a href="#topic"> What is eCommerce? </a></li>
<li><a href="#quiz"> eCommerce Quiz </a></li>
<li><a href="#enhancements"> Enhancements made </a></li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
<a href="102102723@student.swin.edu.au">Contact me</a>
</footer>
</div>
</body>
</html>最佳答案
确保当前网页与“图像”和“样式”位于同一目录中。你的目录树是这样的吗？
- assign1_1
- - file.html
- - styles
- - - style.css
- - images
- - - bg.jpg
或者是assign1_1在与其他人相同的文件夹中？您可能想要更改 images/bg.jpg至 ../images/bg.jpg如果是。我使用来自 Google Images 的库存蓝天图像测试了您的代码，它似乎工作正常。您在带有 "Arial" 的通用选择器 block 中缺少分号.
* {
padding: 0;
margin: 0;
font-family: "Arial";
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
header {
text-align: left;
padding: 20px;
margin-top: 35px;
background: url("https://image.freepik.com/free-photo/blue-sky-with-clouds_1232-936.jpg") no-repeat;
height: 100%;
width: 97%;
display:flex;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:white;
}
section{
padding: 20px;
}
body{
background-color: lightblue;
}
li a:hover:not(.active) {
border-bottom: 5px solid lightgreen;
}
.active {
border-bottom: 5px solid green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Index page for assignment" />
<meta name="keywords" content="eCommerce, web" />
<meta name="author" content="102102704" />
<link rel="stylesheet" type="text/css" href="styles/style.css" >
<title>Introduction to eCommerce on the Web</title>
</head>
<body>
<header>
<h1>eCommerce on the Web</h1>
</header>
<nav>
<ul>
<li><a class="active" href="#index"> Home </a></li>
<li><a href="#topic"> What is eCommerce? </a></li>
<li><a href="#quiz"> eCommerce Quiz </a></li>
<li><a href="#enhancements"> Enhancements made </a></li>
</ul>
</nav>
<section>
<br />
<h2>Do you want to learn about eCommerce?</h2>
<p> You have come to the right spot!</p>
Click Here to learn more
</section>
<div id="footer">
<footer>
<a href="102102723@student.swin.edu.au">Contact me</a>
</footer>
</div>
</body>
</html>我发现你有你的 <footer> 很奇怪嵌套在 <div id="footer"> 中, 而不是在 <header> 旁边和 <nav> .你可以摆脱嵌套，只做 footer而不是 #footer在 CSS 中。
关于html - 标题图片不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49396699/