如何创建锚点

发布于 2024-10-27 01:53:23 字数 330 浏览 1 评论 0原文

我尝试使用以下方法创建锚点：

<a href="index-xxx.html#reference-name"> and

<a name="reference-name">

问题是我在顶部有一个浮动边距，并且锚点位于隐藏文本顶部的页面顶部。

有没有一种简单的方法可以使用 HTML 添加相对间距到上边距？

我对此很陌生，并使用我在网上找到的模板。我发现从头开始比使用模板更容易，但我现在已经太落后了，而且我真的不明白如何更改 CSS 来做到这一点。有更简单的答案吗？

非常感谢那些花了几个小时寻找答案的人。

原文

I have tried to create an anchor point using:

<a href="index-xxx.html#reference-name"> and

<a name="reference-name">

The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.

Is there an easy way to add a relative spacing to the top margin using HTML?

I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?

Many thanks in advance to someone that has been searching for hours for the answer.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鼻尖触碰 2024-11-03 01:53:23

编辑：我已经根据提供的代码进行了更新。

基本上我们已经得到了一些效果：

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
    #main {
        min-width: 980px;
        margin: 0 auto;
        font-size: 0.75em;
        padding:101px 0 37px 0;
    }
    header {
        height:101px;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:100;
    }
    footer {
        overflow: hidden;
        position:absolute;
        bottom:0;
        left:0;
        width:100%/*; height:37px*/;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        color:#9d9d9d;
        text-transform:uppercase
    }
</style>
</head>
<body>
<div id="main">
    <header>...</header>
    <section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
    <footer>...</footer>
</div>
</body>
</html>

如所写，锚链接隐藏在顶部导航下方。似乎唯一可靠的解决方法是使用“CSS 框架”来使内容正确显示，这需要进行以下 CSS 调整：

#main 
{
    padding:0 0 37px 0;
}
section#content
{
    position:fixed;
    top:101px;
    width:100%;
    bottom:37px;
    overflow:auto;
}
footer 
{
    position:fixed;
    height:37px;
}

因此，我从 #main 中删除了顶部填充。

然后我将内容和页脚固定位置。因此，内容必须向下移动 101px，即顶部。

然后我必须给页脚一个高度，然后将与内容底部相同的高度。

溢出自动为我们提供了滚动条，并且 100% 的宽度将这些滚动条放在合理的位置。

在 IE 9、Chrome 10、Firefox 4 和 Opera 11 上进行了测试。

编辑 2：不幸的是，我在网上找不到太多关于这种特定方法的信息。 Eric Meyer 在 Smashing CSS 中谈到了这一点。它看起来不像任何现有的在线资源测试锚链接如何与内容一起工作，这是非常不幸的。

EDIT: I've updated based upon the code supplied.

Basically we've got something to the effect of this:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
    #main {
        min-width: 980px;
        margin: 0 auto;
        font-size: 0.75em;
        padding:101px 0 37px 0;
    }
    header {
        height:101px;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:100;
    }
    footer {
        overflow: hidden;
        position:absolute;
        bottom:0;
        left:0;
        width:100%/*; height:37px*/;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        color:#9d9d9d;
        text-transform:uppercase
    }
</style>
</head>
<body>
<div id="main">
    <header>...</header>
    <section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
    <footer>...</footer>
</div>
</body>
</html>

As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:

#main 
{
    padding:0 0 37px 0;
}
section#content
{
    position:fixed;
    top:101px;
    width:100%;
    bottom:37px;
    overflow:auto;
}
footer 
{
    position:fixed;
    height:37px;
}

So I've removed the top padding from #main.

Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.

I then had to give the footer a height, and then put that same amount as a bottom on the content.

Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.

Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.

Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.

回复收藏 0 原文

~没有更多了~