http://www.indofolio.com/,我想创建一个类似于这个网站的功能,但我不知道他是如何在没有JavaScript的情况下使用锚标签进行水平滚动的。
关闭JavaScript,他的网站仍然正常运行。我非常喜欢他所做的渐进增强。
水平定位的测试代码,删除inline-block和float left,它可以完美地工作。
<!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>