Question

我正在为我学校的赛艇队建立一个网站，我似乎无法让导航栏中的链接发挥作用。我尝试切换<p>和<a>标记并更改元素的z-index。

HTML：

<body>
<header class="horizontalDiv">
    <img src="http://www.computer-wallpaper-backgrounds.com/wallpaper/1680x1050/cool-backgrounds/water-ripples-background.jpg" id="headerPic"/>
    <div id="titleContainer">
        <b><p id="title">*** Crew Team</p></b>
    </div>
    <div class="horizontalDiv" id="navigation">
        <div class="nav" id="home">
            <p><a href="https://www.google.com/?gws_rd=ssl">Home</a></p>
        </div>
        <div class="nav" id="rowingSeason">
            <a><p>Rowing Season</p></a>
        </div>
        <div class="nav" id="basicsOfCrew">
            <a><p>Basics of Crew</p></a>
        </div>
        <div class="nav" id="registration">
            <a><p>Registration</p></a>
        </div>
        <div class="nav" id="documents">
            <a><p>Documents</p></a>
        </div>
        <div class="nav" id="pictures">
            <a><p>Pictures</p></a>
        </div>
        <div class="nav" id="news">
            <a><p>News</p></a>
        </div>
        <div class="nav" id="boosters">
            <a><p>Boosters</p></a>
        </div>
    </div>
</header>
</body>

CSS：

.horizontalDiv {
     width: 104%;
}
header {
    height: 200px;
    border-bottom: 3.5px solid black;
    margin: -10px 0px 0px -10px;
}
#headerPic {
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .5;
}
#title {
    color: #b91a2f;
    font-size: 30px;
    font-family: verdana;
}
#titleContainer {
    z-index: 100;
    margin-top: -170px;
    margin-left: 65px;
}
.nav {
    z-index: 99;
    height: 100%;
    width: 11.3%;
    margin: 15px 0px 0px -3px;
    display: inline-block;
    border-left: 3px solid black;
    border-right: 3px solid black;
}
.nav p {
    text-align: center;
    font-family: verdana;
    font-size: 16px;
    color: black;
}

我刚刚将链接转到谷歌。

Answer 1

问题在于如何创建这些链接。

他们无法肯定，因为你没有指明他们应该链接的地方。

错：

 <div class="nav" id="basicsOfCrew">
      <a>Basics of Crew</a>
 </div>

正确：

<div class="nav" id="basicsOfCrew">
     <a href="#" title="">Basics of Crew</a>
</div>

Answer 2

// right --> <div class="nav" id="home">
            <p><a href="https://www.google.com/?gws_rd=ssl">Home</a></p>
        </div>


  //wrong  <div class="nav" id="rowingSeason">
        <a><p>Rowing Season</p></a>
    </div>

不能包含任何其他html标记（“span”除外）并忘记添加href（url）应该是：

   <p><a href="http://someurl">Rowing Season</a></p>

Answer 3

您需要指定href

 <p><a href="pagetoopen.html">text to show</a></p>

Answer 4

更好的解决方案是使用CSS background-image创建标题div然后放入其中 <nav>你想要的锚点。不要在不需要的地方使用z-index :)。

Answer 5

你的形象在其余部分之前。你应该把它放在背景而不是html。

但要解决您的问题，只需添加：

.horizontalDiv {
position: relative;
z-index: 2;
}

但是你应该真正验证你的代码（http://validator.w3.org/）。不要像使用

那样将块标签放在短语（内联）标签内（是一个例外，但在这种情况下你不需要

Answer 6

问题是你的标题图片出现在你的标签上方，所以你必须给它相对位置和z-index -1 http://jsfiddle.net/y1hhbgrw/1/

CSS

#headerPic {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: relative;
    opacity: .5;
}

检查上面链接的JsFiddle。另请注意，JsFiddle拒绝在其iFrame中呈现链接，但如果单击ctrl + Enter，您将看到它正常运行。

为什么<a> tag not working?</a>

6 个答案: