Tutorial, lai radītu skaistu, vienkāršu, horizontālās CSS menu |

Tutorial, lai radītu skaistu, vienkāršu, horizontālās CSS menu

Tas ir ļoti vienkāršs, horizontālās css izvēlnē. Šī apmācība palīdz izveidot vienkāršu un pievilcīgu CSS menu ar atdzist lidināties spēkā.

Vispirms ļaujiet mums rakstīt CSS kodu izvēlnē. šeit iet kodu ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  Rādīt: inline; 
  ) 

 # nav li a 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  Pluds: left; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  border-bottom: 1px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: cieto; 
  ) 

  # nav li a: savilkties 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  border-bottom: 2px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: cieto; 
  margin: - 1px; 
  ) 

Otrkārt visu dariet mums rakstīt HTML sarakstā izvēlnē. Pasakiet mums ir 7 saites, kā redzams attēla, šeit iet kodu ..


 > <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 = "#"> Sākums </ a> </ li> <li> <a href = "#"> Par </ a> </ li> <li > <a href = "#"> Pakalpojumi </ a> </ li> <li> <a href = "#"> Produkti </ a> </ li> <li> <a href = "#"> Lapas karte </ a> </ li> <li> <a href = "#"> Palīdzība </ a> </ li> <li> <a href = "#"> Sazinieties ar mums </ a> </ li> < / ul>