以前可以用的链接现在不行了

【问题标题】：Links that used to work now do not以前可以用的链接现在不行了
【发布时间】：2017-05-12 17:20:56
【问题描述】：

所以我正在为一个学校项目制作一个 html5 网页，而我之前可以使用的一些超链接已经完全损坏，以至于连 a:hover 属性都不起作用。

这是我的关于页面的确切代码（包括 cmets），左侧的超链接在该页面上起作用：

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

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

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

对此的任何答案将不胜感激，因为我还没有发现任何错误。提前感谢您提出的任何建议

【问题讨论】：

    标签： css html hyperlink broken-links


    【解决方案1】：

    需要注意的两点：

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

    href="Title Goes Here.html"

    作为一项规则，最好的做法是省略文件名中的空格并用破折号替换它们。

    href="title-goes-here.html"

    其次，在为图片之类的内容编写 URL 路径时，如果目标是从相对根目录中获取文件，则应在所有 URL 前加上正斜杠。

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

    【讨论】：

    • 谢谢你的建议，我真的应该这样做，但我发现即使有空格它仍然有效，所以这就是我一直在做的。
    【解决方案2】：

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

    【讨论】：

      【解决方案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;
}

      【讨论】：

      • 这并不是问题的根源，但仍然感谢您指出这一点。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-03
      • 2014-11-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode