Navigationsleiste
Was ist eine Navigationsleiste? Das ist es, was jede Website haben wirdNavigationsleiste, dieser Artikel entführt Sie in die Welt der Navigationsleisten. Zunächst müssen wir die Rolle der Navigationsleiste verstehen – sie kann Benutzern schnell dabei helfen, ihre Bedürfnisse auszuwählen. Eine übersichtliche Navigationsleiste ermöglicht es Benutzern, die grundlegenden Modulfunktionen der Website beim ersten Mal zu verstehen, und als Beginn der Website ist auch ihr Image sehr wichtig. Stellen Sie sich vor, Sie betreten eine Website und ihre Navigationsleiste sieht so aus (wie der CSS-Code, den Sie geschrieben und dann versehentlich gelöscht haben). Möchten Sie trotzdem surfen?
Wenn Sie noch nie die Navigationsleiste einer Webseite geschrieben haben, spielt das keine Rolle. Lesen Sie diesen Artikel einfach geduldig, Sie werden viel davon profitieren! Übrigens, wenn Sie noch nicht einmal HTML kennen, finden Sie hier ein Portal zum Erlernen HTML. Es ist wirklich nicht schwer , werfen Sie zumindest einen Blick darauf, wie HTML aussieht. Also lasst uns anfangen
1. Zusammensetzung
Eine übliche Navigationsleiste besteht im Allgemeinen aus folgenden Teilen:
- Optionsliste: Es handelt sich um eine Funktion, die Sie anklicken und aufrufen können
- Unteroptionsliste: Ich nenne sie hier die Liste der zweiten Ebene. Dabei handelt es sich um eine detailliertere Liste, die angezeigt wird, wenn die Maus über die Optionsliste fährt (natürlich gibt es Listen der dritten Ebene, aber sie sind alle gleich).
- Suchfeld: Es ist für Benutzer bequem, nach dem Zielinhalt zu suchen. Natürlich befinden sich einige möglicherweise nicht in der Navigationsleiste
- LOGO: das große Logo der Website, die Vorderseite der Karte
Es gibt also so viele Grundkomponenten, was gibt es Ihrer Meinung nach noch mehr? Der Rest hängt von Ihren persönlichen Vorlieben ab, aber denken Sie an eines:Die Navigationsleiste sollte prägnant und nicht ausgefallen sein!
2、LOGO
Das Logo hängt hauptsächlich von Ihrer Ästhetik ab, da verschiedene Logos an unterschiedlichen Positionen platziert werden, was zu völlig unterschiedlichen visuellen Erlebnissen führen kann. Aber im Allgemeinen sagt jederobere linke Ecke. Logos sind grundsätzlich reine Bilder (empfohlen) oder Bilder + Text, daher sind auch die CSS-Stileinstellungen sehr begrenzt. Warum empfehlen Sie reine Bilder? Das dient nicht der Bequemlichkeit. Wenn Sie zu viele Texte haben, müssen Sie das Layout neu anordnen, also haben Sie es eilig? Ich habe schon früher zerlegte Bilder gesehen, und ich fürchte, das liegt nicht daran, dass nicht genügend CSS-Codes vorhanden sind. Hier sind einige gängige Platzierungsmethoden. Werfen Sie einfach einen Blick darauf, denn die Platzierung des Logos ist nicht unser Fokus. Sie müssen lernen, wie man das Logo gestaltet
Google platziert in der oberen linken Ecke:
CSDN befindet sich ebenfalls in der oberen linken Ecke:
W3school's (eine häufig verwendete Website zum Erlernen des Frontends):
Die Central South University liegt in der Mitte (ist das erstaunlich):
3. Funktionsmenüliste
Unser erster Fokus: Warum heißt es Liste? Denn in HTML besteht es grundsätzlich aus List-Tags (<ul>, <ol>, <dl>, <li>) und Link-Tags (<a>). Option im Allgemeinenhorizontale Anordnung, gleichmäßig in der Mitte verteilt, dann schreiben wir zuerst einen Rahmen, der die Anwendung der HTML-Liste darstellt
<!-- 首先先把 HTML 的代码写完，这个不难的，大家看的时候一定要按照逻辑来看，不要死磕一句 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<!-- 我们将 HTML 和 CSS 代码分开写，分离可以让代码可读性更好-->
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 养成习惯，导航栏用 div 块包起来，名称为 header -->
<div id="header">
<!-- 这里每一个功能都设置了 class 名称 -->
<ul>
<div class="menu">
<li class="front-page"><a href="#">首页</a></li>
<li class="blog"><a href="#">博客</a>
<!-- 这是一个子列表 -->
<ul class="blog-subfunction">
<li><a href="#">写博客</a></li>
<li><a href="#">删博客</a></li>
<li><a href="#">看博客</a></li>
</ul>
</li>
<li class="course"><a href="#">课程</a></li>
<li class="developer-mall"><a href="#">开发者商城</a></li>
<li class="answer-request"><a href="#">问答</a></li>
<li class="community"><a href="#">社区</a></li>
</div>
</ul>
</div>
</body>
</html>
Werfen wir einen Blick auf das erste Erscheinungsbild:
Überlegen Sie, welche Änderungen wir benötigen:
- Die Funktionen sind horizontal angeordnet und der Abstand bleibt erhalten
- Entfernen Sie den schwarzen Punkt aus der Liste
- Ändern Sie Schriftfarbe, -größe und -abstand
- Vergessen Sie nicht: Wir möchten nicht, dass die Unterliste hier angezeigt wird, sondern dass der Blog angezeigt wird, wenn die Maus darüber bewegt wird
/* 接下来开始美化，我们一步步来，不要急
用 CSS 美化网页的时候一定要遵循 从上到下、从外到内 的原则
从上到下：先出现的标签，先设置样式
从内到外：出现标签嵌套的时候，先设置外部标签的样式，再设置内部标签的样式。这是因为外部标签可能会影响内部标签 */
/* 全局样式设置，内边距和外边距都为 0，因为很多标签自带边距，这是我们不希望的 */
*{
margin:0;
padding:0;
}
/* 去掉所有列表前面的黑色圆点 */
li {
list-style: none;
}
/* 去掉链接的下划线 */
a {
text-decoration: none;
}
/* 接下来开始设置局部样式，看着代码有点多，其实只要明白逻辑，书写并不是很困难。
有心的读者可以发现，博主一直在强调逻辑，因为代码是多变的，而逻辑是固定的，我们以后在书写网页代码的时候，一定是有目的的书写，而不是用 Google 开发者工具一个个试 */
/* 设置 header（导航栏）的宽高以及背景色，一般我们会指定一个高度，方便内部元素继承这个属性 */
#header {
background-color: #008080;
width: 100%;
height: 50px;
}
/* 设置列表样式，注意这里的 menu 并不是指代 ul 标签，而是 ul 下面的 div 块标签 */
#header .menu {
display: flex; /* display: flex：弹性盒子，很适合多个元素按一行或者一列排开 */
height: 100%; /* 设置和导航栏 header 相同的高度 */
line-height: 50px; /* 设置行高，注意不要使用 inherit（继承），因为 menu 的父标签不是 header，而是 ul，我们并没有设置 ul 的行高，无法继承 */
max-width: 600px; /* 最大宽度 */
padding: 0 20px; /* 左右内边距均为 20 像素 */
}
/* 设置 ul 中每一个 li 的样式*/
#header .menu li{
height: 100%; /* 设置高度，让每一个标签的高度也等于 header 高度 */
}
/* 设置 li 的鼠标移过动画 */
#header li:hover {
background: #4c9e9e;
transition: 0.5s; /* 持续 0.5 秒 */
}
/* 设置 li 中 a 标签样式，可以发现我们严格按照从外到内的原则编写样式 */
#header .menu li a {
font: bolder normal 16px Source Sans Pro;
color: #fff; /* 不解释，看不懂的补 CSS 知识去 */
padding: 14px 15px;
}
Bisher haben wir also den Grundstil festgelegt, außer dass die Unteroptionen nicht festgelegt wurden (vergessen Sie nicht, dass die Unteroptionen am Anfang unsichtbar sein sollen!)
Ursprünglicher Stil (hier habe ich die Schriftfarbe auf Schwarz eingestellt, sonst überlappt sie sich mit dem weißen Hintergrund. Denken Sie daran, die Schriftfarbe zu ändern, wenn Sie es ausprobieren!)
/* 接下来我们先找找上述列表的需要改进的地方：
1、“博客” 间距有点大
2、让下方三个子选项消失
↓ 见代码 ↓ */
/* 设置“博客”子列表，注意还是按照从外到内的原则，这里设置的是 ul */
#header .menu .blog-subfunction{
display: none; /* 重点※，取消可见，让整个子列表处于不可见状态，也可以使用 visibility: hidden */
position: absolute; /* 又一个重点※，首先我们分析一下为什么 “博客” 宽度要明显大于其他选项，这是因为它和下方的 “写博客”、“删博客” 同归在一个块内，那块的宽度当然取决于字最多的，也就是 3 个字宽度，所以我们希望 “博客” 和下方的分开，这时候就需用将下方的块进行绝对定位处理! */
background: #008080;
border-radius: 5px; /* 圆角处理 */
}
/* 设置 ul 中的 li 标签 */
#header .menu .blog-subfunction li{
padding: 0 0.5em;
text-align: center;
}
/* 本场第二个 hover，功能为：鼠标移过 “博客” 的时候，下方的 子列表 处于可见状态
解释一下选择器：这相当于是一个后代选择器，解释为当鼠标移动到 header 的 menu 上面的 bolg 时，下方的列表该咋办（仔细品） */
#header .menu .blog:hover .blog-subfunction{
display: block;
}
Schauen Sie sich nun den endgültigen Stil an:
Dies ist nur eine Art zu schreiben. Das Schreiben von Webseiten darf nicht eingeschränkt werden. Es gibt immer noch viele Animationen oder Show-Operationen, die durch CSS und JavaScript realisiert werden können. Was Blogger schreiben, ist nur eine Art Denken, und Lerntechnologie muss mit Denken beginnen. Der Platz hier ist begrenzt, daher werde ich ihn hier vorstellen
abschließend:
- Stellt den Aufbau der Navigationsleiste vor
- Einführung in die Platzierung des Logos, Design selbst zum Nachdenken
- So schreiben Sie ein Optionsmenü (Schwerpunkt)
Im nächsten Artikel werden wir auf den zweiten wichtigen Punkt der Navigationsleiste eingehen:Suchleiste( Portal ). Klicken Sie mit der Maus und nehmen Sie es in die Hand. Ihre Unterstützung ist die größte Motivation für Blogger. Vielen Dank, dass Sie hier sind!