Eğitimi güzel, basit, yatay CSS menü oluşturmak için |

Eğitimi güzel, basit, yatay CSS menü oluşturmak için

Bu çok basit, yatay CSS menüsüdür. Bu eğiticide serin bir duraksamak etkisi ile basit ve cazip CSS menüsünü oluşturmak için yardımcı olur.

Öncelikle bize menü için CSS kod yazmayı sağlar ve. Burada .. kod gidiyor

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav Li 
  ( 
  display: inline; 
  ) 

  # nav Li bir 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  float: left; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  border-bottom: 1px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: solid; 
  ) 

  # nav Li a: sallanmak 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  border-bottom: 2px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: solid; 
  margin: - 1px; 
  ) 

İkinci tüm bize menü için HTML listesine yazmak sağlar. Bizim gibi, görüntüde, buraya gelecektir kod .. gösterilir 7 bağlantılar olsun


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Ana Sayfa </ a> </ p> 
  > About </a> </li> <li> <a href = "#"> </ a> </ li> Hakkında 
  > Services </a> </li> <li> <a href = "#"> Hizmetler </ a> </ p> 
  > Products </a> </li> <li> <a href = "#"> Ürünler </ a> </ p> 
  > Sitemap </a> </li> <li> <a href = "#"> Site Haritası </ a> </ p> 
  > Help </a> </li> <li> <a href = "#"> </ a> </ li> Yardım 
  > Contact Us </a> </li> <li> <a href = "#"> Bize Ulaşın </ a> </ p> 
  </ ul>