Question

我试图在我的html任务中设置标题横幅但是我无法显示标题图像..或任何背景图像。

这是我的代码

所有文件都位于名为assign1_1的文件夹中，图像位于名为images的文件夹中，css位于名为styles的文件夹中。

css中的其他所有内容都有效，但图像并不适用。帮助将不胜感激！

＆＃13;

    * {
      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;
    }

＆＃13;

    <!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>

＆＃13;

Answer 1

确保当前网页与＆＃34;图像＆＃34;在同一目录中和＆＃34;样式＆＃34;。你的目录树看起来像这样吗？

- assign1_1
- - file.html
- - styles
- - - style.css
- - images
- - - bg.jpg

或assign1_1与其他文件夹位于同一文件夹中？如果是，您可能希望将images/bg.jpg更改为../images/bg.jpg。我使用Google图片的蓝天图像测试了您的代码，它似乎工作正常。您在"Arial"的通用选择器块中缺少分号。

＆＃13;

* {
    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;
}

＆＃13;

<!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>

＆＃13;

我发现奇怪的是，你<footer>嵌套在<div id="footer">内，而不是与<header>和<nav>并列。您可以摆脱嵌套，只需在CSS中执行footer而不是#footer。

Answer 2

首先尝试在元素中进行编辑

首先像这样编辑你的CSS

/ *更改前60px或更改为* /

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: black;
    position: fixed;
    top: 60px;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

然后复制我的HTML代码

<!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>

    <!-- this is added to your code as sample -->
    <div class="header">
            <h1><Center>Header</Center></h1>
    </div>

    <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>

如果您需要在标题类中设置背景图像所需的背景图像，那么这只是一个示例。希望它可以帮到你

标题图像没有出现

2 个答案: