01 z 06
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.
Toto záložkové menu neobsahuje žádné obrázky , pouze HTML a CSS 2 a CSS 3. Je možné je snadno editovat, aby bylo možné přidat další karty nebo změnit text v nich.
Podpora prohlížeče
Tato záložka bude fungovat ve všech hlavních prohlížečích . Prohlížeč Internet nebude zobrazovat zaoblené rohy, jinak se zobrazí karty stejně jako prohlížeče Firefox, Safari, Opera a Chrome.
02 ze dne 06
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 = "current". První je vyžadováno . Pokud neumožníte třídu tablist na vašem neřízeném seznamu, karty nebudou fungovat. Druhý je volitelný. Umístěte id = "aktuální" na kartu, kterou chcete zvýraznit na této stránce. Obvykle to používám pro zvýraznění stránky, na které jsem, ale můžete ji použít k označení nejdůležitější karty. Nebo ji můžete zcela odstranit.
03 ze dne 06
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 v
dokumentu.Nejprve budeme stylovat UL sám
Zde používáme tabulkový seznam tříd .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 {}Líbí se mi, abych nakonec vložil koncovou kudrnatou ozdobu (}), takže ji nezapomenu 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. Vybral jsem 2em pro svou výšku, protože je to 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 vaše hlavní stylová stránka 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é; }}04 z 06
Ú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; }}05 ze dne 06
Vytvoření záložek vypadá jako záložky s CSS 3
Chcete-li provádět většinu těžkého zvedání v tomto listu stylů, zaměřuji 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žil jsem vlastnosti vycpávky, abych nastavil horní a dolní část na 0 a pravý a levý na 1em. polstrování: 0 1em;
Také jsem se rozhodl 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žil jsem hraniční zkrácený majetek, aby hranici kolem všech čtyř stran ohraničen: 0.06m solid # 000; Potom použijete vlastnost spodního okraje pro jeho odstranění ze spodní části. okraj: 0;
Poté jsem provedl nějaké úpravy 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, aby ovlivnily obecně kotevní značky. Chcete-li, aby se karty zobrazovaly více kliknutí, měli byste přidat několik pravidel státu .tablist li a: hover.
Líbí se mi změna barvy textu a pozadí, aby se na kartě objevil pop, když jste jej přesunuli. pozadí: # 3cf; barva: #fff;
A přidal jsem další připomenutí prohlížečům, že chci, 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. Chcete-li to udělat, změňte jej na textovou výzdobu: 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 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é jsem napsal:
.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.
06 z 06
Zvýrazněte kartu Aktuální
V kódu HTML, který jsem vytvořil, měl UL jeden seznamový prvek 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.
Styl jsem jak #current tag, tak i #current A: vznášet se tak, že oba jsou mírně 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.