Question

我正在使用html，css学习前端开发。我想创建一个菜单栏和上面的菜单栏，我需要添加一个图像（标题图像）。

问题是我没有收到添加到我的图片文件夹中的图片。

这是html代码...... 请帮我解决这个问题。在这里输入代码

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>
         body{
            color:green;
         }
      </style>
      <link href="css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
<div class="container">
    <nav class="navbar navbar-default">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="/images/spmhead.jpg" scale="0" width="100%">
      </a>
  </div>
</nav>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <a class="navbar-brand" href="#">Hello World Mentors </a> 
    <div class="navbar-header navbar-right">
    <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Hell</a></li>
    <li><a href="index.html">About</a></li>
    </ul>

    </div>
    </div>
    </nav>
</div>

      <div class="container">

         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
        </div>
        <div class="container">       
         <div class="row">
            <div class="col-md-6">
               <h2>Android</h2>
               <p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
         </div>
         <br>
         <div class="col-md-6">
            <h2>CSS</h2>
            <p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
         </div>

         <div class="container">

         <div class="col-md-6">
            <h2>Java</h2>
            <marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>

         </div>
         <div class="col-md-6">
            <marquee direction="up">This text will scroll from bottom to up</marquee>
         </div>

     </div>
     </div>
         <div class="container">
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
      </div>
   <script src="js/jquery.js"> </script>
    <script src="js/bootstrap.min.js"> </script>   
   </body>
</html>

Answer 1

请参考图像标记的相对路径。

 <img src="./images/spmhead.jpg" scale="0" width="100%">

Answer 2

必须是<img src="images/spmhead.jpg" scale="0" width="100%">。

Answer 3

最后，我得到了上面发布的问题的解决方案。这是适合我的代码。

 <html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>
         body{
            color:green;
         }
      </style>
      <link href="css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

<div class="container">
    <a href="#">
        <img src="images/spmhead.jpg" class="img-responsive">
      </a>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <a class="navbar-brand" href="#">Hello World Mentors </a> 
    <div class="navbar-header navbar-right">
    <ul class="nav navbar-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Hell</a></li>
    <li><a href="index.html">About</a></li>
    </ul>

    </div>
    </div>
    </nav>
</div>

      <div class="container">

         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
        </div>
        <div class="container">       
         <div class="row">
            <div class="col-md-6">
               <h2>Android</h2>
               <p>Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.</p>
         </div>
         <br>
         <div class="col-md-6">
            <h2>CSS</h2>
            <p>Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
         </div>

         <div class="container">

         <div class="col-md-6">
            <h2>Java</h2>
            <marquee direction="up" scrolldelay=250 vspace=20 hspace=20 bgcolor=grey><p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.</p> </marquee>

         </div>
         <div class="col-md-6">
            <marquee direction="up">This text will scroll from bottom to up</marquee>
         </div>

     </div>
     </div>
         <div class="container">
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
         <div class="jumbotron">
            <h1>Tutorials point</h1> 
            <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 
         </div>
      </div>
   <script src="js/jquery.js"> </script>
    <script src="js/bootstrap.min.js"> </script>   
   </body>
</html>

将BRAND图像作为标题添加到html页面

3 个答案: