Question

如何将我的标题href菜单链接到一个页面的页面中，标题仍位于我内部html的顶部。

这是标题和div菜单：

        <img src="img/logo.png" width="65" height="65">
    <h1 style="color:#B2BCB1;">Bangkit<small>WM</small></h1>

    <div id="menu">

    <a href="#">About</a>

    <a href="#">Portofolio</a>

    <a href="#">Contact</a>

    </div>

</header>

这是我要在标题菜单的href中链接的节类：

<div class="main">  
    <section class="page one">
        <div class="page-container">
            <h2>About Me</h2>
            <p>Fokus untuk mengakhiri karir</p>
            <p><small><a href="bangkitwira.com"></a><a href="index2.html">That was a Child</a></small></p>
        </div>
    </section>



    <section class="page two">
        <div class="page-container">
            <h2>Portofolio</h2>
            <p>Menerangkan pekerjaan web yang sudahberhasil saya buat</p>
        </div>
    </section>



    <Section class="page three">
        <div class="page-container">
            <h2>Contact<small> &bull; Me</small></h2>
            <p>Mengapa? Karena untuk memudahkan komunikasi diantara kita</p>
        </div>
    </section>

</div>

Answer 1

在元素和类上使用id。

此链接：

<a href="#page_one">About</a>

将用户发送到此div：

<section id="page_one" class="page one">
    <div class="page-container">
        <h2>About Me</h2>
        <p>Fokus untuk mengakhiri karir</p>
        <p><small><a href="bangkitwira.com"></a><a href="index2.html">That was a Child</a></small></p>
    </div>
</section>

除了这个宣言：

<section class="page three">

会给第2节课，而不是一节课。如果元素用空格分隔，则它可以有多个类。

Answer 2

这是我掀起的东西，让你知道你想要达到的目标：

CSS：

.sticky {
    position: fixed;
    top: 0px;
    z-index: 1000;
    background-color: #FFFFFF;
    display: block;
}
section:before {
    display: block;
    content:" ";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
}
.main {
    padding-top: 100px;
}

这是必要的，以使您的标题贴在顶部，并防止重叠的问题。如果它看起来不好（我从我的测试代码中删除了图像标记），请将“100px”调整为“165px”左右。

HTML：

更改您的HTML以提供您的section ID，并使您的超链接指向这些ID。

请注意，还要将标题sticky添加到标题中。

<section id="sectionOne" class="page one">
<!-- more code here -->
<a href="#sectionOne">About</a>

看哪！

HTML部分分页

2 个答案: