01 z 06
Ako vytvoriť navigáciu pomocou záložiek pomocou CSS a bez obrázkov
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ť.
Toto záložkové menu neobsahuje ž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ť vo všetkých hlavných prehliadačoch . Program Internet Explorer nezobrazí zaoblené rohy, ale inak to bude zobrazovať karty rovnako ako Firefox, Safari, Opera a Chrome.
02 z 06
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 3
- id = "aktuálne"> Záložky
- pre
- ponuky
Všimnete si, že kód vyvolá dve veci: class = "tablist" a id = "current". Prvý sa vyžaduje . Ak neumiestíte triedu tabulátorov na neupravený zoznam, karta nefunguje. Druhá možnosť je dobrovoľná. Vložte id = "aktuálny" na ktorúkoľvek kartu, ktorú chcete na tejto stránke zvýrazniť. Zvyčajne to používam na zvýraznenie stránky, na ktorej som, ale môžete ju použiť na zvýraznenie najdôležitejšej karty. Alebo ho môžete úplne odstrániť.
03 z 06
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 písma v
dokumentu.Najprv budeme štýl UL sám
Toto je miesto, kde používame tabuľkový zoznam tried 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ád by som dopredu zaviedol koncovú kučeravú opierku (}, takže na to neskôr nezabudnem.
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ť. Vybrala som si 2m pre moju výšku, pretože je to dvojnásobok štandardnej veľkosti písma a dáva asi o 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 štýlov 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; }04 z 06
Ú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; }05 z 06
Vytváranie kariet vyzerá ako záložky s CSS 3
Ak chcete robiť väčšinu ťažkého zdvíhania v tomto šablóne štýlov, zacieľujem 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žil som vlastnosť vytesňovania steny na nastavenie hornej a dolnej polohy na 0 a doľava a doprava do 1. polstrovanie: 0 1m;
Tiež som sa rozhodol odstrániť odkaz podčiarkuje, takže karty majú menej odkazov. 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žil som vlastnosť hraničnej steny na hraničnú hranicu okolo všetkých štyroch strán hraníc: 0.06m pevná # 000; A potom použite vlastnosť spodnej hrany na jej odstránenie zo spodnej strany. border-bottom: 0;
Potom som urobil nejaké ú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 voliča .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 .tablist li a: hover.
Rád by som zmenil farbu textu a pozadia, aby sa po kliknutí myšou zobrazila tab. background: # 3CF; Farba: #fff;
A pre prehliadače som zaradil ďalšiu pripomenutie, že chcem, 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ť, prejdite na textovú výzdobu: podčiarknutie;
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 zoznamu tabuľky li, sú: -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;
Toto sú posledné pravidlá štýlu, ktoré som napísal:
.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.
06 z 06
Zvýraznite kartu Aktuálne
V HTML som vytvoril, UL mal jeden prvok zoznam 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.
Stýlil som ako #current tag, tak aj #current A: vznášam sa tak, že oba 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.