Html水平无锚点锚点

http://www.indofolio.com/，我正在尝试创建一个类似于这个网站的功能的网站，但是我不明白他是如何用没有javascript的锚点标记进行水平滚动的。关闭javascript，他的网站仍然正常运行。我非常喜欢他所做的渐进式改进。Html水平无锚点锚点

水平锚定的测试代码，取出行内块和向左浮动，它完美的工作。

<!DOCTYPE HTML> 
    <html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
.ab { 
    width: 20%; 
    height: 20%; 
    float: left; 
    display: inline-block; 
    border: 1px solid red; 

} 

</style> 
</head> 
<body> 
<a href="#box1">aaaaaaa</a> 
<a href="#box2">bbbbbbb</a> 
<div id="container" style="width:100%"> 
    <ul style="width:500%;height:2000px;background-color:red"> 
     <li class="ab"><a name="box1"></a> 
      <div>test</div> 
     </li> 
     <li class="ab"><a name="box2"></a> 
      <div>test2</div> 
     </li> 
     <li class="ab"> 
      <a name="box3"></a> 
      <div>test3</div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
     <li class="ab"> 
      <div></div> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

来源

2011-11-06 FireStream

就像昆汀说的，但如果你是网络设计新手，他的解释可能会有点欠缺。关闭javascript，请注意url发生更改。主页是www.indofolio.com/#box1，下一个有#box2等。这些是他正在使用的内容框的id。 a标签的正常行为是“跳转”到这些点，如果它们存在于页面上并且锚点被设置为这样。他的主页主播是<a class="link home selected" href="#box1">Home</a>，其中href是导致跳转到该位置的原因。

编辑：这里是你的例子一些重做代码。

HTML

<div id="nav"> 
<a href="#box1">B1</a> 
<a href="#box2">B2</a> 
<a href="#box3">B3</a> 
<a href="#box4">B4</a> 
<a href="#box5">B5</a> 
</div> 
<div id="container"> 
    <ul> 
     <li class="ab" id="box1"> 
      <div>test1</div> 
     </li> 
     <li class="ab" id="box2"> 
      <div>test2</div> 
     </li> 
     <li class="ab" id="box3"> 
      <div>test3</div> 
     </li> 
     <li class="ab" id="box4"> 
      <div>test4</div> 
     </li> 
     <li class="ab" id="box5"> 
      <div>test5</div> 
     </li> 
    </ul> 
</div>

CSS

body { 
    padding: 0; 
    margin: 0; 
} 
.ab { 
    width: 20%; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

.ab div { 
    height: 500px; 
    border: 1px solid red; 
} 

#container { 
    width: 500%; /* five page widths for five horizontal pages */ 
    padding: 0; 
    margin: 1.5em 0 0; 
} 

#container ul { 
    width: 100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav { 
    position: fixed; 
    left: 0; 
    top: 0; 
} 

#nav a { 
    margin-right: 10px; 
    display: inline-block; 
}

来源

2011-11-06 20:39:55 ScottS

是的，我明白是怎么跳的，但它不工作的水平，我只是贴在上面的代码只是测试它。当你删除内联块并向左浮动时，它完美地工作，但不是其他方式。可悲，但它在indofolio上工作....它仍然是一个谜 – FireStream

它不是在关闭javascript的indofolio上水平移动。它只是“跳跃”到位。水平只影响JavaScript。 – ScottS

关闭javascript，在div id =“wrapper”上关闭溢出隐藏功能，当缩小图像以最小化内容时，图像会水平对齐，并且当您单击菜单时，它会跳转到它。我知道。但即使在我的简单测试中，它也不能正常工作。它不会水平跳跃......不仅如此，还有更精确的PLZ，因为我是愚蠢的，而当我必须再次精确时，我感觉更加愚蠢。 – FireStream

-1

如果JS不可用，它会使用常规锚点垂直滚动。

水平定位适用于JS。

来源

2011-11-06 20:21:43 Quentin

Html水平无锚点锚点

回答

相关问题