我正在为我的父亲公司建立一个网站。我制作了一个菜单栏，该菜单栏位于顶部，但要使其正常工作，我必须在页边距顶部添加120px。没问题，所以我做到了。
但是，如果我单击该菜单栏中的链接，我说必须去的标签将转到页面顶部。但是您看不到它，因为菜单栏位于文本之前。例如，如果单击链接“ Neuraal Netwerk”，我想查看h2“ Ervaring is de beste leermeester”，而不是<p>标记的一部分...。
我该如何解决？
这是我的JSFiddle：https ://jsfiddle.net/7afvgbag/2/
这是我的HTML代码：
<html>
<head>
<title>NeurOp</title>
<link rel="stylesheet" type="text/css" href="../Stijlen/Index.css">
<link rel="stylesheet" type="text/css" href="../Stijlen/Algemeen.css">
</head>
<body>
<div class="navbar">
<h1>NeurOp - Specialist in neurale oplossingen</h1>
<ul>
<li><a href="#home">Home</a></li> |
<li><a href="#neuraalNetwerk">Neuraal Netwerk</a></li> |
<li>Toepassingen</li> |
<li><a href="#overOns">Over ons</a></li>
</ul>
</div>
<div class="content">
<div class="home">
<h2 id="home">Neurale netwerktechnologie bereikbaar voor ieder bedrijf!</h2>
<p>Dat is ons doel en dat bereiken we door neurale netwerk technologie toe te passen op bestaande sets data. Bedrijven kunnen zo direct profiteren van de voordelen die deze krachtige technologie biedt. En omdat veel bedrijven hun data verzamelen in Excel, bieden wij de mogelijkheid onze technologie in Excel te gebruiken.</p>
<div class="lijnDun"></div>
<h2>Wat doet een neuraal netwerk</h2>
<p>Een neuraal netwerk is een zelf lerend computermodel. Het leert aan de hand van praktijkvoorbeelden, waar reguliere computermodellen worden gemaakt met behulp van business rules. Wil je een auto leren om zelf te rijden aan de hand van business rules, dan zal een oneindige set rules het gevolg zijn. Je kunt ook een zelf lerende computer laten 'meerijden' met een goede chauffeur.</p>
</div>
<div class="lijnDun"></div>
<div class="neuraalNetwerk" id="neuraalNetwerk">
<h2>Ervaring is de beste leermeester</h2>
<p class="ervaringLeermeester"><img src="../Media/pcHersenen.png" class="pcHersenen"><p>
<p class="ervaringLeermeesterTekst">In het zenuwstelsel van een mens geven zenuwcellen via verbindingen signalen aan elkaar door. De sterkte van die signalen is gebaseerd op onze ervaring. Dus wanneer we bezig zijn met leren / oefenen, zijn we de verbindingen in ons brein aan het trainen. Door iets vaker te doen worden we er beter in. Iemand met heel veel ervaring, is een expert.<br><br>Een neuraal netwerk werkt precies zo. Het is een computermodel dat is samengesteld uit neuronen en verbindingen daartussen. Aan de hand van voorbeelden met een bekende uitkomst worden de verbindingen sterker of zwakker gemaakt net zolang tot het netwerk de juiste antwoorden geeft. Daarna geeft het netwerk ook de juiste antwoorden in een nieuwe situatie. Predictive Analytics, Artificial Intelligence, Machine Learning en Deep Learning zijn slechts andere benamingen voor deze vorm van technologie. </p>
<h4>"Een neuraal netwerk neemt het juiste besluit, iedere keer opnieuw."</h4>
</div>
<div class="lijnDik"></div>
<div class="toepassingen">
<h2>Toepassingen</h2>
<h3>Incasso: Dagvaarden om het proces of om te incasseren?</h3>
<p>Alle inspanningen ten spijt, zijn er altijd debiteuren die hun factuur niet (kunnen) betalen. En naar genoeg lopen juist de kosten van de niet succesvolle incasso dossiers het hoogst op. <br><br>
Hoe eerder in het incasso proces bekend is of de vordering betaald zal worden of niet (kan of wil de debiteur niet betalen), hoe efficiënter het proces hierop ingeregeld kan worden. <br><br>
Met name wanneer de kostbare keuze om al dan niet te dagvaarden gemaakt moet worden is de toegevoegde waarde van een goed advies van doorslaggevend belang. <br><br>
Afgesloten dossiers vormen de voorbeelden waarmee het neurale netwerk getraind wordt. Voor lopende dossiers zijn we vervolgens in staat om ruim 25% van de kosten besparen.</p>
<div class="lijnDun"></div>
<h3>Commercie: Jagen op kansloze missies, of focus op reële kansen?</h3>
<p>Waar in de markt moet ik zijn om zinvol te acquireren? Op welke aanbesteding kan ik beter niet inschrijven omdat we die niet gaan winnen? Aan welke prospect besteed ik op vrijdagmiddag mijn laatste tijd deze week? Het antwoord op dit soort vragen is de sleutel naar een efficiëntere verkoopafdeling. <br><br>
En dat is concreet mogelijk met neurale netwerktechnologie! Zo zijn we bij voorbeeld in staat om de openstaande offertes van een bedrijf te onderverdelen in drie groepen:
<ul class="commercie">
<li>Offertes waarvan 60% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 20% zal leiden tot een opdracht.</li>
<li>Offertes waarvan 1% zal leiden tot een opdracht.</li>
</ul>
</p>
<div class="lijnDun"></div>
<h3>Logistiek: Blijft de klant thuis voor de bezorger, of niet?</h3>
<p>Hoe laat de pakketbezorger een pakketje aan zal bieden is lastig te voorspellen. Dit is niet alleen afhankelijk van de chauffeur, maar bij voorbeeld ook van de weersomstandigheden en het aantal pakketten dat die dag uitgereden moet worden. We hebben 'proof of concept' mogen leveren op het afgeven van een tijdvakindicatie voor de bezorging van een pakket. Met neurale netwerktechnologie zijn we in staat het aantal verkeerde voorspellingen met 2/3 terug te dringen.<br><br>
Wanneer de voorspelde bezorgtijd betrouwbaar blijkt, zal de consument er meer waarde aan hechten. En er voor thuis blijven, waardoor de klanttevredenheid omhoog gaat evenals de 'hitrate' in de bezorging.</p>
<div class="lijnDun"></div>
<h3>Huurinning: De huurder uitzetten of het samen oplossen?</h3>
<p>'Vroege signalering', de branche heeft het er al jaren over en neurale netwerktechnologie maakt het mogelijk. Iedere maand opnieuw worden woningcorporaties geconfronteerd met huurders die niet (op tijd) betalen. Een klein deel hiervan belandt uiteindelijk in een uitzettingsprocedure. Wanneer bij de eerste uitblijvende betaling al duidelijk is hoe groot de kans is dat de huurder behoort bij die kleine probleemgroep, kan de opvolging hierop inspelen. Dat verhoogt de kans om samen met de huurder andere oplossingen te vinden. De toegevoegde waarde is sociaal misschien nog wel groter dan financieel.</p>
</div>
<div class="lijnDik"></div>
<div class="overOns" id="overOns">
<h2>Over ons</h2>
<p class="pfTekst">Een succesvol neuraal netwerk realiseren is complex. Om van scratch af aan een neuraal netwerk te bouwen, is gedegen kennis van de neurale netwerk technologie en algoritmes noodzakelijk.
Analytisch vermogen en het goed begrijpen van de klantsituatie zijn essentieel om de juiste toepassingen binnen een organisatie te herkennen en de data bruikbaar in te zetten.<br><br>
Dat is ons specialisme. Daarbij wij zijn zo overtuigd van de effectiviteit van onze toepassingen, dat we werken volgens het 'no cure no pay' principe. <br><br>
<em>"Resultaten uit het verleden zijn de basis voor de toekomst."</em></p>
<p class="pasfotoP"><img src="../Media/pfk.jpg" class="pasfoto"></p>
<p class="pasfotoP"><img src="../Media/pfj.png" class="pasfoto pfJeroen"></p>
<p class="afbeeldingTekst"><em>Koen Meeusen en Jeroen Blokdijk</em></p>
</div>
</div>
<div class="footer">
<p class="links">Neur<em>Op</em> BV<br>
[email protected]<br>
<a href="tel:+31 651 808 628">+31 651 808 628</a></p>
<p class="rechts">KvK nummer: 64592154<br>
BTW nummer: 855734425B01<br>
IBAN: NL80 INGB 0007 1271 10<br>
<a href="../Media/AlgemeneVoorwaarden.pdf" target="_blank">Algemene Voorwaarden</a></p>
</div>
<!-- Algemene voorwaarden in PDF bestand downloaden in footer -->
</body>
</html>
这是我的CSS代码：
/************/
/* MENUBALK */
/************/
.navbar {
background-color: #60C8FF;
width: 100%;
height: 120px;
border-bottom: 3px solid #36B9FF;
position: fixed;
top: -5px;
}
.navbar h1 {
padding: 5px;
border-bottom: none;
text-align: center;
}
.navbar li {
display: inline;
width: 100%;
}
.navbar ul {
text-align: center;
width: 100%;
position: fixed;
top: 50px;
}
/**********/
/* FOTO'S */
/**********/
.afbeeldingTekst {
margin-top: 0px;
}
/********************/
/* LIJN ONDER KOPJE */
/********************/
.lijnDik {
border-top: solid 4px #36B9FF;
}
.lijnDun {
border-top: solid 2px #36B9FF;
}
/***********/
/* CONTENT */
/***********/
.content {
width: 70%;
margin: auto;
}
.home {
margin-top: 120px;
}
.machineLearning {
border-bottom: 2px solid #36B9FF;
width: 100%;
}
.pcHersenen {
width: auto;
height: auto;
max-width: 90px;
margin-top: -16px;
}
.ervaringLeermeester {
float: left;
}
.commercie {
margin-top: -15px;
margin-left: -20px;
list-style-type: square;
}
.overOns {
width: 100%;
}
.pasfoto {
width: auto;
height: 150px;
border-radius: 30px;
}
.pasfotoP {
display: inline-block;
}
.pfJeroen {
margin-left: 30px;
}
/**********/
/* FOOTER */
/**********/
.footer {
background-color: #303030;
color: #FFF;
height: auto;
display: inline-block;
width: 100%
}
.footer p {
display: inline-block;
}
.footer .links a {
color: #FFF;
text-decoration: none;
pointer-events: none;
cursor: text;
}
.footer .rechts a {
color: #FFF;
}
.footer .rechts {
float: right;
margin-right: 10px;
}
.footer .links {
float: left;
margin-left: 10px;
}
我尝试了很多方法来解决此问题，但我认为您仅靠CSS就无法实现这一目标。添加#id到锚标记的href告诉浏览器把元素与y位置是ID：0我尝试添加::before的.content，padding-top......但每次加起来那个时候第一件...您不能120px在要链接到的每个div上添加填充，因为它看起来很荒谬。
我建议您尝试使用JS修复此问题或阅读这些相关文章。
另外，尽量不要在荷兰语中添加类或任何标记内容。如果您需要在此处提出问题，则应使用英语。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句