Html水平锚定没有javascript

Question

Html水平锚定没有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%;
    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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sco*_*ttS 8

就像昆汀所说,但如果你不熟悉网页设计,他的解释可能有点缺乏.关闭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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年前
查看次数：	8844 次
最近记录：	12 年，3 月前