2016-05-12 2 views
-1

enter image description here Я изучаю разработку переднего конца с использованием html, css. Я хочу создать меню и над панелью меню мне нужно добавить изображение (изображение заголовка).Добавление изображения BRAND в виде заголовка на страницу html

Проблема: я не получаю изображение, которое добавлено в папку с изображениями. enter image description here

и это код 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> 
+0

Что локальный URL вы используете? Если на случай это что-то вроде localhost: 80/learning/bootstrap .... И вы используете/в начале вашего пути к изображению, тогда ваше изображение не будет загружаться, так как оно будет выглядеть в неправильном каталоге. Возможно, удалите ведущую косую черту с пути изображения. – Stuart

+1

Удалите ведущий '/' в вашем пути '/ images/spmhead.jpg'. Кроме того, помните, что ваш HTML недействителен без элемента 'title'. –

+1

Начните использовать инструменты разработчика, откройте консоль, проверьте путь и т. Д. –

ответ

0

Наконец-то я получил решение по вопросу, который я опубликовал выше. Это код, который работал для меня.

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

This is what i needed... Now can anybody help me to make the image of same size as the menu bar container

1

См тег изображения с относительным путем.

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

0

Это должно быть <img src="images/spmhead.jpg" scale="0" width="100%">.

+0

После внесения всех изменений, упомянутых здесь, я все еще получаю ту же проблему. Я приложил скриншот к выходу после внесения изменений, упомянутых вами всеми – vinay

+0

, вы уже проверили имя файла или расширение файла? и может предоставить скриншот ошибки консоли на инструментах разработчика. (нажмите f12). –

+0

Я использую редактор sublime text 2. Поэтому я не знаю ни одной ошибки. Ya имя файла .jpg в папке с изображениями. – vinay

Смежные вопросы