Ich habe gelesen link auf, wie man Anker benutzt, um zu erreichen, was ich frage. Ich bin jedoch total verloren. Ich habe mich gefragt, ob mir jemand zeigen könnte, wonach ich suche und es erkläre.Wie kann ich diese Anker korrekt in meine Codierung einbetten?
Q1 Für meine Website, wenn der Benutzer klickt auf der Webseite „Kontakt“ auf der Navigationsleiste, ich mag der Benutzer der Homepage sein kraft nach unten gescrollt Abschnitt drei auf meiner Homepage. Ich benutzte so etwas vor <section id="contact-me" class="contact_section"></section>. Wie kann ich dies jedoch in meinen HTML-Abschnitt3 einbetten und trotzdem die Klasse "section3" behalten?
Q2 Wie kann ich meinen Pfeil unten auf Abschnitt1 verknüpfen, um zu Abschnitt 2 zu gelangen? Hier ist mein Versuch, aber das bringt Sie zu einer Seite Ich möchte es den Benutzer zwingen, bis zu Abschnitt 2 innerhalb meiner Webseite zu scrollen. <a href = ".section2"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
Q3
Wie kann ich Wie kann ich einen Link mein Pfeil nach unten auf section2 3 zu Abschnitt gehen?
Wie kann ich Wie kann ich meinen Pfeil unten in Abschnitt 3 verknüpfen, um zu Abschnitt 1 zurückzukehren?
Unten ist meine Codierung.
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
a:hover {
color: red;
text-decoration: none;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
}
.section2 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.section3 {
//height: 95vh;
background-color: #A59E8C;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 5vh;
background-color: #4D5061;
text-align: center;
padding: 0;
right: 0;
bottom: 0;
left: 0:
}
h1 {
font-size: 14pt;
margin: 0;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#section3">Contact</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li><a href="#">Clients</a>
</li>
<li><a href="#contact-me">Contact Me</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section class="section1">
<div class="hero"></div>
<a href=".section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section2">
<a href=".section2"> <i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section>
<section class="section3" id="section3">
<a href="#bs-example-navbar-collapse-1"> <i class="fa fa-angle-up" style="font-size:100px;"></i></a>
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
<div class="page">
<h1 class="footer">Copyright © 2017 Liam Docherty's Site. All rights reserved.</h1>
</div>
</footer>
Sie benötigen eine ID statt einer Klasse in Ihrem Link, wie 'href = "# id"' –
von dem, was ich referenzieren verstehe, du kannst nicht genau das machen, was du willst. '' Links innerhalb der Seite basieren auf dem Attribut 'id', nicht auf einem CSS-Selektor. Sie können die Klasse als '.section2' behalten, aber Sie müssen auch ein' id' Attribut der gleichen Sache hinzufügen, damit der 'href =" # section2 "' Teil wie erwartet funktioniert. – Jhecht
Ich habe es geschafft, alles außer Abschnitt 3 auszuarbeiten, der zurück zu Abschnitt 1 geht. ' \t \t \t ' –