我是代碼初學者。我試圖讓我的導航欄轉到我的 HTML 頁面的正確部分。例如,我希望我的技能 href 轉到 html 的技能部分。我知道我遺漏了一些東西,但我不知道它是什么。非常感謝您的幫助!
這是我的導航欄代碼
<div class="Navbar" style="position: inherit;">
<a class="active" href="#aboutme">About Me</a>
<a class="active" href="#skills">Skills</a>
<a class="active" href="#contactme">Contact Me</a>
</div>
這是我的#skills 部分的代碼。所有部分都具有相同的編碼。
<div class="skills">
<h2 class="header">Skills</h2>
<div class="skills-img">
<img src="HTML.png" alt="html" width="100px">
<img src="Css.png" alt="css" width="75px">
<img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
</div>
uj5u.com熱心網友回復:
您必須使用 id 屬性。
例子:
<div id="skills">
<h2 class="header">Skills</h2>
<div class="skills-img">
<img src="HTML.png" alt="html" width="100px">
<img src="Css.png" alt="css" width="75px">
<img src="JavaScript-Logo.png" alt="Javascrip" width="180px">
</div>
</div>
我認為這會對您有所幫助:https : //www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page .html
uj5u.com熱心網友回復:
#skills,#contactme,#aboutme{
margin-top:100vh;
}
#skills a, #contactme a, #aboutme a{
text-decoration:none;
}
a{
margin-left:20px;
margin-right:20px;
text-align:center;}
.Navbar{
display:flex;
justify-content:center;
}
<div id='Navbar' class="Navbar" >
<a class="active" href="#aboutme">About Me</a>
<a class="active" href="#skills">Skills</a>
<a class="active" href="#contactme">Contact Me</a>
</div>
<div id='skills' class="skills">
<h2 class="header"><a href='#Navbar'>Skills</a></h2>
<div class="skills-img">
</div>
</div>
<div id='aboutme' class="skills">
<h2 class="header"><a href='#Navbar'>About Me</a></h2>
<div class="skills-img">
</div>
</div>
<div id='contactme' class="skills">
<h2 class="header"><a href='#Navbar'>Contact Me</a></h2>
<div class="skills-img">
</div>
</div>
uj5u.com熱心網友回復:
另一種選擇是添加一個a帶有 name 屬性的標簽,將其設定為您希望鏈接跳轉的網頁中的唯一名稱,這稱為片段識別符號(參見第 7 章來自:https : //tools.ietf.org/html /rfc1866),作為初學者,我建議開始學習標準,而不僅僅是在線教程......
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/405817.html
標籤:
