以前有效的链接现在无效

Question

所以我在 html5 中为一个学校项目制作了一个网页，我之前工作的一些 hyperlink 已经完全损坏，以至于 a:hover 属性无效。

这是我的“关于”页面的确切代码（包括评论），左侧的 hyperlinks 在该页面上起作用：

@charset "UTF-8";
/* CSS Document */

#container {
 width:1024px;
 height:800px; 
 background-image:url(Images/All%20Pages/Background.png);
}

header{
 width:1024px;
 height:100px;
 text-align:left;
 font-family:Georgia, "Times New Roman", Times, serif;
 background-image:url(Images/All%20Pages/Top_Banner.png);s
 display:inline;
}

footer{
 width:1024px;
 height:80px;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
 background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
 width:869px;
 height:620;
 padding-left:155px;
 padding-bottom:80px;
 position:absolute;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
}

h2{
 color:#FFF;
}

h4{
 color:#FFF;
}

p{
 color:#FFF;
}

#left_bar{
 background-image:url(Images/All%20Pages/Sidebar.png);
 height:700px;
 width:155px;
 text-align:center;
}

a{
 text-decoration: none;
 color:#FFF;
}

a:hover{
 color:#000;
 text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="About.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">

    <header>
                 <div style="line-height:5%;">
        <br>
     </div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
    </header>
                    <!-- CONTENT DIV HERE -->
                
       <div id="left_bar">
                            <br />
                            <h2><a href="#" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>


      <footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>
 <!--<div style="border-left:1px solid #000;height:500px"></div>
  for vertical line -->

这是我主页的完整代码，只有 link 返回主页的代码有效：

@charset "UTF-8";
/* CSS Document */

#container {
 width:1024px;
 height:800px; 
 background-image:url(Images/All%20Pages/Background.png);
}

header{
 width:1024px;
 height:100px;
 text-align:left;
 font-family:Georgia, "Times New Roman", Times, serif;
 background-image:url(Images/All%20Pages/Top_Banner.png);s
 display:inline;
}

footer{
 width:1024px;
 height:80px;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
 background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
 width:869px;
 height:620;
 padding-left:155px;
 padding-bottom:80px;
 position:absolute;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
}

h2{
 color:#FFF;
}

h4{
 color:#FFF;
}

p{
 color:#FFF;
}

#left_bar{
 background-image:url(Images/All%20Pages/Sidebar.png);
 height:700px;
 width:155px;
 text-align:center;
}

a{
 text-decoration: none;
 color:#FFF;
}

a:hover{
 color:#000;
 text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">
 
    <header>
                 <div style="line-height:5%;">
        <br>
     </div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
    </header>
                         
                                                    <div id="content">
                                                    <h2> Hello and welcome to [Title Goes Here], <br  /> 
                                                    one adventure in design, from websites to photos and beyond!</h2>
                                                     <div style="line-height:217px;">
                 <br />
              </div>
                      <img src="Images/Front Page/Landscape.png" />
                      </div>
                
       <div id="left_bar">
                            <br />
                            <h2><a href="About.html" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>
   
      <footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>

任何答案都将不胜感激，因为我还没有发现任何错误。预先感谢您给我的任何建议

Answer 1

由于 padding-left，您的#content 元素覆盖在您的#left_bar 元素之上。您可以改用 margin-left。

@charset "UTF-8";
/* CSS Document */

#container {
 width:1024px;
 height:800px; 
 background-image:url(Images/All%20Pages/Background.png);
}

header{
 width:1024px;
 height:100px;
 text-align:left;
 font-family:Georgia, "Times New Roman", Times, serif;
 background-image:url(Images/All%20Pages/Top_Banner.png);s
 display:inline;
}

footer{
 width:1024px;
 height:80px;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
 background-image:url(Images/All%20Pages/Bottom_Border.png);
}

#content{
 width:869px;
 height:620;
 margin-left:155px;
 padding-bottom:80px;
 position:absolute;
 font-family:Georgia, "Times New Roman", Times, serif;
 text-align:center;
}

h2{
 color:#FFF;
}

h4{
 color:#FFF;
}

p{
 color:#FFF;
}

#left_bar{
 background-image:url(Images/All%20Pages/Sidebar.png);
 height:700px;
 width:155px;
 text-align:center;
}

a{
 text-decoration: none;
 color:#FFF;
}

a:hover{
 color:#000;
 text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Front_Page.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[Title Goes Here]</title>
</head>

<body>
<div id="container">
 
    <header>
                 <div style="line-height:5%;">
        <br>
     </div>
                <h2><a href="Title Goes Here.html" id="current">[Title Goes Here]:</a></h2>
                <h4>Adventures in Design</h4>
    </header>
                         
                                                    <div id="content">
                                                    <h2> Hello and welcome to [Title Goes Here], <br  /> 
                                                    one adventure in design, from websites to photos and beyond!</h2>
                                                     <div style="line-height:217px;">
                 <br />
              </div>
                      <img src="Images/Front Page/Landscape.png" />
                      </div>
                
       <div id="left_bar">
                            <br />
                            <h2><a href="About.html" id="current">ABOUT</a></h2>
                            <br />
                            <h2><a href="#">PORTFOLIO</a></h2>
                            <br />
                            <h2><a href="#">CONTACT</a></h2>
                            </div>
   
      <footer>
                        <br />
                        <p>Last Updated: 05-08-2017</p>
                        </footer>

</div>

</body>
</html>

Answer 2

注意两点：

首先，您的 link href 格式不正确。

href="Title Goes Here.html"

通常，最好省略文件名中的空格并用破折号代替。

href="title-goes-here.html"

其次，当写URL路径给图片之类的东西时，如果目标是从相对根目录抓取文件，你应该用正斜杠引导所有URLs .

background-image:url(/Images/All%20Pages/Background.png);

Answer 3

.header css 部分还有一个额外的 "s"。检查“;”之后的背景图像行。

header{
    width:1024px;
    height:100px;
    text-align:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    background-image:url(Images/All%20Pages/Top_Banner.png);s
    display:inline;
}

以前有效的链接现在无效

Links that used to work now do not

css

html

hyperlink

broken-links