-1

这就是我正在使用的

<h1>Red to Violet</h1>
<a href="#one">first</a> .
<a href="#two">second</a> .

<div id="section">
<div class="innersections">
<a name="one"></a>

(text)

</div> <hr> 
<div class="innersections">
<a name="two"></a>
(text)

</div></div>

我想要它，这样当我点击一个链接时，它不会向上翻页，我看不到标题“红色到紫色”，但如果我点击“第二个”，我可以看到第二个“内部部分”。笔记; 我只能使用 css/html 代码。

4

3 回答 3

1

将 id 与要导航到的元素一起使用。 

<h1>Red to Violet</h1>
<a href="#one">first</a> .
<a href="#two">second</a> .

<div id="section">
<div class="innersections">
<a id="one" name="one"></a>

(text)

</div> <hr> 
<div class="innersections">
<a id="two" name="two"></a>
(text)

</div></div>
于 2013-09-19T12:49:13.397 回答
0

如果您希望 h1 标头保持在顶部，则可以使用position:fixed;top:0.

这是一个说明这一点的JSFiddle ：http: //jsfiddle.net/VZjdN/（我对您的 HTML 做了一些小改动。如果您不想使用 HTML5header标记，可以使用div.）

完整的 CSS 是：

header {
    position: fixed;
    top: 0;
    background: white;
    width: 100%;
}

.innersections {
    padding-top: 5em;
}

以及修改后的标记：

<body>
    <header>
        <h1>Red to Violet</h1>
        <a href="#one">first</a>. <a href="#two">second</a>.
    </header>

    <div id="section"> 
        <a name="one"></a>
        <div class="innersections" style="padding-top:6em">
             <h2>Inner 1</h2>
            <div style="height:800px"></div>  <!-- filler -->
        </div>
        <hr> 

        <a name="two"></a>
        <div class="innersections" style="padding-top:4em">
             <h2>Inner 2</h2>
            <div style="height:800px"></div> <!-- filler -->
        </div>
    </div>
</body>
于 2013-09-19T13:37:51.240 回答
0

解决了

http://jsfiddle.net/GPRVX/

.section {
    margin-top: 8em;
}
.fix {
    height: 7em;
    top:0; left: 0;
    position: fixed;
    background: white;    
    margin: 0;
    padding: 0.5em;
    width: 100%;
}
.innersections {
    padding: 0.5em;
}
.section a:before {
    display:block; 
    content:""; 
    height:8em; 
    margin:-8em 0 0; 
}
于 2013-09-19T14:45:16.470 回答