Typeset vízszintes menü alapján masterwebs
Jó napot,% username%. Ma megmutatom, hogyan lehet megjelölni a vízszintes menü alapján a menü ezen a fórumon. Már kész mindent előre Photoshop PSD fájl letölthető ezen a linken. maga a menü kissé módosított és így néz ki:
Amint látjuk, a menü kissé világosabb és úgy tűnt, a keresési forma. Mi képviseli a szerkezet a mi menüt. Pontok megnevezéseket kell végrehajtani hivatkozások formájában foglyok a tételek listáját
A módosítások mentéséhez és nyissa meg a fájlt, akkor kap a következő:
Meg kell, hogy hozzon létre egy függőleges gradiens színes színezni # 92cb2f # 57a20c.
Mi határozza meg a rögzített szélességű és magasságú, a blokk és a filé sarkok 5px. Aztán központosítani egységet. Itt van, mi történt. A legfontosabb, hogy a fájl elejétől style.css másolja visszaállítás css. Ezek a szabályok a „dump” minden stílus, megszüntetésével padding, stb
Ha megnézzük az eredményt. látni fogja, hogy a gradiens a kijelzőn, és a készülék az oldal közepére. Most folytassa a design a mi lista és linkek. Nézzük ki listákat egy vízszintes vonal, rendeljen árrés és Styling linkek:
Nézzük meg a jelenlegi lista:
Jól néz ki. Továbbra is hozzá stílusokat, hogy megtalálják a forma, és ne feledkezzünk meg a megosztó. Kezdjük az elválasztó. Ahogy azt mindig rögzíteni kell egy helyen, akkor igénybe abszolút pozicionálás. Röviden, az abszolút pozicionálás meghatározza a lehetőségét pozicionáló elemek viszonyítva a széleit a kijelzőn. De mi lesz akkor egy kicsit másképp.
Úgy döntöttem, hogy egy elválasztó formájában három pontot, a szokásos png kép nem torzulhat CSS, így nem éri meg. A HTML oldalon, közvetlenül a záró címke hozzon létre egy span elemet osztály .dots:
Kitűnő. Most lajstromozását. Ahogy azt fentebb már említettük, akkor használja az abszolút pozicionálás ezen elem. De ez nem lesz teljesen pontos, mert a szülő elem van rögzítve, és ha növelni vagy csökkenteni a dokumentum a böngésző, az elválasztó fog futni vízszintesen önkényesen. hogy elkerülje a szülő .main-menü kell állítani relativ elhelyezése. Így biztosítható, hogy a span épít hosszabb képest a szülő elem. Tehát ezt a sort a CSS fájlban az osztály .main-menü:
, Ami kell kihűlni. Írjunk stílusok a span:
Szóval, hogy ki. Most meg kell vigyázni az alak a keresés gombra, és a forma egy nagyító. Ahhoz, hogy ezt elérjük, némileg módosítják újra a HTML fájlt, és rögtön a határoló megváltoztatjuk a kódot erre:
Ez már jobb. Most már hozzá egy gombot, és megfordult az egészet egy külön
Most tartsa össze az egészet, és az eredmény:
Minden úgy alakult, ahogy szerettük volna. Kivéve, hogy a Mozilla és a Safari padding'om gombok vannak kisebb problémák, amelynek okát később fogjuk megtudni, és megoldani.