Loengumaterjal luua Ilus, lihtne, horisontaalsed CSS navigation |

Loengumaterjal luua Ilus, lihtne, horisontaalsed CSS menüü

See on väga lihtne, css horisontaalne menüü. See juhendaja aitab luua lihtsa ja atraktiivne CSS menüü koos jahedas hover mõju.

Kõigepealt meile kirjutada CSS kood menüüs. Siin läheb koodi ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

 # nav li a 
  ( 
  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: hover 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  border-bottom: 2px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: solid; 
  margin: - 1px; 
  ) 

Teiseks kõigi meile kirjutada HTML nimekirja menüüs. Ütle meil on 7 sidemeid, nagu on näidatud pilt, siin läheb koodi ..


 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Help </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> <ul id = "nav"> <li> <a href = "#"> Avaleht </ a> </ li> <li> <a href = "#"> About </ a> </ li> <li > <a href = "#"> Teenused </ a> </ li> <li> <a href = "#"> Tooted </ a> </ li> <li> <a href = "#"> Sisukord </ a> </ li> <li> <a href = "#"> Abi </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul>