În baza creării capacului am pus proprietatea straturilor imbricate
Pentru puritatea experimentului, voi cita aceste dimensiuni:
a cărei sarcină va conține o imagine de fundal pentru lista de navigare a antetului. Înălțimea acestui strat este setată egală cu înălțimea capacului, iar imaginea de fundal este poziționată în colțul din dreapta al blocului. Înălțimea sa este egală cu înălțimea capacului, deci este suficient să îl marchează orizontal spre dreapta și să îl lăsați ca în verticale.
Cifra este scurtă și nu va ocupa întreaga lățime a capacului, ci doar o parte din partea dreaptă, exact exact pentru a se potrivi cu lista de navigare. CSS pentru acest strat este prezentat mai jos:
Acum creez un alt strat
în care va fi plasată încă o imagine de fundal. În înălțime, este mai mică decât imaginea de fundal a stratului
și va fi situat pe partea de sus a acestui strat, suprapunându-l.
Prin urmare, stratul de fundal
va fi văzut doar parțial, numai marginea inferioară, pentru care rolul fondului de navigație este atribuit. Pentru strat
Mi-am stabilit în mod explicit înălțimea. Codul cu proprietățile este prezentat mai jos:
Problema este aproape rezolvată. În acest caz, nici poziția absolută, nici cea relativă nu a fost utilizată. numai schimbarea stratului de fond. Rămâne să creați ultimul strat, care va efectua sarcina logo-ului site-ului. Am plasat-o pe partea de sus a tuturor celorlalte straturi și l-am făcut clic pe întregul ei spațiu.
Din nou, voi folosi imaginea de fundal, pe care o voi pune în acest strat. Nu img în codul html! Nu este necesar să o poziționați sau să o mutați, deoarece va fi localizată în colțul din stânga sus al blocului (așa cum mi-am propus de dragul simplității experimentului). Doar setați în mod explicit această înălțime și lățime de strat egal cu înălțimea și lățimea imaginii de fundal:
Pentru a face stratul clicabil, am pus un link în interiorul acestuia. Întrucât este inițial un element mai mic (
), atunci este imposibil să se stabilească reguli pentru a "întinde" întreaga înălțime și lățime a stratului părinte
Prin urmare, eu "transform" referința într-un element bloc folosind proprietatea
Și acum voi întinde legătura, dându-i lățimea și înălțimea în procente. Desigur, puteți specifica și acești parametri utilizând și pixeli, deoarece dimensiunea logo-ului este cunoscută. Dar este mai bine să puneți această sarcină pe umerii browserului - permiteți-i să calculeze dimensiunile blocului:
Rămâne să creați un meniu de navigare pentru capace, care trebuie plasat pe partea de sus a stratului
Creez o listă neimprimată pe care o plasez în interiorul stratului
Deoarece prin codul stratul
situată mai sus și are o înălțime fixă, lista va lua tot spațiul rămas sub ea:
Acum este suficient să schimbi lista în dreapta cu ajutorul
și să prescrie pentru el proprietățile obișnuite pentru aranjarea orizontală și stilizarea:
Singurul lucru care mi-a provocat dificultăți era indentarea abia vizibilă între blocul extern
Articole similare
Trimiteți-le prietenilor: