Díky vývoji CSS a CSS3 v posledních letech jsme dosáhli okamžiku, kdy mnoho starých softwarových řešení, včetně obrázků na pozadí, mohou být nyní vytvořeny zcela na CSS. V této lekci budeme zvažovat vytvoření sekvence navigačních odkazů nazvaný "Cread drobky", v plochém stylu, aniž by byla potřeba dříve populární metody práce s obrázkem na pozadí, nazvaný "posuvné dveře" metodu.
"Chlébní drobky", které vytvoříme, stylizovaným ve formě chevronů vizualizovat myšlenku strukturovaného obsahu. Dříve bychom použili obrázek na pozadí ve formátu PNG pro vytvoření tohoto tvaru Chevronu, a nyní pomocí mazaného vybavení hranic můžete vytvořit stejný efekt pomocí CSS.
Začneme s vytvořením vazeb pro navigaci "chlebových drobků" jako nezměřený seznam. Každý "chlebník" bude prvkem
#crumbs ul li a (displej: blok; float: vlevo; výška: 50px; pozadí: # 3498db; text-align: centrum; polstrování: 30px 40px 0 40px; poloha: relativní; marže: 0 10px 0 0; velikost písma : 20px; Textová dekorace: Žádná; barva: #fff;)
Počáteční kód CSS nastavuje každou kotvu seznamu úhledného modrého obdélníku stylu. Text se nachází ve středu a ze všech stran se přidávají stejné vnitřní odsazení. Aby bylo možné umístit absolutně následující prvky, tyto prvky přidaly pozici: relativní vlastnost;, tak, aby byly tyto absolutně umístěné položky zobrazeny vzhledem k tomuto rodičovskému prvku.
#crumbs ul li a: po (obsahu: ""; hranice-top: 40px solidní červená; hranice-dno: 40px pevná červená; hranice-vlevo: 40px pevná modrá; poloha: absolutní; vpravo: -40PX; top: 0; )
Nyní vytvoříme Chevron efekt v CSS, který byl dosažen pouze za použití obrázku na pozadí. Použijte volič: Po vytvoření dalšího prvku, ke kterému můžete individuálně nastavit styly. Trojúhelníkový formulář je vytvořen pomocí různých hranic CSS, takže jak můžete vidět v předchozím obrazu, modrý trojúhelník může být vytvořen použitím hranic horní a dolní části pro překročení oblasti pokrytí. Tyto hranice jsou namalovány červeně pro jasnost, ale pokud jsou transparentní, pak to ukazuje modrý trojúhelník. Tento účinek hranice se pak pohybuje na svém místě pomocí absolutního umístění.
Hranice-top: 40px pevný průhledný; Border dno: 40px pevný průhledný; Hraniční vlevo: 40px Solid # 3498db;
Účinek hranice se správnými hodnotami barev vytvoří požadovaný trojúhelník, který poskytne "chlebový drobky" populární tvar Chevronu.
#crumbs ul li A: Před: 40px pevný průhledný; hraniční dno: 40px pevný průhledný; hranice-vlevo: 40px Solid # D4F2FF; poloha: absolutní; vlevo: 0; nahoru: 0;)
Používání stejných principů, další trojúhelníková forma může být aplikována na levou část "chlebový drobky". Tentokrát stejnou barvu hranice jako barva pozadí je požádána, aby skryl kusy modrého odkazu na pozadí.
Polstrování: 30px 40px 0 80px;
Jak je uvedeno na HTML přidává, posloupnost "chlebových drobků" se zvyšuje, jsou rozděleny zajímavým tvarem s Chevronem, díky trojúhelníkovému účinku hranic CSS a malého pravého vnějšího návratu.
#crumbs ul li: první dítě a (hranice top-levicová poloměr: 10px; hranice-bottom-levicová poloměr: 10px;) #crumbs ul li: první dítě A: dříve (zobrazení: žádný;) #crumbs ul LI: Last-Dítě A (Padding-vpravo: 80px; hraničního top-pravého poloměru: 10px; hraniční-bottom-pravý poloměr: 10px;) #crumbs UL Li: Last-Dítě A: Po (zobrazení: Žádný; )
Úplný blok "chlebových drobků" může být dále stylizován odstraněním účinku trojúhelníku z prvních a posledních prvků pomocí selektorů: první dítě a: last-dítě, po kterém můžete dát malé zaokrouhlení rohů pomocí Vlastnost hraničního poloměru.
#crumbs ul li a: vznášet se (pozadí: # fa5ba5;) #crumbs ul li a: vznášet se: po (hraniční levé barvy: # fa5ba5;)
Vše, co zůstane, je aplikovat efekt na odkazy, ke kterým dochází, když se ukazatel myši vznáší. Nezapomeňte změnit hodnotu vlastnosti hraniční levé barvy pro efekt trojúhelníku ve stavu vznášejícího ukazatele myši tak, že celá "chlebová drobky" změní barvu.
Překlad - Djurka.
Dobrý den, milí čtenáři. V tento den se naučíte vytvářet Krásný chléb drobky (strouhavky) pro běžné stránky, stejně jako pro wordpress blogy. Doporučuji vám, abyste tuto chvíli vynechali, protože drobky ukazují cestu k vašemu článku nebo informací na webu, což výrazně usnadní navigaci na místě, stejně jako další interní odkazy.
CSS.
UL (Margin: 0; Polstrování: 0; Seznam styl: Žádný;)Vše, první není malý krok. A teď se přidáváme krásný výhled na naše drobky.
První příklad
Forma samotného prvku se bude skládat ze tří částí, které jsou spojeny v jedné celé části. Chcete-li to jasnější, viz níže uvedený výkres:
# Stropcrumbs-one (pozadí: #eee; hranice-šířka: 1px; hraniční stylu: pevná; hranice-barvy: # f5f5f5 # e5e5e5 #ccc; hraniční poloměr: 5px; box-stín: 0 0 2px rgba (0, 0, 0,0, .2); přetečení: skryté; šířka: 100%;) # stropová sklams-one li (float: vlevo;) # stropy - jeden a (polstrování: .7EM 1EM .7EM 2EM; float: vlevo; Dekorace: Žádný; Barva: # 444; Pozice: Relativní; Text-Shadow: 0 1px 0 RGBA (255,255,25,25,5,5); background-color: #ddd; pozadí obrázku: lineární gradient (vpravo, # f5f5f5, # DDD);) # stropcrumbs-One Li: První dítě A (polstrování-vlevo: 1em; hraniční poloměr: 5px 0 0 5px;) # stropcrumbs-one a: vznáška (pozadí: #fff;) # strouhanka - jedna :: Popatka, # strouhadla - jedna A :: předtím (obsah: ";" "; Transparentní solidní; hranice-vlevo: 1em pevná látka; vpravo: -1em;) # strouhadlo - jedna A :: Afterx (Z-index: 2; hranice-levá barva: #ddd;) # strouhavka - jedna a :: před Border Left-Color: # CCC; Vpravo: -1.1em; Z-index: 1; ) # Stropcrumbs-one a: vznášet se :: Puronová (hraniční levá barva: #fff;) # strouhanka - jeden .current, # strouhadla-jedna .Current: vznášet (font-hmotnost: tučně; pozadí: none;) strouhačky -One .current :: Puron, # strouhavka-jedna .Current :: Předtím (Obsah: normální;)
Druhý příklad
Tady, jako v prvním příkladu se prvek skládá ze tří částí, které jsou konstruovány v jedné části pomocí CSS.
# Breadcrumbs-dva (přetečení: skryté; šířka: 100%;) # stropy-two dva li (float: vlevo; marže: 0.5EM 0 1em;) # strouhavka - dva a (pozadí: #ddd; polstrování: .7EM 1em ; Plovák: vlevo; Text-dekorace: žádný; Barva: # 444; Text-stín: 0 1px 0 RGBA (255,255,25,25,5); Pozice: relativní;) # stropy - dvě a: vznášení (pozadí: # 99dB76;) # strouhanka-Two A :: Před: absolutní; Top: 50%, margin-top: -1.5em, border-width: 1.5em 0 1.5em 1em; border-Style: Pevná, s hranicemi color: # #ddd #ddd ddd transparentní; zleva: -1em) # strouhanka-Two A: Hover :: Před (Border color: # 99DB76 # 99DB76 # 99DB76 transparent) # strouhanka-Two A :: Po (obsah ""; pozice: absolutní; horní: 50%, margin-top: -1.5em, border-top: 1.5em Solid Transparent, border-bottom: 1.5em Solid Transparent; border-Left: 1em Solid #DDD; Vpravo: -1EM) # strouhanka-Two A: vznášet se :: po (hraniční levé barvy: # 99dB76;) # strouhanka-dvěma .Current, # stropy-dva. HT: BOLD; Pozadí: Žádný; ) # Stropcrumbs-dva .current :: Puron, # strouhadla-dva .current :: předtím (obsah: normální;)
Třetí příklad
Ve třetí položce se prvky skládají ze dvou částí.
# Stropcrumbs-tři (přetečení: skryté; šířka: 100%;) # stropcrumbs-tři li (plovák: vlevo; marže: 0 2EM 0 0;) # strouhanka-tři a (plovák: .7EM 1EM .7EM 2EM; float: Levý; Text-dekorace: Žádné; Barva: # 444; pozadí: #ddd; Pozice: Relativní; Z-index: 1; Text-Shadow: 0 1PX 0 RGBA (255,25,25,255, .5); Pohraniční poloměr: 0 .4EM;) # stropcrumbs-tři A: Hover (pozadí: # abe0ef;) # strouhadla-tři-tři A :: po (pozadí: #ddd; Obsah: ""; Výška: 2.5EM; okraj-top: -1.25 ; Poloha: absolutní; vpravo: -1em; top: 50%; šířka: 2.5EM; z-index: -1; transformace: otočte (45deg); okruh okraje: .4EM;) # stropy-tři a: vznášet se: : Po (pozadí: # abe0E0EG;) # strouhanka-tři .current, # strouhavka-tři ..Current: vznášet se (font-hmotnost: tučně; pozadí: žádný;) # strouhačky - tři .Current :: po (obsahu: normální; )
Čtvrtý příklad
# Breadcrumbs-čtyři (přetečení: skryté; šířka: 100%;) # stropcrumbs-four li (float: vlevo; marže: 0.5em 0 1em;) # stropní dráha-čtyři a (pozadí: #ddd; polstrování: .7em 1em ; Plovák: vlevo; Text-dekorace: žádný; Barva: # 444; Text-stín: 0 1px 0 RGBA (255,25,25,25,55, .5); Pozice: Relativní;) # Brotkoms-čtyři A: Hover (pozadí: # EFC9AB;) # Strouhačky-čtyři A :: Předtím, # stropová stroje-čtyři A :: po (obsahu: "; pozice: absolutní; top: 0; Dolní: 0; šířka: 1em; pozadí: #ddd; transformace: šikmo (-10deg) ;) # Strouhačky-čtyři A :: předtím (vlevo: -5em; hraniční poloměr: 5px 0 0 5px;) # strillcrumbs-čtyři a: vznáška :: předtím (pozadí: # efc9ab;) # strouhačky - čtyři a :: Po (vpravo: -.5em; okraj-poloměr: 0 5px 5px 0;) # stropy-čtyři a: vznášet se :: po (pozadí: # efc9ab;) # strouhadla-čtyři-čtyři .Current, # strouhačky-čtyři .current: vznášet se stops-čtyři. (Font-Hmotnost: tučně; pozadí: Žádný;) # stropová stroje-čtyři .current :: Puron, # strouhadlo - čtyři.
Příklad
To je vše, věřím, že velmi stylové a zároveň jednoduché drobky. Zvláště neexistují žádné snímky, tedy jsou naloženy rychleji.
Ve všech příkladech ve stylech použité značky vznášet se.To změní barvu prvku, když, jen pokud se vám nelíbí, nikoli z předložených barev, můžete ji snadno nahradit svým vlastním.
Nyní je čas jít do druhé části, konkrétně, přikládáme jeden z příkladů do vašeho wordpress blogu, šel.
Část 2. Jak připojit data drobky na wordpress blogu
A tak, nejprve musíme stáhnout plugin Britchcrumb Navxt, Můžete si ho stáhnout. Po stažení a aktivaci pluginu budete muset provést některá nastavení:
Nastavení jsou v parametrech. Na kartě VŠEOBECNÉ. Je nutné najít linku Separátor stropů. A odstranit standardní hodnotu, která tam stojí, jinými slovy, musíte opustit pole prázdné.
Všechno, s pluginem skončil, nyní musíte vybrat design, který se vám líbilo nejvíce. V tomto případě bude tento styl na příkladu:
to druhý příkladkterý je v článku.
Vezměte si a jednoduše zkopírujte tyto styly a pak je přidejte style.css. Vaše téma, na kterémkoli místě, které se vám líbí nejvíce, doporučuji vám upozornit na začátek a konec stylů drobků, protože pokud v budoucnu chci tam změnit, zmatit.
Nyní musíte přidat strouhanky přímo na blog.
V Admin Blog nalezeno vzhled, pak editora vybrat si sing.php.. Dále přidejte následující:
Důležité
Upozorňujeme, že Crook Challenge sám stojí mezi značkami. id, který strhlávače-dva.Nezapomeňte změnit toto ID pro příklad, který byl přidán do stylů. Pokud je to například první příklad (což je vyšší), pak by mělo být takto:
Pokud máte šablonu na blogu vypadat jako já, v tom smyslu, že pozadí je šedá a samotný blok je bílý, drobky jsou nejlepší na blok, jako já. Protože mohou být přesunuty do nového řetězce, pokud je název příliš dlouhý a věřte mi, není to moc krásné. :-)
To je vše. Vážení přátelé, pokud jakékoli potíže vznikly nutně zeptejte se na komentáře. Brzy se uvidíme.
V předchozím článku "Leadcrumbs navigace s trojúhelníky na CSS" popsal, jak vytvořit menu pomocí čistých CSS bez použití grafiky.
Metoda je dobrá pro každého, s výjimkou jednoho - podpora takové menu ve starých prohlížečích je pochybná. S převodem tohoto článku však odkazoval na způsob vytváření navigace pomocí grafiky.
Článek je napsán na dlouhou dobu, ale metoda je naprosto pracující. Autor článku Veerle Pieters a samotný příspěvek se nazývá "Jednoduché škálovatelné CSS breabrumbs". Níže jsem ani není volný překlad, ale volný retelling.
Před několika dny jsem měl úkol vytvářet navigační menu ve stylu "chleba drobky" (strouhanka) pro místo, pro které jsem pracoval. Nemyslím si, že takové menu je nezbytné pro každé místo, ale v některých případech je velmi užitečné a praktické.
Tento příklad však je, jako by byl základ, který lze rozšířit a aplikovat v praxi. Menu bude vytvořeno pomocí běžného seznamu štítků.
| 1 | Ul. |
Ale první pohled na vzorek, se kterými budeme pracovat:
Menu je jednoduché, stejně jako kód, se kterými jej vytvoříme.
HTML kód - základní seznam ul
- DOMOV.
- Hlavní sekce.
- Sub oddílu.
- Pododstavec.
- Stránka jste právě teď
Všechny položky menu mají odkazy kromě posledního - "Stránka, kterou jste v pořádku právě teď" (stránka, kterou jste právě v). Při práci v menu jsem přemýšlel, zda je seznam nejvhodnější struktury vytvořit menu? Věřím, že aplikace seznamu v tomto případě není přísné pravidlo, ale zdá se mi, že je to nejslavnější a správná volba.
CSS Code - Vytvořit styly pro menu
Určíme společné styly pro menu - odstraňte značky a resetujte odsazení v prohlížečích Firefoxu, tj.
Provádíme plovoucí vlastností, která se rovná výšce celého menu. A nastavte barvu textu. Dále jsme umístěni pro reference obrazu pozadí řez z rozvržení. Chcete-li to provést, snížit pouze "šipka" sám:... které "jednoduše" spěchá "doprava (100%) a umístit přesně vertikální (50%). Děláme také z odkazu na právo napravo
| 1 | Polstrování vlevo: 15px |
Již téměř všechno je hotovo. Zůstane nastavit styly pro textový text. Odebráme standardní podtržítko a změňte jeho barvu:
.crumbs Li A: Link, .crumbs li A: navštívil (text-dekorace: žádný; Barva: # 777;)| 1 | : Hover. |
| 1 | : soustředit se |
Výsledek naší práce je zde uveden:
Překladatel Poznámka:
Autor článku zjednodušil příklad a kód sám, tedy, pokud chápu. Faktem je, že příklad je jasně viditelný lineární horizontální gradient pro každou z položek menu. Nicméně, to nebylo zobrazeno v kódu. No, ne potíže - je to problém vytvořit lineární gradient na CSS3? Samotný úkol je splněn!
Navigace ve formě "chlebových drobků" pomáhá návštěvníkům webu navigovat v hierarchické struktuře dokumentů a najít cestu na nejvyšší úroveň. Pokud je tedy velký počet dokumentů umístěn na webu, musí být poskytnuta s "strouhanky". V této lekci bude kód CSS prezentován tak, aby vytvořil různé možnosti návrhu pro takový požadovaný navigační nástroj.
Html markup.
Označení je jednoduché a minimální. Je založen na neohroženém seznamu.
CSS.
Chcete-li začít, budeme dělat malé CSS reset pro náš neuspořádaný seznam:
UL (Margin: 0; Polstrování: 0; Seznam styl: Žádný;)
Pro návrh našich "chlebových drobků" budou použity pseudo-elementy.
První příklad
V tomto příkladu se používá velmi jednoduchá technika. Trojúhelník je vytvořen na rámu doprava s pomocí pseudo-elementů umístěných na druhou. Tmavý trojúhelník posune, aby vytvořil efekt rámce.
# Stropcrumbs-one (pozadí: #eee; hranice-šířka: 1px; hraniční stylu: pevná; hranice-barvy: # f5f5f5 # e5e5e5 #ccc; hraniční poloměr: 5px; box-stín: 0 0 2px rgba (0, 0, 0,0, .2); přetečení: skryté; šířka: 100%;) # stropová sklams-one li (float: vlevo;) # stropy - jeden a (polstrování: .7EM 1EM .7EM 2EM; float: vlevo; Dekorace: Žádný; Barva: # 444; Pozice: Relativní; Text-Shadow: 0 1px 0 RGBA (255,255,25,25,5,5); background-color: #ddd; pozadí obrázku: lineární gradient (vpravo, # f5f5f5, # DDD);) # stropcrumbs-One Li: První dítě A (polstrování-vlevo: 1em; hraniční poloměr: 5px 0 0 5px;) # stropcrumbs-one a: vznáška (pozadí: #fff;) # strouhanka - jedna :: Popatka, # strouhadla-jedna A :: Předtím (Obsah: ";" Pozice: Absolutní; Top: 50%; okraj-top: -1.5EM; hranice-top: 1.5EM Solidní transparentní; Border-dno: 1.5EM Transparentní solidní; hranice-vlevo: 1em pevná látka; vpravo: -1em;) # strouhadlo - jedna A :: Afterx (Z-index: 2; hranice-levá barva: #ddd;) # strouhavka - jedna a :: před Border-levicová barva: #ccc; ri GHT: -1.1EM; Z-index: 1; ) # Strouhanka-One A: Hover :: Afterter (Border-Left-Color: #fff;) # strouhanka-One .current, # strouhanka-One .current: Hover (font-weight: Bold, Pozadí: none;) strouhanka -One .current :: Puron, # strouhavka-jedna.
Formy CSS jsou postaveny pomocí pseudo-prvků umístěných před a po prvku.
# Breadcrumbs-dva (přetečení: skryté; šířka: 100%;) # stropy-two dva li (float: vlevo; marže: 0.5EM 0 1em;) # strouhavka - dva a (pozadí: #ddd; polstrování: .7EM 1em ; Plovák: vlevo; Text-dekorace: žádný; Barva: # 444; Text-stín: 0 1px 0 RGBA (255,255,25,25,5); Pozice: relativní;) # stropy - dvě a: vznášení (pozadí: # 99dB76;) # strouhanka-Two A :: Před: absolutní; Top: 50%, margin-top: -1.5em, border-width: 1.5em 0 1.5em 1em; border-Style: Pevná, s hranicemi color: # #ddd #ddd ddd transparentní; zleva: -1em) # strouhanka-Two A: Hover :: Před (Border color: # 99DB76 # 99DB76 # 99DB76 transparent) # strouhanka-Two A :: Po (obsah ""; pozice: absolutní; horní: 50%, margin-top: -1.5em, border-top: 1.5em Solid Transparent, border-bottom: 1.5em Solid Transparent; border-Left: 1em Solid #DDD; Vpravo: -1EM) # strouhanka-Two A: Vznášet se :: Puron (hranice levých zbarvení: # 99dB76;) # strouhanka-dva .Current, # strouhanka-dva .current: vznášet (font-hmotnost: tučně; Pozadí: Žádný; ) # Stropcrumbs-dva .current :: Puron, # strouhadla-dva .current :: předtím (obsah: normální;)
Použití vlastnosti hraničního poloměru, úhly obdélníku a čtverců jsou zakřiveny. Square se otočí, aby se od něj udělal diamant.
# Stropcrumbs-tři (přetečení: skryté; šířka: 100%;) # stropcrumbs-tři li (plovák: vlevo; marže: 0 2EM 0 0;) # strouhanka-tři a (plovák: .7EM 1EM .7EM 2EM; float: Levý; Text-dekorace: Žádný, barva: # 444; pozadí: #ddd; pozice: relativní; 0 .4EM;) # stropcrumbs-tři A: Hover (pozadí: # abe0ef;) # strouhadla-tři-tři A :: po (pozadí: #ddd; Obsah: ""; Výška: 2.5EM; okraj-top: -1.25 ; Poloha: absolutní; vpravo: -1em; top: 50%; šířka: 2.5EM; z-index: -1; transformace: otočte (45deg); okruh okraje: .4EM;) # stropy-tři a: vznášet se: : Po (pozadí: # abe0E0EG;) # strouhanka-tři .current, # strouhavka-tři ..Current: vznášet se (font-hmotnost: tučně; pozadí: žádný;) # strouhačky - tři .Current :: po (obsahu: normální; )
S pomocí pseudo prvků se přidají dva obdélníky. Pak se kroutí rohy.
# Breadcrumbs-čtyři (přetečení: skryté; šířka: 100%;) # stropcrumbs-four li (float: vlevo; marže: 0.5em 0 1em;) # stropní dráha-čtyři a (pozadí: #ddd; polstrování: .7em 1em ; Plovák: vlevo; Text-dekorace: žádný; Barva: # 444; Text-stín: 0 1px 0 RGBA (255,25,25,25,55, .5); Pozice: Relativní;) # Brotkoms-čtyři A: Hover (pozadí: # EFC9AB;) # Strouhačky-čtyři A :: Předtím, # stropová stroje-čtyři A :: po (obsahu: "; pozice: absolutní; top: 0; Dolní: 0; šířka: 1em; pozadí: #ddd; transformace: šikmo (-10deg) ;) # Strouhačky-čtyři A :: předtím (vlevo: -5em; hraniční poloměr: 5px 0 0 5px;) # strillcrumbs-čtyři a: vznáška :: předtím (pozadí: # efc9ab;) # strouhačky - čtyři a :: Po (vpravo: -.5em; okraj-poloměr: 0 5px 5px 0;) # stropy-čtyři a: vznášet se :: po (pozadí: # efc9ab;) # strouhadla-čtyři. (Font-Hmotnost: tučně;
Výhody návrhu "chlebových drobků" založených na CSS3
- Žádné snímky, takže jen aktualizovat a udržovat.
- Snadné zmenšené.
- Inverzní kompatibilita se starými prohlížeči.
V této lekci se seznámíte s procesem vytváření v bootstrap 3 a 4 navigačních řetězcích ("strouhanky").
Označení navigačních řetězů
Navigační řetězce ("chlebová drobky", strouhanka) je navigační schéma, který ukazuje aktuální pozici uživatele na webu. Používají se k zobrazení hierarchicky organizovaných informací. Například v internetovém obchodě "chleba drobky" obvykle představují řetězy sekcí. S jejich pomocí může uživatel určit, která sekce je nyní, stejně jako umožňují jít na sekce vyšších úrovní, tj. Poskytněte další možnost navigace struktury webu.
"Chlébní drobky" v Bootstrapu je obyčejný uspořádaný seznam s třídou strouhanky. Separátor Seznam prvků se automaticky přidává pomocí CSS (Bootstrap.min.css) prostřednictvím následující třídy:
Strouhanka\u003e li + li: před (barvy: #cccccc; Obsah: "/"; polstrování: 0 5px;)
Příklad vytváření "chlebových drobků" s bootstrapem.
Registrace navigačních řetězů v bootstrapu
Ještě jeden příklad:
Chlébnice pro navigační archiv Informace
Ne standardní varianta návrhu chlebových drobků
Zvažte příklad vytvoření následujícího provedení drobků chleba:
Příklad návrhu strouhaných drobků na místě
Proces vytváření chlebových drobků je tvořen vývojem HTML struktury a stylů (CSS).
CSS CROUBS CUMBS:
/ * Chlébní drobky * / #Breadcrumb (Seznam styl: žádný; Displej: inline-blok; polstrování-vlevo: 0px;) #breadcrumb .icon (velikost písma: 14px;) #breadcrumbi LI (float: vlevo;) strouhačkou Li a (barva: #fff; displej: blok; pozadí: # cc2ea; text-dekorace: none; poloha: relativní; výška: 34px; výška čáry: 34px; polstrování: 0 10px 0 5px; text-align: centrum; Okrajově vpravo: 23px; -webkit-user -Select: žádný; -Moz-user -Select: none; -ms-user -Select: none; -ms-user-select: žádný; uživatel-volba: none;) #breadcrumbi li: první dítě a (polstrování -Left: 15px; -Moz-Hranice-poloměr: 4PX 0 0 4PX; -Webkit-Border-Radius: 4PX; okruh hranice: 4PX 0 0 4Px;) #Breadcrumb Li: První dítě A: Předtím (hranice: Žádný: Žádný ;) #Breadcrumb Li: Last-Dítě A (Padding-vpravo: 15px; -moz-Border-poloměr: 0 4px 4px 0; -WebKit-Border-poloměr: 0; okruh hranice: 0 4PX 4PX 0;) # strouhlík LI: Last-Dítě A: Po (hranice: žádný;) #Breadcrumb li A: Před, #Breadcrumb li A: po (obsahu: "; Pozice: Absolutní; Top: 0; hranice: 0 Solid # Cc2eaa; Hraniční šířka: 17px 10px; šířka: 0; Výška: 0; ) #Breadcrumb li a: předtím (vlevo: -20px; hranice-levá barva: transparentní;) #breadcrumb li a: po (vlevo: 100%; hranice-barvy: transparentní; hranice-levá barva: # cc2eaa;) #Breadcrumb li a: vznášet se (barva pozadí: # A22587;) #breadcrumb li a: vznášet se: před (hranic barva: # A22587; hranice-levicová barva: transparentní;) #breadcrumb li a: vznášet se: po (hranice - Levá barva: # A22587;) #Breadcrumb Li A: Aktivní (barva pozadí: # A22587;) #Breadcrumb li A: Aktivní: Před (Border Barva: # A22587; hranice-levá barva: transparentní;) # Britchcrumb Li A: Aktivní: Po (hraniční levé barvy: # A22587;) #Breadcrumb Li.Current A (ukazatele-události: Žádné; kurzor: ne-povoleno; filtr: alfa (opacity \u003d 65); -webkit-box -Shadow : Žádný; krabicový stín: žádný; neprůhlednost: .65;)
Změny barev jsou prováděny úpravou hodnot odpovídajících vlastností CSS.
Značení HTML:
Vedení aktuálního prvku (pokud se používá v řetězci) se provádí přidáním proudové třídy do prvku LI.
