Heim > Artikel > Web-Frontend > Wie richtet man beim Entwerfen einer Front-End-Webseite die Navigationsleiste zentriert aus (Codetest)?

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

藏色散人Original: 2018-08-09 09:57:2714562Durchsuche

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!

css

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

Vorheriger Artikel：So verwenden Sie CSS, um den Animationseffekt des Achterbahnladers zu realisierenNächster Artikel：So verwenden Sie CSS, um den Animationseffekt des Achterbahnladers zu realisieren

In Verbindung stehende Artikel

Mehr sehen