Html水平锚定没有JavaScript [英] Html anchor horizontally without javascript
问题描述
http://www.indofolio.com/ ，我正在尝试创建一个类似网站函数到这个，但我不明白他是如何做水平滚动与锚标签没有JavaScript。
关闭javascript，他的网站仍然正常运行。
水平锚定的测试代码，取出内嵌块并向左浮动，它完美地工作。
<！DOCTYPE HTML>
< html lang =en-US>
< head>
< meta charset =UTF-8>
< title>< / title>
< style type =text / css>
.ab {
width：20％;
身高：20％;
float：left;
display：inline-block;
border：1px纯红色;
}
< / style>
< / head>
< body>
< a href =＃box1> aaaaaaa< / a>
< a href =＃box2> bbbbbbb< / a>
< div id =containerstyle =width：100％>
< ul style =width：500％; height：2000px; background-color：red>
< li class =ab>< a name =box1>< / a>
< div>测试< / 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>
像昆汀说的，但他的解释可能有点儿缺乏如果你是网页设计新手。关闭javascript后，请注意 url 在更改中。主页是 www.indofolio.com/#box1 下一个有＃box2 等等。 a 标签，正常行为是如果它们存在于一个页面上并且锚点被设置为跳转到这些点。他的主页锚点< a class =link home selectedhref =＃box1>主页< / 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 =abid =box1>
< div> test1< / div>
< / li>
< li class =abid =box2>
< div> test2< / div>
< / li>
< li class =abid =box3>
< div> test3< / div>
< / li>
< li class =abid =box4>
< div> test4< / div>
< / li>
< li class =abid =box5>
< div> test5< / div>
< / li>
< / ul>
< / div>
CSS
body {
padding：0;
保证金：0;
}
.ab {
width：20％;
float：left;
padding：0;
保证金：0;
}
.ab div {
height：500px;
border：1px纯红色;
}
#container {
width：500％; / *五个横向页面的五页宽度* /
填充：0;
保证金：1.5em 0 0;
}
#container ul {
width：100％;
list-style：none;
padding：0;
保证金：0;
}
#nav {
position：fixed;
剩下：0;
top：0;
}
#nav a {
margin-right：10px;
display：inline-block;
}
http://www.indofolio.com/, I'm trying to create a website with similar function to this one, but I don't understand how he did the horizontal scrolling with anchor tag without javascript. Turn javascript off, and his website is still functionning properly. I really love the progressive enhancement he did.
Test code for horizontal anchoring, take out inline-block and float left and it works perfectly.
<!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>
Like Quentin said, but his explanation might be a bit lacking if you are new to web design. With javascript off, note that the url in changes. The homepage is www.indofolio.com/#box1 the next has #box2, etc. Those are id's of the content boxes that he is using. Normal behavior for an a tag is to "jump" to those points if they exist on a page and the anchor is set to do so. His home page anchor is <a class="link home selected" href="#box1">Home</a> where the href is what causes the jump to that location.
EDIT: Here's some reworked code for your example.
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;
}
这篇关于Html水平锚定没有JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
