Horizontální nabídka CSS pro začínající řemeslníky

HTML a CSS jsou webové programovací jazyky vyžadované pro rozvržení stránek. Začátek rozvržení jsem se rozhodl učit základy této profese, měli byste začít s jejich studiem, protože na jejich základě je možné vytvořit jednoduché místo.

V HTML a CSS je horizontální nabídka pro web snadno sestavitelná, počínaje psaním rámce.

Vytvoření rámce

Začněte s html značkou. Menu je jednodušší pro vytváření označeného seznamu. Twin Tag tedy vyžaduje uzavření na konci seznamu. Je lepší okamžitě přidat třídu pro další stylizaci. Přidávají se spárované položky
  • o počet bodů s propojenými odkazy. Příklad:
  • Vytvoření rámečku
  • Horizontální menu
  • Rozbalovací nabídka
  • Pevná nabídka
  • Horizontální nabídka

    Po označení kódu je čas začít pracovat se stylem. Je třeba poznamenat, že párové značky používané pro výchozí snímek jsou blokovány a proto je třeba změnit typ prvku na řetězec a vytvořit tak normální, tak rozbalovací horizontální nabídku CSS. To lze provést pomocí vlastnosti zobrazení. Je přidán k položce:


    .menu li {display: inline; } Takže to se změní na horizontální. Pokud je mnoho dílčích bodů, mohou se přesunout na nový řádek bez přidání zadaných vlastností. V tomto případě je vlastnost použitapro zobrazení průchodů a textových přenosů. Nowrap ukládá text úplně, bez dělení slov, a pre-wrap ukládá mezery v HTML a přidává automatické. .menu li {display: inline; bílý prostor: nyní; }
    Chcete-li zabránit zanesení řetězce pevným textem, můžete vytvářet informace ve skupinách a vytvořit další podnabídku, která přesně odráží vše, co je potřeba. Podnabídka může být spuštěna nebo otevřena.

    , rozbalovací menu

    Po zvládnutí základů vybudovat horizontální CSS rozbalovací menu s podmenu je možné vydat vertikální seznam. Seznam značek musí být víceúrovňový a do požadovaného prvku přidat další značky pro označené seznamy. Ve značce by měly být připojeny následující řádek položky:
  • 1
  • , 1,1
  • , 1,2
  • 2
  • 3
  • 4 [24 ] V css .menu je li nahrazeno ".menu" li "tak, aby vnitřní prvky byly vertikální. Pro přidání rodičovské voliče vzájemné polohy, ve které je prvek přenést z hranic mateřské jednotky a dítěte - absolutní (zcela odstraněny z proudu a koordinován na další položku, a v případě, že jsou nic, pak je hranice prohlížeče). Prvky s relativním umístěním mohou obsahovat podřízené prvky s absolutní polohou uvnitř. To znamená, že při pohybu bloku z pozice: relativní, zůstávají fixní části na svých místech uvnitř.
    Výchozí část vypadá vždy otevřená, pokud ji nepřidáte do elementu displeje pouze při pohybu kurzorem. Chcete-li to provéstdalší seznam je ve výchozím nastavení skrytý: .menu & gt; li {display: inline; poloha: relativní; } menu.second {pozice: absolutní; (podnabídka pro blokování nadřazeného bloku): žádný; (skrýt)} .menu & gt; li: hover. second {(pseudotřídní vznášadlo se používá k zobrazení seznamu pomocí vznášedla) zobrazení: blok; } Výsledkem bude malé, elegantní menu.

    Pevné

    , aby se udržela založena v vlastnost vyplývá, zobrazení se používá ve významu blokem podobné rozbalovacího menu, ale bez skryje. Pokud chcete, můžete při procházení stránky zablokovat nejen otevřený seznam, ale také lištu nabídek. Když uživatel uloží text dolů, nabídka zůstane vždy nahoře, což usnadňuje navigaci na webu. Tento prvek má několik funkcí. To je velmi podobné absolutní, ale je vázáno pouze na prohlížeč, vypadá z proudu. Srovnejte takovou položku pohodlně s obvyklými vlastnostmi nahoru /dolů, doleva /doprava. Příklad horizontální nabídky s rozbalovacími položkami, opravenými v prohlížeči:

    .menu & gt; li {display: inline; poloha: fixní; } menu.second {pozice: absolutní; zobrazení: žádné; } nabídky & gt; li: hover.second {zobrazení: blok; }
    Přidá vlastnost pozice s hodnotou fixní, po jejímž uplynutí zůstává nabídka na místě. S vytvořením takové nabídky se bude vyrovnávat i začátečník. Seznam HTML značkovací - jednoduché a pohodlné. Pro správné zobrazení stylů CSS v prohlížeči je vhodné vzpomenout na návrh položek v blokovém pohledu, přidání hranic a koordinačních prvků, interní a externí odsazení tak, aby popsané odstavce nebyly uloženyna sobě. Často se zapomíná přidat šířku a výšku prvku. Vlastnost float můžete použít tím, že ji "přitisknete" na levou nebo pravou stranu (float: right;) pro zobrazení požadované položky mimo viditelnou část pro další zpracování.
  • Související publikace