Példák HTML és CSS - vízszintes menü

előző ◈ a következő

Ezen az oldalon vannak példák, hogy hozzon létre egy vízszintes menü a weboldal HTML és CSS. Ezen túlmenően, a referenciák vízszintesen vannak elhelyezve, osztoznak egy másik jellemzője ezeknek menü - szöveges linkek benne - ez tényleg a szöveget a címke . ahelyett, hogy a kép, ahol a szöveg a kép egy részét.

Az általános gyakorlat az, hogy hozzon létre egy navigációs lista alapú, ezért is nézd meg ezeket a lehetőségeket. Kedvéért csökkenti a kód példák nem használhatók semmiféle dekoratív élvezetek kerek a sarkokat, de ne feledje, hogy a linkeket a CSS sok szempontból meg lehet változtatni. Ezért, ha azt szeretnénk, akkor könnyen hozzá a szükséges kódot a CSS-stílusok, hogy egy vízszintes menü, amelyre szüksége van.

És még egy dolog. Az összes példában, akkor ráakad egy menüpont class = „aktuális” (aktuális), amely nem tartalmaz egy linket. Ez egy bemutató, és jelzi, hogy milyen kell kinéznie egy menüpont, amely megfelel az oldalon, ahol a felhasználó található. Az a tény, hogy az internet jó gyakorlat hiánya linkek lapok hivatkoznak saját maga és az úton, közel azonos tisztviselők mondani keresők (Yandex, Google, stb.)

Egy egyszerű vízszintes menü

A legegyszerűbb vízszintes menü sallang nélkül.

Minta HTML és CSS: egy egyszerű vízszintes menü

Leírás példa

  1. Készítsen egy felsorolás (tag

Keresse meg a menüpontok egy sorban, és összehangolja azokat más módon - azáltal, hogy a két utolsó leírások pont CSS float tulajdonság értékét balra vagy jobbra. De itt meg kell érteni, hogy az értéke elem van hátra lesz a helyes sorrendben, de a jobb (ez szükséges a mi példánkban) akkor megfordítja a sorrendet, és meg kell változtatni a helyét a száműzetés.

Blokk vízszintes menü (float)

Ez a menü hivatkozások mondatok, amelyekben meg lehet változtatni a szélességét és magasságát, ha szükséges.

Minta HTML és CSS: blokk vízszintes úszó menü

Leírás példa

  1. Az ingatlan CSS float: left épület listatételek vízszintesen és adjunk mindegyik jobbra mező (CSS margin-right), így azok nem egymás mellett.
  2. Ne a linkek ágyazott (CSS display: inline-block), hogy ha szükséges, lehet átméretezni. A végén kérje szükséges összes vízszintes menü design.

Mivel a pop-up menü a bal oldalon, a HTML-elemeket, amelyet található a navigáció alatt, akkor is képes obtech. Ennek elkerülése érdekében, akkor lehet, hogy egy megszakítás áramlását a CSS tiszta tulajdonság vagy állítsa a blokk a class = „menu” oly magas, hogy garantáltan nagyobb, mint a magassága linkeket.

Blokk vízszintes menü (kijelző)

Azt, hogy egy további blokk menü, de egy kicsit másképp.

Minta HTML és CSS: blokk vízszintes kijelző menü

Leírás példa

  1. Építési menüpontok egy vízszintes sorban ismét alkalmazni display: inline. Ezt követően lehetővé teszi számunkra, hogy összehangolják elemeket a központban listából.
  2. Nos, linkek és címke class = „aktuális” átalakulni integrált egységek, hogy így egyértelműen meg kell határozni, és változtatni a szélességét (CSS szélesség) és a magasság (CSS magassága), ha szükséges.
  3. Arra kérünk minden elemét szükséges távolság formájában keretek, a szöveg színe, háttér, stb

Vízszintes menü lapok

Nézzük módosítsa az előző példához, és egy menü, amely hasonló lesz a lapok. Ilyen dolgok gyakran használt weboldalak.

Minta HTML és CSS: blokk vízszintes menü lapok

Leírás példa

Ez a példa hasonló az előzőhöz, ezért csak azokat a különbségeket.

  1. Reserve a blokk a mi vízszintes menü csak az alsó határ, a keret (CSS border-bottom), valamint változás a kitöltés (CSS padding), így az elemek vannak nyomva, hogy a lista a határon. Ezúttal nem fogjuk igazítani menüpontok bármelyik fél vagy a központban, csak kérni a nagy bal margó a blokk, így ő tolta őket egy kicsit a szélét.
  2. Ennek eredményeként a kereset első szakaszában a menüpontok, és ebből következően a referencia kapaszkodott az alsó határ a főegység. Ugyanakkor azt is, hogy nem csak nyomni, és ott volt a bevezetése az alsó részén a keretek referenciák ebben a határon. Ehhez kérje a lista elemeit relatív pozicionálás (CSS position: relative), és kiszorítják őket az egyenlő távolság a vastagsága a keret (nálunk van 2 képpont). Offset köze az ingatlan CSS alján.
  3. Jogcím „aktuális” és a linkeket, ha lebeg rajtuk az egérmutatót (CSS: hover) újradefiniálják a színét a keret alsó határ (CSS border-bottom-szín), és ez ugyanaz, mint a háttérben ezeket az elemeket. Tehát elrejteni alsó határát helyenként átfedő kapcsolatok és a lapok, hogy a hatás.
  • Hogyan készítsünk egy honlapot
    magát ingyenes
  • HTML bemutató
    kezdőknek
  • CSS Tutorial
    kezdőknek
  • Irodalom
    HTML és CSS
  • példák
    HTML és CSS
  • referenciák
    Hasznos weboldalak webmestereknek
  • szerszámok
    Programok a weboldalak létrehozására
előző ◈ a következő