Webhely fejléc és navigációs menü css - zencoderrel
A sapka létrehozásánál beágyaztam a beágyazott rétegek tulajdonságait
A kísérlet tisztaságára idézem ezeket a dimenziókat:
amelynek feladata háttérképet tartalmaz a fejléc navigációs listájához. Ennek a rétegnek a magassága megegyezik a kupak magasságával, és a háttérképet a blokk jobb sarkában helyezik el. Magassága megegyezik a kupak magasságával, ezért elegendő ahhoz, hogy vízszintesen jobbra jelölje, és hagyja, ahogy függőlegesen van.
Az ábra rövid, és nem foglalja el a sapka teljes szélességét, csak a jobb oldali részét, pontosan annyira, hogy elférjen a navigációs listán. Ennek a rétegnek a CSS-je az alábbi:
Most létrehozok egy újabb réteget
amelyben további háttérkép kerül. Magasságban kisebb, mint a réteg háttérképe
és ezen réteg tetején helyezkedik el, átfedve.
Ezért a háttérréteg
csak részben látható, csak az alsó pereme, amelyhez a navigációs háttér szerepét hozzárendeli. A réteghez
Kifejezetten meghatározták magasságát. A tulajdonságokkal ellátott kód az alábbi:
Nos, a probléma szinte megoldódott. Ebben az esetben sem abszolút, sem relatív pozicionálást nem használtunk. csak a háttérréteg eltolódása. Még meg kell teremteni az utolsó réteget, amely elvégzi a webhely logójának feladatát. Minden más rétegre tegyem, és kattinthatóvá válik az összes helyén.
Ismét használni fogom a háttérképet, amelyet ezt a réteget fogok elhelyezni. Nincs img az html kódban! Nem szükséges pozícionálni vagy mozgatni, mivel a blokk bal felső sarkában található (ahogy a kísérlet egyszerűsége érdekében készültem). Csak a réteg magasságát és szélességét határozza meg kifejezetten a háttérkép magasságával és szélességével:
A réteg kinyitásához egy linket helyezek el benne. Mivel kezdetben kis méretű elem (
), akkor lehetetlen szabályokat állítani arra, hogy "kiterjesszük" a szülő réteg teljes magasságát és szélességét
Ezért az objektum használatával "bekapcsolom" a kapcsolatot egy blokkelemre
És most kibontom a kapcsolatot, megadva a szélességet és a magasságot százalékban. Természetesen ezek a paraméterek pixelekkel is megadhatók, mivel a logó mérete ismert. De jobb, ha ezt a feladatot a böngésző vállára állítja - hagyja kiszámítani a blokkhivatkozás méretét:
Továbbra is létrehoz egy navigációs menüt a sapkákhoz, amelyeket a réteg tetejére kell helyezni
Hozzon létre egy számozatlan listát, amelyet a rétegbe helyezek
Mivel a kód a réteget
a fenti helyen található és rögzített magasságú, a lista az alatta lévő összes fennmaradó helyet foglalja el:
Most elég, ha a listát jobbra mozgatjuk
és írja fel azt a szokásos tulajdonságokat, hogy vízszintesen rendezzék és stilizálják:
Az egyetlen dolog, ami nehézségekbe ütközött, az volt, hogy a külső blokk alig látható behúzása volt