Html 是否已锚定页面？_Html_Css

Html 是否已锚定页面？

html css

Html 是否已锚定页面？,html,css,Html,Css,首先，请允许我作为前言，我对html、CSS等知之甚少。我所能做的大部分工作是通过以下其他示例。我正在做一个标题菜单，每个链接都是页面中的一个锚。（div在单击之前是隐藏的）但是我被这个问题困住了。我在页面内有如下链接： <div class="header"> <a href="#B1">Block 1</a> <a href="#B2">Block 2</a> </div> 所以我已经发现我不能做“lo

首先，请允许我作为前言，我对html、CSS等知之甚少。我所能做的大部分工作是通过以下其他示例。我正在做一个标题菜单，每个链接都是页面中的一个锚。（div在单击之前是隐藏的）但是我被这个问题困住了。我在页面内有如下链接：

<div class="header">
    <a href="#B1">Block 1</a>
    <a href="#B2">Block 2</a>
</div>

所以我已经发现我不能做

“localhost/test1.html#B1#幻灯片一”

我不知道是否有可能做这个锚链接到已经作为锚打开的页面。没有使用jquery、flash、java等的选项。我只能使用HTML/CSS。我将假设这是不可能的，但我想最后一次尝试，在这里问一下

编辑：更新的示例代码提供了更好的解释：

 <style type="text/css">
div#Menu {
  height:90px;
  left:0;
  position:fixed;
  top:-5px;
  width:100%;
  text-align:center;
}

div#B1 {
  position:absolute;
  left:-1000px;
  margin-top:0;
}
div#B1:target {
  top:100px;
  left:375px;
}

div#B2 {
  position:absolute;
  left:-1000px;
  margin-top:0;
}
div#B2:target {
  top:100px;
  left:375px;
}
</style>
</head>

<body>
<!--Header Menu-->
<div id="Menu" class="header">
    <a href="#B1">Block 1</a>
    <a href="#B2">Block 2</a>
</div>



<div id="B1" class="blocks">
    <div id="Slider1" class="Slide">
        <ul>
            <li id="slide-one"><img src="slide-one.png"/></li>
            <li id="slide-two"><img src="slide-two.png"/></li>
        </ul>
        <a href="#slide-one">Slide 1</a>
        <a href="#slide-two">Slide 2</a>
    </div>
</div>

<div id="B2">
    <div id="Slider1" class="Slide">
        <ul>
            <li id="slide-three"><img src="slide-three.png"/></li>
            <li id="slide-four"><img src="slide-four.png"/></li>
        </ul>
        <a href="#slide-three">Slide 3</a>
        <a href="#slide-four">Slide 4</a>
    </div>
</div>


div#菜单{
高度：90px；
左：0；
位置：固定；
顶部：-5px；
宽度：100%；
文本对齐：居中；
}
分区B1{
位置：绝对位置；
左：-1000px；
边际上限：0；
}
B1组：目标{
顶部：100px；
左：375px；
}
分区B2{
位置：绝对位置；
左：-1000px；
边际上限：0；
}
B2组：目标{
顶部：100px；
左：375px；
}

我所拥有的是带有缩略图导航的CSS图像滑块，它们是每个部分中的锚。在菜单上，我进入块#1，该块打开，其中包含一个图像滑块库。我的页面url更改为“test1.html#B1”，图像滑块为每个图像设置了锚定

在一个单独的普通页面上，滑块单独为每个图像提供页面url，类似于“test1.html#slide one”

但这是嵌套的，并且图像滑块是“B1”块的子对象。我需要打开block#B1，然后在页面上打开图像滑块库。每个图像都有自己的锚，但我需要保留“B1”

从您的问题的表达方式，我们可以想到两种不同的需求：

<> LI>

既然你说你想做代码> LoalHoo/Test1 .htmlβb1→一个< /代码>，这意味着你认为<>代码>一个/<代码>不仅存在于<代码>上下文中的“B1 < /代码>”中，而且还存在于别处（例如在<代码>：但如果发生这种情况，则意味着

#B1

和

#B2

不在同一HTML页面中！所以它不可能是你想要的

相反，文本的整个剩余部分表示您要访问的所有部分都在同一页中。这就是我将在下面解释的情况

在同一HTML页面中，不能有多个

id

s具有相同的值：一个
id
是唯一的，设计上是唯一的。
其结果是：要以给定的
id
为目标，您不需要几个中间点，即使用户真的像您的示例中那样使用了这些中间点
总之，您在问题中显示的代码已经足够完美了

最后一点：如果一个
id
总是唯一的，那么在相反的情况下，您可以在目标位置无限次地出现它。换句话说，同一（唯一）目的地可以从多个锚点指向
一个锚点将“替换”另一个锚点。你希望两个独特的元素同时“瞄准”会发生什么？页面的存储状态？仅使用HTML/CSS，按ID定位元素会导致页面滚动以使该元素可见。我想你不会认为两个不同的是可能的。你想做什么？
<style type="text/css"> div#Menu { height:90px; left:0; position:fixed; top:-5px; width:100%; text-align:center; } div#B1 { position:absolute; left:-1000px; margin-top:0; } div#B1:target { top:100px; left:375px; } div#B2 { position:absolute; left:-1000px; margin-top:0; } div#B2:target { top:100px; left:375px; } </style> </head> <body>  <div id="Menu" class="header"> <a href="#B1">Block 1</a> <a href="#B2">Block 2</a> </div> <div id="B1" class="blocks"> <div id="Slider1" class="Slide"> <ul> <li id="slide-one"><img src="slide-one.png"/></li> <li id="slide-two"><img src="slide-two.png"/></li> </ul> <a href="#slide-one">Slide 1</a> <a href="#slide-two">Slide 2</a> </div> </div> <div id="B2"> <div id="Slider1" class="Slide"> <ul> <li id="slide-three"><img src="slide-three.png"/></li> <li id="slide-four"><img src="slide-four.png"/></li> </ul> <a href="#slide-three">Slide 3</a> <a href="#slide-four">Slide 4</a> </div> </div>