Heim > Web-Frontend > HTML-Tutorial > Das li im
    -Tag in HTML ist horizontal angeordnet

Das li im
    -Tag in HTML ist horizontal angeordnet

巴扎黑
Freigeben: 2017-06-27 13:26:36
Original
6339 Leute haben es durchsucht

Der erste Schritt besteht darin, die HTML-Codestruktur des horizontalen Menüs zu schreiben

Bitte fügen Sie den folgenden Code zum Navigationsleistenbereich des HTML-Dokuments hinzu.

<ul id="menu">
 <li><a href="http://www.baidu.com">Baidu.Com</a></li>
 <li><a href="http://www.Code52.Net">Code52.Net</a></li>
 <li><a href="http://www.yahoo.com">Yahoo.Com</a></li>
 <li><a href="http://www.google.com" class="last">Google.Com</a></li>
</ul>
Nach dem Login kopieren

Zweiter Schritt, CSS-Code schreiben

1. Öffentlichen Stil festlegen

Bitte ändern Sie den folgenden CSS-Code Zum ...-Tag-Bereich des HTML-Dokuments hinzugefügt.

<style type="text/css">
#menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>
Nach dem Login kopieren

Wie wir alle wissen, sind die Elemente

  • in
      standardmäßig vertikal angeordnet.

      Tipps: Da wir jetzt die Navigationsleiste herausziehen, um sie unabhängig zu erklären, müssen wir einige öffentliche Stile festlegen. Wenn Sie den Standardeffekt im Körper oder an anderen Stellen zurückgesetzt haben, Der obige Code kann entfernt werden

      2. Lassen Sie den Text horizontal angeordnet sein

      Wie wir alle wissen, sind die Elemente unter dem

        -Tag
      • Wir müssen standardmäßig eine zusätzliche CSS-Eigenschaft definieren, um sie horizontal auszurichten.

        <style type="text/css">
        #menu li { 
        float:left; /* 往左浮动 */
        }
        </style>
        Nach dem Login kopieren

        3. Legen Sie den Linkstil fest:

        <style type="text/css">
        #menu li a {
        display:block; /* 将链接设为块级元素 */
        padding:8px 50px; /* 设置内边距 */
        background:#3A4953; /* 设置背景色 */
        color:#fff; /* 设置文字颜色 */
        text-decoration:none; /* 去掉下划线 */
        border-right:1px solid #000; /* 在左侧加上分隔线 */
        }
        </style>
        Nach dem Login kopieren

        Wir verwenden Padding, um jedes Menü breiter zu machen. Einige, wenn Ihr Menü eine Mischung aus Chinesisch und Chinesisch ist Englisch wird empfohlen, die Höhe und Breite eines einzelnen Menüs festzulegen, um Höhenfehler zu vermeiden, die durch inkonsistente Zeilenhöhen chinesischer und englischer Zeichen verursacht werden. So legen Sie eine feste Höhe fest:

        <style type="text/css">
        #menu li a {
        display:block; /* 将链接设为块级元素 */
        width:150px; /* 设置宽度 */
        height:30px; /* 设置高度 */
        line-height:30px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
        text-align:center; /* 居中对齐文字 */
        background:#3A4953; /* 设置背景色 */
        color:#fff; /* 设置文字颜色 */
        text-decoration:none; /* 去掉下划线 */
        border-right:1px solid #000; /* 在左侧加上分隔线 */
        }
        </style>
        Nach dem Login kopieren

        4. Link-Hover-Effekt:

        Durch die kombinierte Wirkung der oben genannten Schritte entsteht der vorläufige Rahmen einer horizontalen Navigation Die Leiste wird angezeigt. Dieser Schritt dient hauptsächlich dazu, den Hover-Effekt des Links zu definieren, um die Navigationsleiste schöner zu machen. Wenn Sie die Navigationsleiste noch auffälliger gestalten möchten, können Sie natürlich ein Hintergrundbild in der CSS-Hover-Eigenschaft definieren.

        <style type="text/css">
        #menu li a:hover {
        background:#146C9C; /* 变换背景色 */
        color:#fff; /* 变换文字颜色 */
        }
        </style>
        Nach dem Login kopieren

        Hier gibt es einen Fehler im Code. Da die :first-child-Pseudoklasse von den Browsern der IE-Serie nicht unterstützt wird, können wir dies nur tun Schreiben Sie einen separaten Stil und fügen Sie den letzten hinzu. Die Ränder werden entfernt und dem HTML-Code wird ein zusätzlicher Selektor hinzugefügt.

        <ul id="menu">
        <li><a href="http://www.baidu.com">Baidu.Com</a></li>
        <li><a href="http://www.Code52.Net">Code52.Net</a></li>
        <li><a href="http://www.yahoo.com">Yahoo.com</a></li>
        <li><a href="http://www.google.com" class="last">Google.com</a></li>
        </ul>
        
        <style type="text/css">
        #menu li a.last {
        border-right:0; /* 去掉左侧边框 */
        }
        </style>
        Nach dem Login kopieren

        Okay, jetzt wurde ein einfaches horizontales Navigationsmenü erstellt, ist es nicht sehr einfach? Der vollständige Code ist unten angegeben:

        <style type="text/css">
        #menu { 
         font:12px verdana, arial, sans-serif; 
        }
        #menu, #menu li {
         list-style:none;
         padding:0;
         margin:0;
        }
        #menu li { 
         float:left; 
        }
        #menu li a {
         display:block;
         /* 如果是中英文混排的文字,建议用固定宽度
         width:150px;
         height:30px;
         line-height:30px;
         text-align:center;
         */
         padding:8px 50px;
         background:#3A4953;
         color:#fff;
         text-decoration:none;
         border-right:1px solid #000;
        }
        #menu li a:hover {
         background:#146C9C;
         color:#fff;
         text-decoration:none;
         border-right:1px solid #000;
        }
        #menu li a.last {
         border-right:0; /* 去掉左侧边框 */
        }
        </style>
        Nach dem Login kopieren

        Sie können die von uns erstellte Online-Demo ansehen und das in diesem Artikel bereitgestellte Beispielpaket herunterladen.

        Ich habe den obigen CSS-Stil geändert. Wie folgt:

        Das obige ist der detaillierte Inhalt vonDas li im

          -Tag in HTML ist horizontal angeordnet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage