我的HTML超链接在网页的导航栏上不起作用。我逐渐转移了我的内容stylesheets
,scripts
发现添加之后CSS file
,超链接无法定向到该网页。最初,我发现导航菜单与滑块部分重叠(在先前的StackOverflow问题中提到的问题),但是我为导航菜单本身指定了较高的z-index。抱歉,如果代码很长,但是我必须给所有代码以查看问题出在哪里。请尝试使响应成为实际的解决方法,而不是仅仅删除其中一个元素以停止覆盖。
的HTML
<div id="container">
<header>
<h1><b>Seattle</b>&Metropolitan</h1>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li>Buildings</li>
<li id="contact">Contact Us</li>
</ul>
</nav>
</header>
</div>
<div class="image-section">
<img src="img/seattleskyline.jpg" alt="Seattle Skyline" id="center-image" />
<div id="caption">A panoramic view of 1201 Third Avenue at night</div>
<button id="sliderLeft" onclick="left();"></button>
<button id="sliderRight" onclick="right();"></button>
</div>
<br><br>
<div class="content">
Seattle's history can be traced back to the 1850s, when pioneers and natives started building a great city filled with a diverse culure, beautiful scenery, and a vibrant enviornment. The metropolitan area of Seattle now is a high-tech hub, in which four Fortune 500 companies reside: <a href="http://www.amazon.com/" alt="Amazon Website"><b>Amazon.com (#49)</b></a>, <a href="http://www.starbucks.com" alt="Starbucks Website"><b>Starbucks (#208)</b></a>, <a href="http://shop.nordstrom.com" alt="Nordstrom Website"><b>Nordstrom (#227)</b></a>, and <a href="http://www.expeditors.com" alt="Expeditors Website"><b>Expeditors International (#428)</b></a>.
</div>
的CSS
@charset "utf-8";
body
{
margin: 0;
padding: 0;
font-family: Open Sans, sans-serif;
}
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 38px;
float: left;
font-weight: 100;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
}
header nav ul li
{
line-height: 105px;
display: inline;
padding: 45px;
font-size: 22px;
font-weight: 100;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
#center-image
{
width: 100%;
height: 480px;
}
#contact
{
padding-right: 0;
}
.image-section
{
margin-left: auto;
margin-right: auto;
width: 75%;
position: relative;
text-align: center;
}
.image-section #caption
{
position: absolute;
display: none;
bottom: 4px;
width: 100%;
text-align: center;
color: white;
background: #474747;
height: 50px;
line-height: 50px;
opacity: 0.8;
font-size: 20px;
}
.image-section button
{
outline: 0;
}
.image-section #sliderLeft
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
left: 0;
opacity: 0.7;
border: 0;
}
.image-section #sliderRight
{
position: absolute;
display: none;
width: 25px;
height: 100px;
top: 50%;
margin-bottom: 50px;
right: 0;
opacity: 0.7;
border: 0;
}
.content
{
margin-left: auto;
margin-right: auto;
width: 75%;
font-size: 18px;
line-height: 35px;
}
.content a
{
text-decoration: none;
color: black;
}
.content a:visited
{
color: black;
}
您的问题出在.image-section
。
我通过更改 background-color:yellow;
显然,链接会在后台推送。
要修复它,请添加z-index:-1;
到.image-section
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句