以前工作的链接现在没有

时间：2017-05-12 17:20:56

标签： html css html5 hyperlink broken-links

所以我在html5中为一个学校项目制作一个网页，我以前工作的一些超链接已经完全破坏了，以至于即使是a：hover属性也不起作用。

以下是我的“关于”页面的确切代码（包含注释），左侧的超链接可以在其中运行：

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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 -->
＆＃13;
＆＃13;
＆＃13;

以下是我的主页面的完整代码，其中只有返回主页面的链接有效：

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

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

3 个答案:

答案 0 :(得分：1)

有两点需要注意：

首先，你有一个格式不正确的链接href。

href="Title Goes Here.html"

通常，最好省略文件名中的空格，而是用短划线替换它们。

href="title-goes-here.html"

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

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

答案 1 :(得分：0)

由于margin-left，您的#content元素会覆盖在#left_bar元素的顶部。您可以改为使用@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>
attach

答案 2 :(得分：0)

.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;
}
相关问题
最新问题