gpt4 book ai didi

html - 如何创建 anchor

转载 作者:行者123 更新时间:2023-11-28 14:44:30 26 4
gpt4 key购买 nike

我尝试使用以下方法创建 anchor :

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

<a name="reference-name">

问题是我的顶部有一个 float 边距, anchor ​​转到页面顶部隐藏了文本的顶部。

有没有一种使用 HTML 向上边距添加相对间距的简单方法?

我是新手,使用的是我在网上找到的模板。从那以后,我发现从新开始而不是使用模板会更容易,但我现在太落后了,而且我真的不明白如何更改 CSS 来做到这一点。有更简单的答案吗?

提前非常感谢一直在寻找答案的人。

最佳答案

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

基本上我们已经得到了这样的效果:

<!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>

如所写, anchor 链接隐藏在顶部导航下方。似乎唯一可靠的解决方法是使用“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 中删除了顶部填充。

然后我将内容和页脚固定位置。因此,内容必须向下移动 101 像素,因此位于顶部。

然后我必须给页脚一个高度,然后在内容上放置与底部相同的高度。

Overflow auto 为我们提供滚动条,100% 的宽度将这些滚动条放在合理的位置。

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

编辑 2:不幸的是,我无法在网上找到很多关于这种特定方法的信息。 Eric Meyer 在 Smashing CSS 中谈到了它。它看起来不像任何现有资源在线测试 anchor 链接如何与内容一起使用,这很不幸。

关于html - 如何创建 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5472182/

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