导航栏中的其他网站链接

时间:2018-12-10 01:39:10

标签: html css navbar

我试图在导航栏中提供指向不同网站的链接,但我被卡在这里。

<body>

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#beeryoga">Beer Yoga</a></li>
    <li><a href="#dayinmylife">A Day in My Life</a></li>
</ul>

这也是我的CSS样式表

ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;background-color:lightslategray;}
li {float:left;}
li a {display:block;color:white;text-align:center;padding: 14px 16px;text-decoration:none;}
li a:hover {background-color: #111;}

2 个答案:

答案 0 :(得分:1)

将href更改为链接。例如:

<ul>
  <li><a class="active" href="https://stackoverflow.com/">Stack Overflow</a></li>
  <li><a href="another link">Beer Yoga</a></li>
  <li><a href="another link">A Day in My Life</a></li>
</ul>

如果将href改为https://stackoverflow.com/而不是#home,则链接会将您带到https://stackoverflow.com/

答案 1 :(得分:0)

如果内部引用的是指向不同页面的不同链接,请确保您具有匹配的id选择器来链接到何处。例如:

这些定位标记将链接到您在另一页上设置的href的{​​{1}}值:

id

说这是beeryoga.html:

<ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="beeryoga.html#beeryoga">Beer Yoga</a></li>
    <li><a href="dayinmylife.html#dayinmylife">A Day in My Life</a></li>
</ul>

说这是dayinmylife.html:

<body>
    <div id="beeryoga">
        <p>We are linking here!</p>
    </div>
</body>