gpt4 book ai didi

html - HTML中的 anchor

转载 作者:行者123 更新时间:2023-12-04 01:14:55 25 4
gpt4 key购买 nike

在编码网站方面,我相当基础,但我想将 anchor 合并到我的水平滚动网站中。我试过了,但它不起作用。

下面是我尝试过的代码 - 我不确定这是否与我的导航栏不是标准 <li> 有关相反,我使用单独的 div。我将附上一张关于我如何设计网站的图片,以便您理解这个概念。

HTML:

<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">

<div id="fullscreen">

<div class="box home" id="home">

<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>

</div>

<div class="box work" id="work">

</div>
<div class="box about" id="about">

</div>
</div>
</div>

图片: https://imgur.com/fh6hq3O

我想最终合并平滑滚动,但一旦我解决了这个问题,我就会考虑这一点。

最佳答案

由于属性绑定(bind)标记元素, anchor 工作如下

<a href="#anchor-point-1">Where You Click!</a> 

<a name="anchor-point-1"></a>

因此,#anchor-point-1 是绑定(bind)到 anchor 标记名称的属性元素,您可以将其垂直或水平放置在标记中的任何位置,具体取决于您应用程序的样式。

您可以为模板之类的选项卡执行多个 anchor 标记,如下所示
<a href="#anchor-point-tab-1">Where You Click!</a> 

<a name="anchor-point-tab-1"></a>

<a href="#anchor-point-tab-2">Where You Click!</a>

<a name="anchor-point-tab-2"></a>

只要您的原始链接和 anchor 具有相同的绑定(bind)元素 HREF = 相同的 NAME 属性,您将标签命名为什么并不重要。

您还可以将元素绑定(bind)到 div、span 和其他标签以实现这些类型的视觉和滚动效果

对于内部锚定属性

创建功能性超链接需要了解三个 anchor 属性。这些属性是 href、target 和 download。

这些也被视为 anchor ,但不会将一个标签绑定(bind)到另一个标签!
Anchor 1: mailto:
<a href="mailto:contact@anchor.com">

Anchor 2: tel:
<a href="tel:5551239876">make call (555)123-9876</a>

Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">

要了解 A href 标签的所有属性的动态和内部工作,请访问下面的链接。

https://html.com/anchors-links/

希望这就足够了!

关于html - HTML中的 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54424006/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com