Jak vytvořit navigaci v záložkách pomocí CSS a bez obrázků

Navigace na webových stránkách je formou seznamu a navigace na kartách je jako horizontální seznam. Je poměrně snadné vytvářet horizontální záložku s CSS, ale CSS 3 nám dává několik dalších nástrojů, které jim umožňují vypadat ještě hezčí.

Tento tutoriál vás provede pomocí HTML a CSS, které jsou potřebné k vytvoření nabídky s kartami CSS. Kliknutím na tento odkaz zjistíte, jak to bude vypadat.

Tato záložka používážádné obrázky, jen HTML a CSS 2 a CSS 3. Může být snadno editován, aby bylo možné přidat další karty nebo změnit text v nich.

Podpora prohlížeče

Tato záložka bude fungovatvšechny hlavní prohlížeče. Aplikace Internet Explorer nezobrazí zaokrouhlené rohy, ale jinak se zobrazí karty jako Firefox, Safari, Opera a Chrome.

Napište seznam nabídek

Všechna navigační nabídky a záložky jsou opravdu jen neřízeným seznamem. Takže první věc, kterou chcete udělat, je napsat neuspořádaný seznam odkazů na místo, kam chcete navigaci pomocí záložky.

Tento výukový program předpokládá, že píšete svůj HTML v textovém editoru a že víte, kam umístit HTML na své menu na vaší webové stránce.

Napište svůj neřízený seznam takto:

• class = "tablist">
  • CSS 3
  • id = "aktuální"> Záložky
  • Pro
  • Nabídky
  Všimnete si, že kód vyvolá dvě věci: class = "tablist" a id = "aktuální". První je Povinný. Pokud neuložíte tablist třídy na neřízeném seznamu, karty nebudou fungovat. Druhý je volitelný. Dal id = "aktuální" na libovolné kartě, kterou chcete zvýraznit na této stránce. Zvyčajně to používáme k tomu, abychom zvýraznili stránku, na které jsme, ale můžete ji použít k označení nejdůležitější karty. Nebo ji můžete zcela odstranit.

Začněte upravovat list stylů

Můžete použít buď externí stylový styl nebo interní stylový list. Vzorová stránka nabídky používá interní stylový list ve formátu dokumentu.

Nejprve budeme stylovat UL sám

Zde používáme třídutablist v HTML. Spíše než stylovat tag UL, který by styloval všechny neordonované seznamy na vaší stránce, měli byste stylovat pouze třídu UL.tablist Takže první položka ve vašem CSS by měla být:

.tablist {}

Rádi bychom, aby konečnou kudrnatou ozdobu (} posunuli dopředu, a nezapomínáme na to později.

Zatímco používáme značku neusporiadaného seznamu pro seznam nabídek, ale nechceme, aby se vnikly kuličky nebo čísla. Takže první styl, který byste měli přidat, je.styl stylu: žádný; To informuje prohlížeč, že zatímco je to seznam, je to seznam bez předem určených stylů (jako jsou odrážky nebo čísla).

Poté můžete nastavit výšku seznamu tak, aby odpovídala prostoru, který chcete vyplnit. Vybrali jsme 2m pro naši výšku, protože to je dvojnásobek standardní velikosti písma a dává asi půl em nad a pod textem karty.výška: 2m; Můžete však nastavit šířku libovolné velikosti. Značky UL automaticky zabírají 100% šířky, takže pokud nechcete, aby byla menší než aktuální kontejner, můžete tuto šířku ponechat.

Konečně, pokud váš šablona stylů nemá předvolby pro značky UL a OL, budete je chtít vložit. To znamená, že byste měli vypnout hranice, okraje a polstrování na UL. polstrování: 0; okraj: 0; hranice: žádné; Pokud jste již vynulovali značku UL, můžete změnit okraje, polstrování nebo ohraničení na něco, co odpovídá vašemu návrhu.

Vaše poslední třída .tablist by měla vypadat takto:

.tablist {seznam-styl: žádný; výška: 2m; polstrování: 0; okraj: 0; hranice: žádné; }}

Úpravy položek seznamu LI

Jakmile jste svůj neusporiadaný seznam vytyčili, musíte ve stylu štítků LI stylovat. V opačném případě se budou chovat jako standardní seznam a každý bude přesunout na další řádek, aniž by měl své karty správně umístit.

Nejprve nastavte vlastnost svého stylu:

.tablist li {}

Potom budete chtít plachty plavat tak, aby se vyrovnali v horizontální rovině. plavat vlevo;

A nezapomeňte přidat mezi záložky určitou mezeru, a tak se nebudou sloučit. margin-right: 0,13 em;

Vaše li styly by měly vypadat takto:

.tablist li {float: left; margin-right: 0,13 em; }}

Vytvoření záložek vypadá jako záložky s CSS 3

Chcete-li provést většinu těžkého zvedání v tomto stylu, cílíme na odkazy v neřízeném seznamu. Prohlížeče si uvědomují, že odkazy na webových stránkách více než jiné značky, takže je snazší získat starší prohlížeče, aby vyhovovaly věcem, jako jsou stavy pohybu, pokud je připojíte k značce (odkazy) kotvy. Nejprve napište své vlastnosti ve stylu:

.tablist li a {} .tablist li a: hover {}

Vzhledem k tomu, že tyto karty by se měly chovat jako karty v aplikaci, chcete, aby byla celá oblast karty klepnuta, a nikoli pouze propojený text. Chcete-li to provést, musíte převést značku A z jejího normálního stavu do blokového prvku. zobrazení: blok; (Pokud máte zájem dozvědět se více o tomto rozdílu, přečtěte si blokové prvky versus vložené prvky.)

Pak je snadný způsob, jak přinutit vaše karty, aby byly vzájemně symetrické, ale přesto se ohýbaly tak, aby odpovídaly šířce textu, a to tak, aby to pravé a levé polstrování stejné. Použili jsme vlastnost vycpávky, která nastavila horní a spodní stav na 0 a pravý a levý na 1em. polstrování: 0 1em;

Také jsme se rozhodli odstranit podtržení odkazu, takže karty vypadají méně jako odkazy.Pokud by však vaše publikum mohlo být zmateno, vynechejte tento řádek. link-dekorace: žádné;

Umístěním tenkých okrajů kolem tabulek to vypadá jako záložky. Použili jsme hraniční zkrácený znak, abychom ohraničili hranice kolem všech čtyř stran hranice: 0,06m pevná # 000; Potom použijete vlastnost spodního okraje pro jeho odstranění ze spodní části. okraj: 0;

Potom jsme provedli několik úprav písma, barvy a barvy pozadí záložek. Nastavte je na styly, které odpovídají vašemu webu. písmo: bold 0.88e / 2e arial, geneva, helvetica, sans-serif; barva: # 000; barva pozadí: #ccc;

Všechny výše uvedené styly by měly jít do voliče.tablist li a, pravidlo tak, že obecně ovlivňují značky kotev. Chcete-li, aby se karty zobrazovaly více kliknutím, měli byste přidat několik pravidel státu.tablist li: hover.

Rádi bychom změnili barvu textu a pozadí, aby se na kartě objevila myš, když ji myší přehráváte. pozadí: # 3cf; barva: #fff;

A přidali jsme další připomenutí prohlížečům, že chceme, aby odkaz nebyl podtržen. textová výzdoba: žádná; Dalším obvyklým způsobem je vrátit zpět podsvícení, když myší přes kartu. Pokud chcete, změňte to textová výzdoba: podtržení;

Ale kde je CSS 3?

Pokud jste pozorně věnovali pozornost, pravděpodobně jste si všimli, že ve stylu nebyly použity žádné styly CSS 3. To má tu výhodu, že pracujete v jakémkoli moderním prohlížeči, včetně aplikace Internet Explorer. Ale to neznamená, že karty vypadají jako něco jiného než čtvercové krabice. Přidáním polohového okruhu pro volání ve stylu CSS 3 (a přidružených hovorů specifických pro prohlížeč) můžete okraje zaokrouhlit, aby vypadaly spíše na kartách ve složce Manila.

Styly, které byste měli přidat do .tablist li a pravidlo jsou: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-okraj-poloměr-topleft: 0.50em; okraj: pravý okraj: 0.50; okraj vlevo-vpravo: 0.50;

Toto jsou poslední pravidla stylu, která jsme napsali:

.tablist li a {zobrazení: blok; polstrování: 0 1em; textová výzdoba: žádná; hranice: 0,06m pevná # 000; okraj: 0; písmo: bold 0.88e / 2e arial, geneva, helvetica, sans-serif; barva: # 000; barva pozadí: #ccc; / * CSS 3 prvky * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-okraj-poloměr-topleft: 0.50em; okraj: pravý okraj: 0.50; okraj vlevo-vpravo: 0.50; } .tablist li a: hover {pozadí: # 3cf; barva: #fff; textová výzdoba: žádná; }}

Díky těmto stylům máte menu s kartami, které fungují ve všech hlavních prohlížečích a vypadají jako pěkné vytištěné karty v prohlížečích kompatibilních s CSS 3. Na další stránce máte ještě jednu možnost, kterou můžete ještě obléknout.

Zvýrazněte kartu Aktuální

V HTML jsme vytvořili, UL měl jeden prvek seznamu s ID. To vám umožní dát LI jiný styl než ostatní. Nejčastější situací je, aby se aktuální karta vyjímala nějakým způsobem. Dalším způsobem, jak to uvažovat, je, že chcete šedivé karty, které nejsou živé. Potom změníte, kde je id na různých stránkách.

Stylujeme jak značku #current A, tak # current A: vznášejte se tak, aby byly oba poněkud odlišné. Můžete změnit barvu, barvu pozadí i výšku, šířku a polstrování tohoto prvku. Proveďte veškeré změny, které mají smysl ve vašem designu.

.tablist li # aktuální a {barva pozadí: # 777; barva: #fff; } .tablist li # aktuální a: přetažení {background: # 39C; }}

A ty jsi hotovo! Právě jste vytvořili záložku pro vaše webové stránky.