Das li im -Tag in HTML ist horizontal angeordnet

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>

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>

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>

  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>

  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>

  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>

  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>

  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>

  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!