Ich programmiere diese Website als Abschlussprojekt für meinen HTMl-Kurs auf Freecodecamp und stoße auf zwei Fehler, die ich nicht beheben kann. Einerseits habe ich eine kleine weiße Linie zwischen meiner Navigationsleiste und dem ersten Abschnitt. Andererseits verwende ich den Hover-Selektor, um den Hintergrund des Navigationsleisten-Links grau zu machen, aber unten immer noch eine kleine dunkle Linie beizubehalten.
Die weiße Linie sieht so aus:
Um die erste weiße Linie zu korrigieren, habe ich versucht, den Abstand und den Rand zu entfernen (dadurch wurde ein Teil des Leerraums am Rand entfernt, aber nicht der verbleibende Leerraum zwischen den beiden Abschnitten. Außerdem habe ich alle CSS-Hintergründe in Blau geändert. Welcher Teil füllt den Raum aus? , und es wird nur blau, wenn ich den Hintergrund des Körpers ändere, dessen Ränder und Innenabstand bereits auf 0 eingestellt sind
.So sieht die kleine schwarze Linie aus: Wie Sie sehen können, befindet sich unter dem grauen Hintergrund eine kleine schwarze Linie!
Hierfür habe ich versucht, den genauen Platz zu verstehen, den die verschiedenen Registerkarten in der Navigationsleiste (li, ul, a...) einnehmen, aber ohne Erfolg, ich verstehe wirklich nicht, wie diese Registerkarten entscheiden, ob sie Platz beanspruchen oder nicht in der Navigationsleiste. Ich kann keine Etiketten finden, die zusätzlichen schwarzen Zeilenraum beanspruchen.
Das ist der HTML-Code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Double Team Cooking</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<section id="welcome">
<nav id='navbar'>
<ul>
<li><a href="#whodis">Who Am I?</a></li>
<li><a href="#Projectos">My Projects</a></li>
<li><a href="#hola">Contact</a></li>
</ul>
</nav>
</section>
<section id='Who-Am-I'>
<h2 id='whodis'>Who Am I?</h2>
<p> Hey, I'm Pedro.</p>
<p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
</section>
<section id='Projects'>
<h2 id='Projectos' class="project-title">My Projects</h2>
<p>So, what am I working on?</p>
<div id="electriccar"></div>
<div id="website"></div>
<div id="TWR"></div>
</section>
<section id="Contact">
<h2 id="hola">Contact Me</h2>
<p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
</section>
</body>
</html>
Das ist das CSS:
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
width: 100%;
padding: 0px;
margin: 0px;
}
nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 40px;
background-color: rgb(24,24,24);
}
nav ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
padding-left: 0px;
width: 100%;
height: 100%;
margin: 0px;
align-items: center;
}
nav li {
display: inline-block;
}
li a {
text-decoration: none;
color: white;
padding: 10px;
}
li a:hover {
background-color: rgb(64,64,64);
}
#Who-Am-I {
height: 100%;
background-color: rgba(0,30,0,0.8);
}
Vielen Dank für Ihre Hilfe!
尝试
* { padding: 0; margin: 0; }