Tutorial kreirati prekrasne, jednostavne, horizontalne CSS menu
Ovo je vrlo jednostavna, horizontalna css izbornika. Ovaj tutorial pomaže stvoriti jednostavan i atraktivan CSS izbornik s hladnom hover efekt.
Prije svega, dozvolite nam pišite CSS koda za izbornika. ovdje ide kod ..
# nav
(
padding: 0;
)
(
padding: 0;
)
# nav li
(
display: inline;
)
(
display: inline;
)
# nav li jedan
(
font-family: Arial;
font-size: 12px;
; text-decoration: none;
plovak: lijevo;
padding: 10px;
; background-color: # 333333;
; color: # FFFFFF;
border-bottom: 1px;
; border-bottom-color: # 000000;
border-bottom-style: solid;
)
(
font-family: Arial;
font-size: 12px;
; text-decoration: none;
plovak: lijevo;
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;
)
(
; background-color: # 9B1C26;
padding-bottom: 12px;
border-bottom: 2px;
; border-bottom-color: # 000000;
border-bottom-style: solid;
margin: - 1px;
)
Drugo sve dajte nam pišete HTML liste za izbornika. Reci mi ima 7 linkovi, kao što je prikazano na slici, ovdje ide kod ..
> <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 = "#"> Početna stranica </ a> </ li> <li> <a href = "#"> O </ a> </ li> <li > <a href = "#"> Usluge </ a> </ li> <li> <a href = "#"> Proizvodi </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = "#"> Pomoć </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul>
Aha ..! svojim učinio! vidjeli kako jednostavan je za izradu CSS meni ... A demo ..?
Check out demo ispod ..
Vezani članci:
Ako ste uživali čitajući ovaj članak, molimo vas da provjerite drugih srodnih artikala u nastavku:
Ajay govori o: 15. lipnja 2009 at 7:54 pm Said:
ohhh, hvala za šerif ovaj tutorial