Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?

藏色散人

Aug 09, 2018 am 09:57 AM

Für unerfahrene Freunde, die gerade erst mit der Gestaltung des Frontends einer Website beginnen, ist es unvermeidlich, dass die Navigationsleiste durcheinander kommt. Im Allgemeinen ist die Ausrichtung der Navigationsleiste in der Mitte die beste Möglichkeit, das Zuhause anzuzeigen Seite. Wie kann man also mit einfachem Div+CSS die Navigationsleiste mittig ausrichten? In diesem Artikel wird eine sehr einfache Methode zum Erzielen einer zentrierten Ausrichtung der Navigationsleiste ausführlich vorgestellt. Ich hoffe, dass sie für Sie hilfreich ist!

Der Beispielcode für die zentrierte Ausrichtung der Navigationsleiste lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div+css做导航栏居中对齐示例</title>
</head>
<style>
    body
 {
        text-align:center;    /* 文字居中 */
 }
    ul
 {
        list-style-type:none; /* ul前面的点  */
 }
    *
 {
        margin:0px 0px;     /* 到边框的距离 */
 }
    .menu
 {
        background: #029789; /* 导航条背景的颜色  */
 }
    .nav
 {
        margin:0 auto;     /* 导航栏文字的位置  */
 width:800px;   /* 和文字宽度有关，不能小于文字宽度的总和  */
 height:80px;   /* 导航栏的宽度  */
 }
    .nav a
 {
        float:left;              /* 导航栏的位置配置 */
 width:140px;          /* 选中的文字块的长度  */
 line-height:80px;              /* 选中的文字块的宽度  */
 text-decoration: none;               /* 去掉连接下划线  */
 font-size:45px;           /* 字体大小 */
 color: #FFFFFF;           /* 字体颜色 */
 }
    .nav li a:hover
 {
        background-color: #1094f2;         /* 选中的文字块的颜色 */
 text-decoration:none;     /* 选中时去掉连接下划线 */
 }
    .nav li a:link{
        text-decoration:none; /* 连接被点之后没有下划线  */
 }
</style>
<body>
<div class="menu">  <!-- class选择器 -->
 <div class="nav">
        <ul>    <!-- ul标签 -->
 <li><a href="#">导航1</a></li>  <!-- li标签 -->
 <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
            <li><a href="#">导航4</a></li>
            <li><a href="#">导航5</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Dieser Code kann für lokale Tests direkt kopiert werden und das folgende Bild wird angezeigt auf der Webseite:

Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)? Einführung in verwandte Tag-Attribute:

Das text-decoration-Attribut gibt die dem Text hinzugefügte Dekoration an. Die möglichen Werte und Beschreibungen sind wie folgt:

Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?

[Empfohlene verwandte Artikel]

Detaillierte Beispiele für fünf Methoden in CSS, um Horizontalität zu erreichen Zentrierung von Navigationsmenüs

So verwenden Sie DIV und CSS, um eine Navigationsleiste zu erstellen

div+css, um eine Navigation der ersten Ebene zu erstellen

So verwenden Sie CSS, um ein DIV zu zentrieren

Das obige ist der detaillierte Inhalt vonWie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

So viele FarblinksApr 13, 2025 am 11:36 AM

Es gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.

Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AM

Robin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte

Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AM

Ich liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht

Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AM

Viele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das

Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AM

Seiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf

Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AM

Es gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit

Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AM

Meistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht