HTML a CSS sú webové programovacie jazyky potrebné pre usporiadanie stránok. Vzhľadom k tomu, kodér sa rozhodol naučiť sa základy tejto profesie by mala začať v štúdiu, pretože na ich základe môže vytvoriť jednoduché webové stránky.
HTML a CSS horizontálne menu pre ľahkú webu je vo výstavbe, by mal začať písať rám.
Vytvorenie rámca
Najprv musíte vytvoriť značku html. Menu je jednoduchšie vytvoriť označený zoznam. Dvojitá značka preto vyžaduje zatvorenie na konci zoznamu. Je lepšie okamžite pridať triedu pre ďalšiu štylizáciu. Pridávajú sa párové položky
podľa počtu bodov s prepojenými odkazmi. Príklad:
budovy rám
, horizontálne menu
, drop-down menu
Pevné
Ukazuje sa, že základ, ktorý potom sa horizontálne CSS ponuku Pevný alebo rozbaľovací.
Horizontálne menu
Po označení kódu je čas začať pracovať so štýlom. Všimnite si, že aj značky používané k rámu predvolená hodnota blok, a tak vytvoriť obaja konvenčné a horizontálne rozbaľovacej CSS menu sa musí zmeniť, aby typ riadkovej položky. Môžete to urobiť pomocou vlastností zobrazenia. Pridáva sa k položke:
.menu li {display: inline; } Preto sa stáva horizontálnou. Ak existuje veľa čiastkových bodov, môžu sa presunúť na nový riadok bez pridania špecifikovaných vlastností. V tomto prípade sa majetok používana zobrazovanie prechodov a textových prenosov. Nowrap ukladá text úplne, bez slovného spojenia a predbežne obaluje medzery v HTML a pridáva automatické. .menu li {zobrazenie: inline; white-space: teraz; }
Aby ste zabránili upchatiu reťazca s pevným textom, môžete vytvárať informácie v skupinách a vytvoriť ďalšie podmenu, ktoré presne odráža všetko, čo je potrebné. Podmenu možno spadnúť alebo otvoriť.
Rozbaľovacia ponuka
Po osvojení základov konštrukcie horizontálnej ponuky CSS spadne z neho submenu možno usporiadať vo vertikálnom zozname. Zoznam značiek musí byť viacúrovňový, pridajte ďalšie značky pre označené zoznamy vnútri požadovaného prvku. V značke by mali byť pripojené nasledujúci riadok položky:
1
, 1,1
, 1,2
2
3
4 [24 ] V css .menu li sa nahradí ".menu" li "tak, aby sa vnútorné prvky stali zvislé. Pre pridanie rodičovskej voliča vzájomnej polohy, v ktorej je prvok preniesť z hraníc materskej jednotky a dieťaťa - absolútna (úplne odstránené z prúdu a koordinovaný na ďalšiu položku, a v prípade, že sú nič, potom je hranica prehliadača). Prvky s relatívnym polohovaním môžu obsahovať detské prvky s absolútnou polohou vnútri. To znamená, že pri presúvaní bloku z polohy: relatívna, zostanú fixné časti na ich miestach.
Predvolená výpadková časť zostáva vždy otvorená, pokiaľ ju nezadáte do zobrazovacieho prvku iba vtedy, keď umiestnite kurzor na kurzor. Ak to chcete urobiťďalší zoznam je štandardne skrytý: .menu & gt; li {zobrazenie: inline; pozícia: relatívna; } menu.second {pozícia: absolútna; (podponuka rýchleho prístupu k nadradenému bloku) zobrazenie: žiadne; (skryť)} .menu & gt; li: hover. second ((pseudotriedačka sa používa na zobrazenie zoznamu vznášaním) zobrazenie: blok; } Výsledkom bude malé, elegantné menu.
Pevná ponuka
Ak chcete udržiavať vytvorené otvorené, vlastnosť zobrazenia s hodnotou bloku je podobná rozbaľovacej ponuke, ale bez skrytia mapy. V prípade potreby môžete počas prechádzania stránok zamknúť nielen otvorený zoznam, ale aj panel s ponukami. Keď používateľ zrolí text nadol, ponuka zostane vždy na vrchole, čo zjednodušuje navigáciu na stránkach. Podobný prvok má množstvo funkcií. Je veľmi podobný absolútnemu, ale je viazaný iba na prehliadač, ktorý vypadne z prúdu. Usporiadajte takúto položku pohodlne s obvyklými vlastnosťami hore /dole, vľavo /vpravo. Príklad horizontálneho menu s rozbaľovacími položkami, nastavený v prehliadači:
Pridá vlastnosť pozície s hodnotou pevnej hodnoty, po ktorej zostane menu pri posúvaní na mieste. Vytvorením takejto ponuky sa vyrovná aj začiatočník. Značka HTML je jednoduchá a pohodlná. Aby sa správne zobrazovali štýly CSS v prehliadači, stojí za to pamätať si dizajn položiek v blokovom pohľade, pridanie hraníc a koordinačných prvkov, vnútorné a vonkajšie zarážky tak, aby popísané odseky neboli uloženéna seba. Často sa zabudlo pridať šírku a výšku prvku. Vlastnosť float môžete použiť tak, že ju "priskrutkujete" na ľavej alebo pravej strane (float: right;), aby ste zobrazili požadovanú položku mimo viditeľnej časti na ďalšie spracovanie.
