图像路径

Question

我正在尝试使用Html，CSS设计简历。这样做会在彩色显示上出错，并改变大小。我发送我的zip文件完全实现。有一个图像名称样本，这是设计所需的简历吗？请帮助我。

下面给出的HTML代码：

#main container {
  back ground-color: "#DDD6D5";
  text align: center;
}
#main container >a {
  bgcolor: "#DEB6AD";
  text-decoration: none;
  display: block;
  width: 100%;
  padding: 20px 20px 20px 20px;
}
# horizontal nav {
  width: 200px;
  height: 10px;
  border-style: solid;
  back ground-color: "red";
}
#summary {
  width: auto;
  height: auto;
}
#work experience1 {
  width: 20px;
  height: 20px;
  border-top-width: 0px;
  ;
  border-right-width: 0px;
  border-bottom-width: thick;
  border-top-width: thick;
}
#work experience2 {
  width: 20px;
  height: 20px;
  border-top-width: 0px;
  ;
  border-right-width: 0px;
  border-bottom-width: thick;
  border-top-width: thick;
}
#work experience3 {
  width: 20px;
  height: 20px;
  border-top-width: 0px;
  ;
  border-right-width: 0px;
  border-bottom-width: thick;
  border-top-width: thick;
}
#work experience4 {
  width: 20px;
  height: 20px;
  border-top-width: 0px;
  ;
  border-right-width: 0px;
  border-bottom-width: thick;
  border-top-width: thick;
}
#education {
  width: 700px;
  height: 500px;
}
#certificate {
  width: 400px;
  height: 200px;
}
#language {
  width: 200px;
  height: 400px;
}
#technical skill {
  width: 200px;
  height: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Alexander Krasner-cv</title>
</head>

<link rel="stylesheet" type="text/css" href="style.css">

<body>
  <div id="main container" ;bgcolor="red">
    <p>
      <h1> ALEXANDER KRASNER</h1>
      <h2>Java Developer </h2>
    </p>
  </div>

  <div id="horizontal nav">
    <ul>
      <li>
        <img src="image\mobile.png">
        <b>123456789</b>
        <img src="image\mail.png">
        <b>alexander12@gmail.com</b>
        <img src="image\location.png">
        <b> 15 Jacksonville Road,Middleburg,FL 33486</b>
      </li>
    </ul>
  </div>

  <div style="width:100%;">
    <div style="float:left;width:50%;">
      <div id="summary">
        <h1>SUMMARY</h1>
        <b>Sun certified programmer for java platform   </b>
        <br/>
        <b>over 6 year of IT experience</b>
        <br/>
        <b>excellent java development skill using J2EE,J2SE ,servalet,jdbc,applet ,java bc.</b>
        <br/>
        <b>Strong data base connectivity skills IBM DB2,MS SQL SERVER ,MYSQL,Acess </b>
        <br/>
        <b>Experience encompassess software design,maintainance for custom application
						  .Exclusive OBJECT ORIENTED Experience,OOP/OOD Experience</b>
        <br/>
        <b>Encompassess software design,maintainance for custom application.</b>
        <br/>
      </div>

      <div id="Work Experience1">
        <h1>WORK EXPERIENCE11111</h1>
        <img src="image\date-icon.jpg">
        <h3>SmartSoft Technologies-Florida,USA System Programmer/Analyst</h3>
        <p>
          <h5>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui  officia deserunt Duis aute irure dolor in reprehenderit. sunt in culpa qui officia deserunt Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia. deserunt Duis aute irure dolor in reprehenderit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
			            Vconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
			            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h5>
        </p>
      </div>
      <div id="Work Experience2">
        <h1>WORK EXPERIENCE 2222</h1>
        <img src="image\date-icon.jpg">
        <h3>SmartSoft Technologies-Florida,USA System Programmer/Analyst</h3>
        <p>
          <h5>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
					 deserunt Duis aute irure dolor in reprehenderit.
			         sunt in culpa qui officia deserunt Excepteur sint occaecat 
					 cupidatat non proident, sunt in culpa qui officia.
			           deserunt Duis aute irure dolor in reprehenderit.
			         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
			        Vconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
			         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h5>
        </p>
      </div>

      <div id="Work Experience3">
        <h1>WORK EXPERIENCE 3333</h1>
        <img src="image\date-icon.jpg">
        <h3>SmartSoft Technologies-Florida,USA System Programmer/Analyst</h3>
        <p>
          <h5>Excepteur sint occaecat cupidatat non proident,
					 sunt in culpa qui officia deserunt Duis aute irure dolor in reprehenderit.
			           sunt in culpa qui officia deserunt Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
			         deserunt Duis aute irure dolor in reprehenderit.
			        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
			         Vconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
			          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h5>
        </p>
      </div>

      <div id="Work Experience4">
        <h1>WORK EXPERIENCE 4444</h1>
        <img src="image\date-icon.jpg">
        <h3>SmartSoft Technologies-Florida,USA System Programmer/Analyst</h3>
        <p>
          <h5>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt Duis aute irure dolor in reprehenderit.
			          sunt in culpa qui officia deserunt Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
			          deserunt Duis aute irure dolor in reprehenderit.
			         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
			         Vconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
			          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h5>
        </p>
      </div>
    </div>

    <div style="float:right;width:50%;">
      <div id="education">
        <h1>EDUCATION</h1>
        <img src="image\date-icon.jpg">
        <b><h2>Master Degree in Computer Science</h2></b>
        <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt </h3>
        <b><h2>Bachelor Degree in Computer Science</h2></b>
        <h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt </h3>

      </div>

      <div id="certificate">
        <h1>CERTIFICATE</h1>
        <h3>Sunt in culpa qui officia deserunt Duis aute irure dolor in reprehenderit.
	        sunt in culpa qui officia deserunt Excepteur sint occaecat cupidatat non proident,
	         sunt in culpa qui officia. deserunt Duis aute irure dolor in reprehenderit. Ut enim ad minim veniam</h3>
      </div>

      <div id="Language">
        <h1>LANGUAGE</h1>
        <h3>English,Spanish</h3>
      </div>

      <div id="Technical Skills">
        <h1>TECHNICAL SKILLS</h1>
        <img src="image\CHART.jpg">
        <ul>
          <li>
            <img src="image\red.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\blue.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\yellow.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\green.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\pink.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\br.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
            <img src="image\lightbl.png">
            <b>Programming language:Java j2EE,Sun Java,Visual Basic</b>
            <br/>
          </li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

样本恢复所需的图像

1：

Answer 1

HTML中的

图像路径

你不应该在图像路径中使用反斜杠：

错误：

<img src="image\mobile.png">

莱特：

<img src="image/mobile.png">

Answer 2

评论似乎基本上解决了你的答案。 ID和类可能没有空格，因此# horizontal nav {等元素应为#horizontalnav（无空格）;或者，您可以使用诸如#horizontalNav之类的大写字母或#horizontal-nav之类的连字符。

css代码部分工作？

2 个答案:

图像路径

错误：

莱特：