Navigácia na webových stránkach je formou zoznamu a navigácia na záložkách je ako horizontálny zoznam. Je pomerne jednoduché vytvoriť vodorovnú navigačnú navigáciu pomocou CSS, ale CSS 3 nám dáva ešte niekoľko nástrojov, aby sme vyzerali ešte pekne.
Tento návod vás prevedie pomocou HTML a CSS, ktoré sú potrebné na vytvorenie ponuky CSS s kartami. Kliknutím na tento odkaz zobrazíte, ako to bude vyzerať.
Používa sa toto záložkové menužiadne obrázky, len HTML a CSS 2 a CSS 3. To môže byť ľahko editovať pridať ďalšie karty alebo zmeniť text v nich.
Podpora prehliadača
Táto ponuka kariet bude fungovaťvšetky hlavné prehliadače, Aplikácia Internet Explorer nezobrazí zaoblené rohy, ale inak to bude zobrazovať karty rovnako ako Firefox, Safari, Opera a Chrome.
Napíšte zoznam ponúk
Všetky navigačné ponuky a karty sú naozaj len neusporiadaným zoznamom. Prvá vec, ktorú chcete urobiť, je napísať neusporiadaný zoznam odkazov na miesto, kam chcete navigovať pomocou záložiek.
Táto príručka predpokladá, že píšete svoj HTML v textovom editore a viete, kde umiestniť HTML pre vaše menu na vašej webovej stránke.
Napíšte svoj neusporiadaný zoznam takto:
class = "tablist">CSS 3id = "aktuálne"> Panelypreponuky
class = "tablist"aid = "aktuálne".Prvý je požadovaný, Ak nekladietetablisttriedy na neusporiadanom zozname karty nefungujú. Druhá možnosť je dobrovoľná. Vložteid = "current"na karte, ktorú chcete na tejto stránke zvýrazniť. Zvyčajne to používame na zvýraznenie stránky, na ktorej sme, ale môžete ju použiť na zvýraznenie najdôležitejšej karty. Alebo ho môžete úplne odstrániť.
Začnite upravovať list vášho štýlu
Môžete použiť buď externý štýl štýlu alebo interný štýl štýlu. Stránka ponuky vzorky používa interný štýl listu v priečinku
dokumentu.Najprv budeme štýl UL sám
Tu používame triedutablist v HTML. Namiesto toho, aby ste štýlovali značku UL, ktorá by štýlovala všetky nezoradené zoznamy na vašej stránke, mali by ste štýlovať iba triedu UL.tablist Takže prvý záznam vo vašom CSS by mal byť:
.tablist {}
Rádi by sme zaviedli koncovú kučeravú opierku (*) dopredu, takže na to neskôr nezabúdajme.
Zatiaľ čo používame neoznačenú značku zoznamu pre zoznam ponúk kariet, ale nechceme, aby sa do nej vtrhli guľky alebo čísla. Takže prvý štýl, ktorý by ste mali pridať, je.list-style: none; Toto informuje prehliadač, že hoci je to zoznam, je to zoznam bez vopred určených štýlov (napríklad odrážky alebo čísla).
Potom môžete nastaviť výšku zoznamu, aby zodpovedal priestoru, ktorý chcete vyplniť. Vybrali sme 2m pre našu výšku, pretože to je dvojnásobok štandardnej veľkosti písma a dáva asi polovicu em nad a pod textom karty.výška: 2em; Môžete však nastaviť šírku na ľubovoľnú veľkosť. Značky UL automaticky zaberú 100% šírky, takže ak nechcete, aby bola menšia ako aktuálna kontajnera, môžete túto šírku zanechať.
Nakoniec, ak vaša hlavná šablóna nemá predvoľby pre značky UL a OL, budete ich chcieť vložiť. To znamená, že by ste mali vypnúť hranice, okraje a polstrovanie na UL. padding: 0; margin: 0; hranica: žiadna; Ak ste už vynulovali značku UL, môžete zmeniť okraje, polstrovanie alebo ohraničenie na niečo, čo zodpovedá vášmu dizajnu.
Vaša posledná trieda .tablist by mala vyzerať takto:
.tablist {style-list: none; výška: 2em; padding: 0; margin: 0; hranica: žiadna; }
Úprava položiek zoznamu LI
Po štýle vášho neusporiadaného zoznamu musíte v ňom štýlovať štítky LI. V opačnom prípade sa budú správať ako štandardný zoznam a každý prejde na ďalší riadok bez správneho umiestnenia záložiek.
Najprv nastavte vlastnosť štýlu:
.tablist li {}
Potom chcete plávajúce pláty plávať tak, aby sa vyrovnali v horizontálnej rovine. float: left;
A nezabudnite pridať určitý okraj medzi kartami, aby sa nespolupracovali. margin-right: 0.13;
Vaše štýly li by mali vyzerať takto:
.tablist li {float: vľavo; margin-right: 0.13; }
Vytváranie kariet vyzerá ako záložky s CSS 3
Ak chcete robiť väčšinu ťažkého zdvíhania v tomto štýle šablón, zacieľujeme na odkazy v neoznačenom zozname. Prehliadače si uvedomujú, že prepojenia sa na webovej stránke zobrazujú viac ako iné značky, takže je jednoduchšie získať staršie prehliadače, aby vyhovovali takým veciam, akými sú napríklad stavy umiestnenia myšou, ak ich pripojíte k značke (odkazy) kotvy. Takže najprv napíšte svoje vlastnosti štýlu:
.tablist li a {} .tablist li: hover {}
Pretože tieto karty by sa mali správať ako karty v aplikácii, chcete, aby bola celá oblasť na karte klikateľná, nielen prepojený text. Ak to chcete urobiť, musíte konvertovať značku A z jej normálneho stavu "inline" na prvok bloku. Zobrazenie: blok; (Ak máte záujem dozvedieť sa viac o tomto rozdielu, prečítajte si informácie na úrovni bloku a vložených prvkov.)
Potom jednoduchý spôsob, ako vynútiť, aby vaše záložky boli navzájom symetrické, ale stále sa ohnúť, aby sa zmestili na šírku textu, je to pravé a ľavé polstrovanie rovnaké. Použili sme vlastnosť vytesňovania steny na nastavenie hornej a dolnej pozície na 0 a doľava na 1m. polstrovanie: 0 1m;
Tiež sme sa rozhodli odstrániť odkaz podčiarknuté, takže karty sa zdajú menej ako odkazy.Ak by to mohlo byť vaše publikum zmätené, vynechajte tento riadok. link-decoration: none;
Umiestnením tenkých okrajov okolo kariet ich vyzerá ako karty. Použili sme vlastnosť hraničnej stenoty, aby sme ohraničili hranice okolo všetkých štyroch strán hranica: 0,06m pevná # 000; A potom použite vlastnosť spodnej hrany na jej odstránenie zo spodnej strany. border-bottom: 0;
Potom sme vykonali určité úpravy farby písma, farby a pozadia kariet. Nastavte ich na štýly, ktoré zodpovedajú vašej stránke. písmo: bold 0.88e / 2e arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;
Všetky vyššie uvedené štýly by mali ísť do výberu.tablist li a, pravidlo tak, aby vo všeobecnosti ovplyvňovali značky kotvy. Potom, aby sa karty zobrazili viac klikateľnosti, mali by ste pridať niekoľko pravidiel štátu.tablist li a: hover.
Chceme zmeniť farbu textu a pozadia, aby sa po kliknutí myšou zobrazila tabuľka. background: # 3CF; Farba: #fff;
A pre prehliadače sme zaradili ďalšiu pripomenutie, že chceme, aby odkaz nebol podčiarknutý. text-decoration: none; Ďalšou bežnou metódou je opätovné otočenie podčiarknutia, keď sa pohybujete myšou nad záložkou. Ak to chcete urobiť, zmeňte ho text-decoration: zdôrazniť;
Ale Kde je CSS 3?
Ak ste venovali pozornosť, pravdepodobne ste si všimli, že v šablóne štýlov neboli použité žiadne štýly CSS 3. To má tú výhodu, že pracujete v každom modernom prehliadači vrátane programu Internet Explorer. Ale to neznamená, že záložky vyzerajú ako čokoľvek viac ako štvorcové krabice. Pridaním okraja polomeru CSS 3 (a pridružených hovorov pre konkrétneho prehliadača) môžete vytvoriť okraje zaoblené, aby ste vyzerali viac ako karty v priečinku Manila.
Štýly, ktoré by ste mali pridať do .tablist li a pravidlo: -webkit-border-top-right-radius: 0.50; -webkit-border-top-left-radius: 0.50; -moz-border-radius-topright: 0.50; -moz-border-radius-topleft: 0.50; border-top-right-radius: 0.50; border-top-left-radius: 0.50;
Toto sú posledné pravidlá štýlu, ktoré sme napísali:
.tablist li a {zobrazenie: blok; polstrovanie: 0 1m; text-decoration: none; hranica: 0,06m pevná # 000; border-bottom: 0; písmo: bold 0.88e / 2e arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 prvky * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50; -moz-border-radius-topright: 0.50; -moz-border-radius-topleft: 0.50; border-top-right-radius: 0.50; border-top-left-radius: 0.50; } .tablist li a: hover {pozadie: # 3cf; Farba: #fff; text-decoration: none; }
S týmito štýlmi máte záložku, ktorá funguje vo všetkých hlavných prehliadačoch a vyzerá ako pekné tlačené karty v prehliadačoch kompatibilných s CSS 3. Ďalšia stránka vám ponúka ešte jednu možnosť, ktorú môžete použiť na obliekanie ešte viac.
Zvýraznite kartu Aktuálne
V HTML sme vytvorili, UL mal jeden prvok zoznamu s ID. To vám umožní dať jeden LI iný štýl ako ostatné. Najčastejšou situáciou je, aby sa aktuálna karta vyčnievala nejakým spôsobom. Ďalším spôsobom, ako si to myslieť, je, že chcete šedieť karty, ktoré nie sú živé. Potom zmeníte, kde je id na rôznych stránkach.
Štýl budeme štýlovať ako #current A tag, tak aj #current A: vznášať sa tak, že obidve sú mierne odlišné. Môžete zmeniť farbu, farbu pozadia, aj výšku, šírku a výplň tohto prvku. Urobte akékoľvek zmeny zmysel vášho dizajnu.
.tablist li # aktuálny a {background-color: # 777; farba: #fff; } .tablist li # aktuálny a: vznášať {background: # 39C; }
A vy ste skončili! Práve ste vytvorili záložku pre vaše webové stránky.
