În această lecție vă voi spune cum să faceți un meniu de rollover utilizând tehnicile CSS Sprite.
Rollovers (meniuri ale căror aspect se schimbă atunci când acestea sunt plutind peste ele), de obicei, constă din mai multe state. Stări de bază: când mouse-ul este mutat, când este apăsat, după apăsarea. Fiecare stat necesită o imagine separată. În acest caz, meniul se dovedește a fi destul de greu, deoarece pentru fiecare buton este necesar să se încarce mai multe imagini.
Folosind sprite, puteți rezolva această problemă. Este utilizată doar o singură imagine și nu încarcă prea mult serverul și consumă trafic. Acest lucru este foarte util dacă utilizați pe deplin puterea acestei tehnologii.
Structura meniului este foarte simplă. Îl introducem în corpul documentului:
Dacă nu am folosi sprite, codul CSS ar arăta astfel:
Codul de mai sus utilizează o imagine separată pentru fiecare stare ca imagine de fundal.
Folosind o imagine, nu trebuie să schimbăm imaginea de fundal. Schimba doar locația fundalului. De exemplu, starea: hover va folosi fundalul mutat de numărul necesar de pixeli în stânga (în exemplul de 157 pixeli); stare: activă - 314 de pixeli.
Și codul CSS va arăta astfel:
Asta e tot. Schimbarea stărilor este foarte rapidă și nu necesită mult trafic. Un astfel de meniu este cross-browser (IE5 +, Mozilla, Opera, Safari)
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: