Zahvaljujući razvoju CSS-a i CSS3 poslednjih godina došli smo do trenutka kada su mnogi stari softverska rješenjauključujući pozadinske slike sada se mogu u potpunosti stvoriti na CSS. U ovoj lekciji ćemo razmotriti stvaranje niza navigacijskih veza zvanih "mrvice hljeba", u ravnom stilu, bez potrebe za prethodno popularne metode rada sa pozadinskim slikom, nazvana metodom "kliznih vrata".
"Kruške mrvice", koje ćemo stvoriti, stilizirati u obliku Chevrona kako bi vizualizirali ideju strukturiranog sadržaja. Prije toga koristili bismo pozadinu u pNG formatDa biste stvorili ovaj oblik Chevrona, a sada uz pomoć lukave opreme granica, možete stvoriti isti efekat koristeći samo CSS.
Počet ćemo s stvaranjem veza za navigaciju "mrvica hljeba" kao nemjerene liste. Svaki "krušni mrvica" bit će element
#crumbs ul li a (ekran: blok; levo; visina: 50px; pozadina: # 3498db; tekst-poravnavanje: centar; Pozicija: relativna; marža: 0 10px 0 0; veličina fonta : 20px; tekst-dekoracija: nema; boja: #fff;)
CSS početni kôd postavlja svako sidro popisa urednog plavog pravokutnog stila. Tekst se nalazi u centru, a sa svih strana se dodaju jednaki interni uvlake. Da bi se apsolutno postavio sljedeći elementi, ovi elementi su dodali položaj: relativna imovina;, kako bi se oni apsolutno pozicionirani predmeti prikazani u odnosu na ovaj matični element.
#crumbs ul li a: nakon (sadržaj: "; granični top: 40px puno crvena; granično dno: 40px čvrsto crveno; 5px čvrsto plavo; tačno: -40px; vrh: 0; )
Sada ćemo stvoriti efekat Chevron u CSS-u, koji se nekada postigao samo korištenjem pozadinske slike. Upotrijebite selektor: Nakon što stvorite dodatni element na koji možete pojedinačno postaviti stilove. Trokutasti obrazac kreira se pomoću različitih CSS granica, tako da, kao što možete vidjeti na prethodnoj slici, plavi trokut može se stvoriti nanošenjem granica vrha i dna za prelazak područja pokrivanja. Te su granice obojene crveno za jasnoću, ali ako su transparentne, onda ispada plavi trokut. Taj efekt granice se zatim kreće na svom mjestu koristeći apsolutno pozicioniranje.
Granični top: 40px solidan proziran; Granično dno: 40px solidna prozirna; Granica-lijevo: 40px Solid # 3498DB;
Učinak obruba s ispravnim vrijednostima boja stvorit će željeni trokut koji će dati "mrvice kruha" popularnog oblika Chevrona.
#crumbs ul li a: Prije: 40px solidna prozirna; granično dno: 40px solidna prozirna; pogranično lijevo: 40px solid # d4f2ff; položaj: 0; vrh: 0;)
Koristeći iste principe, na lijevom dijelu "mrvice kruha" može se nanijeti još jedan trokutasti oblik. Ovoga puta se zatraži ista boja granice kao boje pozadine za sakrivanje komada plave pozadinske veze.
Padding: 30px 40px 0 80px;
Kao što je upućeno na HTML dodaje, niz "mrvica hljeba" povećava se, podijeljeni su zanimljivim oblikom sa Chevronom, zahvaljujući trokutastom učinku granica CSS-a i malog desnog vanjskog povratka.
#crumbs ul li: prvo dijete a (granični gornji lijevi radijus: 10px; pogranični donji lijevi radijus: 10px;) #crumbs ul li: prvo dijete a: prije (prikaz: nema;) #crums ul Li: posljednje dijete A (podlozi: 80px; granični-top-desni radijus: 10px; pogranični donji desni radijus: 10px;) #crumbs ul li: posljednje dijete a: nakon (displej: nema; )
Puni blok "mrvica hljeba" može se dalje stilizirati uklanjanjem efekta trokuta iz prvog i posljednji elementi Korištenje selektora: prvo dijete i: zadnje dijete, nakon čega možete dati male uglove zaokruživanja koristeći svojstvo granične radijuse.
#crumbs ul li a: lebde (pozadina: # FA5BA5;) #crumbs ul li a: lebde: nakon (pogranična-lijeva boja: # fa5ba5;)
Sve što ostaje je da primijeni učinak na veze koje se javljaju kada se pokaže pokazivač miša. Ne zaboravite da promijenite vrijednost nekretnine u boji s lijevom bojom za efekt trokuta u stanju lebdeći pokazivača miša tako da će cijeli "mrvica kruha" promijeniti boju.
Prevod - Djurka
Pozdrav, dragi čitaoci. Na ovaj dan ćemo naučiti kreirati Prekrasan mrvice hljeba (Krušne mrvice) za obična mjesta, kao i za WordPress blogove. Savjetujem vam da ne preskočite ovaj trenutak, jer mrvice prikazuju put do vašeg članka ili informacija na mjestu, što će u velikoj mjeri olakšati plovidbu na mjestu, kao i dodatne interne veze.
CSS.
Ul (margina: 0; obloga: 0; list-stil: nema;)Sve, prvo nije urađen mali korak. A sada dodamo sve isto prekrasan pogled Naši mrvice.
Prvi primjer
Oblik samog elementa sastojat će se od tri dijela koja su povezana u jednom cijelom dijelu. Da biste to jasnije, pogledali crtež ispod:
# Kruh: #eeee; širina granice: 1px; granični stil: čvrsta; granična boja: # f5f5f5 # e5e5e5 #ccc; granični radijus: 5px; kutija-sjena: 0 0 2px rgba (0, 0,0, .2); preliv: Širina; Širina: 100%;) # kruh-kruh-jedna Li (plovak: lijevo;) # brebem:. 7Em 1Em. 7Em; TEXT- Dekoracija: Nema; Boja: # 444; Pozicija: Relativna; Tekst-Shadow: 0 1px 0 Rgba (255,255,255, .5); Pozadina: #DDD; pozadina-slika: Linearni gradijent (na desno, # F5F5F5, # DDD);) # kruh-crumbi-jedan LI: Prvo dijete A (ulijevo za djecu: 1Em; granični radijus: 5px 0 0 5px;) # hleb-spram-jedna A: lebde (pozadina: #ffffs; :: Zapokretelj, jedan A :: Prije: "Sadržaj:"; "Pozicija: Apsolut; Top: 50%; MARGIN-TOP: 1,53EM Čvrsta prozirna; pogranično dno: 1,5Em Solicija prozirna; od pograničnog: 1Em solid; desno: -1em;) # krušne mrvice-jedan a :: poslije (z-indeks: 2; #ddd;) # krušne mrvice - jedan a :: prije (prije) Granica lijeve boje: # CCC; Desno: -1,1EM; Z-indeks: 1; ) # HredCrumbovi - jedan A: lebdeč: Poslijerter (borov-lijeva boja: #fff;) # krušne mrvice-jedna .trurn, # hrvatsko-jedan. (Font-Težina: BOLD; -One .trurtul: za poslijepodnevnice, # krušne mrvice-jedna .trurtula :: Prije (Sadržaj: Normalno;)
Drugi primjer
Ovdje kao u prvom primjeru, element se sastoji od tri dijela, koja su u jednom dijelu zatvorena koristeći CSS..
# Kruh-dva (preliv: Skrivena; širina: 100%;) # kruh-creurms-dva li (plovak: lijevo; marža: 0.5Em 0 1Em;) # pozadina: #ddd; jastuk: .10EM 1Em ; Levo: levo; nekom dekoracija: nema; Boja: # 444; Tekst-senka: 0 1px 0 RGBA (255,255,255, .5); Pozicija: Relativna kruh-dva A: lebde (pozadina: # 99db76;) # Kruh-dva a :: Prije: apsolut; vrh: 50%; margin-top: -1,5em; širina granice: 1,5Em 0 1,5Em 1Em; granični stil: kruti; #ddd #ddd # DDD prozirni; lijevo: -1EM;) # Hrepe-HOver-a: Prije): # 99db76 # 99db76 # 99db76 prozirna;) # hljeb-creurms-dva a :: nakon (sadržaj: apsolut; Vrh: 50%; marža: -1,5Em; granični top: 1,5Em solidna prozirna; granično dno: 1,5Em solidan prozirni; granični lijevo: 1EM solid #ddd;) # -1em-dvostruko-dvije O: HOVER :: Poslije (granična lijeva boja: # 99db76;) # kruh-mrzbe-dva. Churrent, # krušne mrvice-dva. Komplet: lebde (font-weig) HT: BOLD; Pozadina: Nema; ) # Krušne mrvice-dva. Čimurlup: za poslijer, # krušne mrvice-dvije. Čistovanje :: Prije (sadržaj: normalno;)
Treći primjer
U trećoj stavci elementi se sastoje od dva dijela.
# Kruh: Skrivena; širina: 100%;) # kruh-hrumbi-tri li (plovak: lijevo; margina: 0 2em 0 0;) # brebed:. 7Em 1Em .10EM 2EM; Lijevo; Nema dekoracija: Nema; Boja: # 444; Pozadina: Položaj: Pozicija: Relativna; Z-Indeks: 1; Tekst-senka: 0 1px 0 Rgba (255,255,255 ,,5); Border-polumjer: .4EM 0 0.4EM;) # HRUMPRUMS-TRI A: HOVER (pozadina: # abe0ef;) # krušne mrvice-tri a :: nakon (pozadina: #ddd; sadržaj: "; visina: -1,53EM: -1,25em ; Pozicija: Apsolutno; Desno: -1EM; Vrh: 50%; Širina: 2.5EM; Z-indeks: -1; transformacija: Rotiranje (45DEG); Border-polumjerski: .4EM;) # HOWER: : Nakon (abe0ef;) # kruh-crumbi-tri. Thurrent, # hleb-crump-tri. Lebde (font-težina: podebljana; pozadina: nema;) tri. "Sadržaj: normalno; )
Četvrti primjer
# Kruh-preliv: Skrivena; širina: 100%;) # kruh-hrembil-četiri li (plovak: lijevo; marža: 0.5em 0 1em;) # pozadina: #ddd; jastuk: .10EM 1EM ; Levo: levo; ne dekoracija: nema; boja: # 444; Tekst-senka: 0 1px 0 RGBA (255,255,255, .5); Pozicija: relativna;) 4 hleb (pozadina: # EFC9AB;) # Kruh-četiri a :: prije, # krušne mrvice-četiri a :: nakon (sadržaj: "; Pozicija: apsolut; Top: 0; dno: 0; širina: 1em; transformacija: skew (-10deg) ;) # Krušne mrvice - četiri a :: prije (lijevo: -5em; granični radijus: 5px 0 0 5px;) # krušne mrvice-četiri a: lebde: # EFC9AB;) # krušne mrvice-četiri a :: Nakon (desno: -.5em; Border-polumjera: 0 5px 5px 0;) # hljeb-creurms-četiri a: lebde: nakon (pozadina: # EFC9AB;) # kruh, # htjelica-hrvatsko-četvorke (Težina fonta: Bold; Pozadina: Nema;) # kruh-mrzovi-četvoricu. Čišćenje: za poslijerjenja, # kruh-smanjuje-četiri.) :: Normal;)
Primer
To je sve, vjerujem da vrlo elegantan i istovremeno jednostavne mrvice. Pogotovo nema slika, u skladu s tim su se učitavaju brže.
U svim primjerima u stilovima korištena oznaka lebdeći.To mijenja boju elementa kada, samo ako ne volite ni jedno od predstavljenih boja, možete ga lako zamijeniti sami.
Sada je vrijeme za odlazak u drugi dio, naime, priložit ćemo jedan od primjera na vašem wordpress blog, Idi.
Dio 2. Kako priložiti podatke mrvica hljeba na wordpress blog
I tako, prvo moramo preuzeti dodatak Hljeb-pump navxt, Možete ga preuzeti. Nakon što se dodatak preuzme i aktivira, morat ćete napraviti neke postavke:
Podešavanja su u parametrima. Na kartici Generale. Potrebno je pronaći liniju Separator kruha. I izbrišite standardnu \u200b\u200bvrijednost koja stoji tamo, drugim riječima, morate napustiti polje prazno.
Sve, s završenim dodatkom, sada morate odabrati dizajn koji vam se najviše svidjelo. U ovaj slučaj Ovo je primjer ovog stila:
to drugi primjeršto je gore u članku.
Uzmite i jednostavno kopirajte ove stilove, a zatim ih dodajte stil.css. Vaša tema, na bilo kojem mjestu koje vam se najviše sviđa, savjetujem vam da istaknete početak i kraj stilova mrvica, jer ako ubuduće želim da se promijenim tamo, zbunjuju se.
Sada morate dodati krušne mrvice direktno na blog.
U administracijskom blogu je pronađen izgled , onda uredniki odaberite single.php.. Zatim dodajte sljedeće:
Bitan
Imajte na umu da sam izazov prevarante vrijedi između oznaka. ID koji krušne mrvice-dva.Ne zaboravite da promijenite ovaj ID za primjer koji je dodan u stilove. Na primjer, ako je ovo prvi primjer (što je veće) tada treba biti ovako:
Ako imate predložak na blogu izgleda poput mene, u smislu da je pozadina siva i sama blok je bijela, mrvice su najbolje stavljene na blok, poput mene. Jer se mogu prenijeti na novi string Ako je ime predugo i vjerujte mi, nije baš lijepo. :-)
To je sve. dragi prijateljiAko su neke poteškoće nastale nužno pitajte u komentarima. Vidimo se uskoro.
U prethodnom članku "Navigacija kruha sa trouglovima na CSS" opisala je kako kreirati meni koji koriste Čisti CSS, bez upotrebe grafike.
Metoda je dobra za sve, s izuzetkom jednog - podrška takvog menija u starim preglednicima je sumnjiva. Ali uz prijenos ovog članka, upućivanje je upućena na način stvaranja navigacije pomoću grafike.
Članak je napisan dugo vremena, ali metoda apsolutno radi. Autor članka Veeerle Pieters, a sam post naziva se "jednostavnim skalabilnim CSS krušnim mrvicama". Ispod, čak nisam besplatan prijevod, ali besplatno prepričavanje.
Prije nekoliko dana imao sam zadatak stvaranja navigacijskog menija u stilu "mrvica hljeba" (krušne mrvice) za mjesto za koje sam radio. Mislim da je takav izbornik potreban za svaku web mjesto, ali u nekim je slučajevima vrlo koristan i praktičan.
Međutim, ovaj primjer je kao da se osnova koja se može proširiti i primijeniti u praksi. Izbornik će se kreirati pomoću redovne liste naljepnice.
| 1 | Ul |
Ali prvo pogledajte uzorak s kojim ćemo raditi:
Jelovnik je dovoljno jednostavan, kao što je kod s kojim ćemo ga stvoriti.
HTML kod - Basic UL lista
- DOM
- Glavni dio.
- Podseb.
- Sub sub subse.
- Stranica na kojoj ste trenutno
Sve stavke izbornika imaju veze osim zadnje - "Stranice koju ste trenutno na raspolaganju" (stranica na kojoj ste trenutno). Kada radite na meniju, pitao sam se je li popis najprikladnijeg strukture stvoriti meni? Vjerujem da primjena popisa u ovom slučaju nije strogo pravilo, ali čini mi se da je najvažnija i tačna opcija.
CSS kod - Kreirajte stilove za meni
Specificiramo zajedničke stilove za meni - uklonite markere i resetirajte uvlake u preglednici Firefox.Tj.:
Napravljamo plutajući kroz nekretninu jednaku visini cijelog menija. I podesite boju teksta. Zatim postavljamo za referencu pozadinske slike izgled iz izgleda. Da biste to učinili, režite samo samo "strelicu":... što "jednostavno" žuri "desno (100%) i postavi točno vertikalno (50%). Radimo i iz reference na desno desno
| 1 | Padding-lijevo: 15px |
Već gotovo sve je učinjeno. Ostaje da postavi stilove za tekst veze. Uklonimo standardni podvlačenje i promijenimo njegovu boju:
.crumbs li a: link, .crumps li a: posjećen (tekst-dekoracija: nema; boja: # 777;)| 1 | : lebdjeti |
| 1 | : fokus |
Rezultat našeg rada predstavljen je ovdje:
Prevoditelj Napomena:
Autor članka pojednostavio je primjer i sam kodeks, u skladu s tim, koliko sam razumio. Činjenica je da je primjer jasno vidljiv linearni vodoravni gradijent za svaku od stavki izbornika. Međutim, nije prikazano u kodu. Pa, ne problemi - Da li je problem stvoriti linearni gradijent na CSS3? Sam zadatak je ispunjen!
Navigacija u obliku "mrvica kruha" pomaže posjetiteljima web lokacijama da se kreću u hijerarhijskoj strukturi dokumenata i pronađu put do gornji nivo. Stoga, ako se web mjesto miješa veliki broj Dokumenti, onda se mora osigurati "krušnim mrvicama". U ovoj lekciji bit će predstavljen CSS kod za stvaranje različitih opcija dizajna za takav željeni navigacijski alat.
Html markup
Označavanje je jednostavno i minimalno. Zasnovan je na neuređenoj listi.
CSS.
Za početak, napravit ćemo malu CSS resetiranje za naš popis popisa:
Ul (margina: 0; obloga: 0; list-stil: nema;)
Za dizajn naših "mrvica kruha" koristit će se pseudo-elementi.
Prvi primjer
U ovom primjeru koristi se vrlo jednostavna tehnika. Trokut je kreiran na okviru desno uz pomoć pseudo-elemenata postavljenih jedan preko drugog. Tamni trokut prelazi za kreiranje efekta okvira.
# Kruh: #eeee; širina granice: 1px; granični stil: čvrsta; granična boja: # f5f5f5 # e5e5e5 #ccc; granični radijus: 5px; kutija-sjena: 0 0 2px rgba (0, 0,0, .2); preliv: Širina; Širina: 100%;) # kruh-kruh-jedna Li (plovak: lijevo;) # brebem:. 7Em 1Em. 7Em; TEXT- Dekoracija: Nema; Boja: # 444; Pozicija: Relativna; Tekst-Shadow: 0 1px 0 Rgba (255,255,255, .5); Pozadina: #DDD; pozadina-slika: Linearni gradijent (na desno, # F5F5F5, # DDD);) # kruh-crumbi-jedan LI: Prvo dijete A (ulijevo za djecu: 1Em; granični radijus: 5px 0 0 5px;) # hleb-spram-jedna A: lebde (pozadina: #ffffs; :: Zapokretelj, jedan A :: Prije: "Sadržaj:"; "Pozicija: Apsolut; Top: 50%; MARGIN-TOP: 1,53EM Čvrsta prozirna; pogranično dno: 1,5Em Solicija prozirna; od pograničnog: 1Em solid; desno: -1em;) # krušne mrvice-jedan a :: poslije (z-indeks: 2; #ddd;) # krušne mrvice - jedan a :: prije (prije) Granična lijeva boja: #ccc; ri GHT: -1,1EM; Z-indeks: 1; ) # HredCrumbovi - jedan A: lebdeč: Poslijerter (borov-lijeva boja: #fff;) # krušne mrvice-jedna .trurn, # hrvatsko-jedan. (Font-Težina: BOLD; -One .trurtul: za poslijepodnevnice, # krušne mrvice-jedna .trurtula :: Prije (Sadržaj: Normalno;)
CSS obrasci su izgrađeni pomoću pseudo-elemenata postavljenih prije i nakon elementa.
# Kruh-dva (preliv: Skrivena; širina: 100%;) # kruh-creurms-dva li (plovak: lijevo; marža: 0.5Em 0 1Em;) # pozadina: #ddd; jastuk: .10EM 1Em ; Levo: levo; nekom dekoracija: nema; Boja: # 444; Tekst-senka: 0 1px 0 RGBA (255,255,255, .5); Pozicija: Relativna kruh-dva A: lebde (pozadina: # 99db76;) # Kruh-dva a :: Prije: apsolut; vrh: 50%; margin-top: -1,5em; širina granice: 1,5Em 0 1,5Em 1Em; granični stil: kruti; #ddd #ddd # DDD prozirni; lijevo: -1EM;) # Hrepe-HOver-a: Prije): # 99db76 # 99db76 # 99db76 prozirna;) # hljeb-creurms-dva a :: nakon (sadržaj: apsolut; Vrh: 50%; marža: -1,5Em; granični top: 1,5Em solidna prozirna; granično dno: 1,5Em solidan prozirni; granični lijevo: 1EM solid #ddd;) # -1em-dvostruko O: HOVER :: Poslijerter (pogranična lijeva boja: # 99db76;) # krušne mrvice-dva. Churrent, # krušne mrvice-dva. Thurren: HOVER (Font-Težina: BOLD; Pozadina: Nema; ) # Krušne mrvice-dva. Čimurlup: za poslijer, # krušne mrvice-dvije. Čistovanje :: Prije (sadržaj: normalno;)
Koristeći svojstvo graničnog radijusa, uglovi pravokutnika i kvadrata su zakrivljeni. Kvadrat se okreće da napravi dijamant iz nje.
# Kruh: Skrivena; širina: 100%;) # kruh-hrumbi-tri li (plovak: lijevo; margina: 0 2em 0 0;) # brebed:. 7Em 1Em .10EM 2EM; Lijevo; Nema dekoracija: Nema; Boja: # 444; Pozadina: Položaj: Pozicija: Relativna; Z-Indeks: 1; Tekst-senka: 0 1px 0 Rgba (255,255,255 ,,5); Border-polumjer: .4EM 0 0.4EM;) # HRUMPRUMS-TRI A: HOVER (pozadina: # abe0ef;) # krušne mrvice-tri a :: nakon (pozadina: #ddd; sadržaj: "; visina: -1,53EM: -1,25em ; Pozicija: Apsolutno; Desno: -1EM; Vrh: 50%; Širina: 2.5EM; Z-indeks: -1; transformacija: Rotiranje (45DEG); Border-polumjerski: .4EM;) # HOWER: : Nakon (abe0ef;) # kruh-crumbi-tri. Thurrent, # hleb-crump-tri. Lebde (font-težina: podebljana; pozadina: nema;) tri. "Sadržaj: normalno; )
Uz pomoć pseudo elemenata dodaju se dva pravouganija. Tada uvijaju uglove.
# Kruh-preliv: Skrivena; širina: 100%;) # kruh-hrembil-četiri li (plovak: lijevo; marža: 0.5em 0 1em;) # pozadina: #ddd; jastuk: .10EM 1EM ; Levo: levo; ne dekoracija: nema; boja: # 444; Tekst-senka: 0 1px 0 RGBA (255,255,255, .5); Pozicija: relativna;) 4 hleb (pozadina: # EFC9AB;) # Kruh-četiri a :: prije, # krušne mrvice-četiri a :: nakon (sadržaj: "; Pozicija: apsolut; Top: 0; dno: 0; širina: 1em; transformacija: skew (-10deg) ;) # Krušne mrvice - četiri a :: prije (lijevo: -5em; granični radijus: 5px 0 0 5px;) # krušne mrvice-četiri a: lebde: # EFC9AB;) # krušne mrvice-četiri a :: Nakon (desno: -.5em; Border-polumjera: 0 5px 5px 0;) # hljeb-creurms-četiri a: lebde: nakon (pozadina: # EFC9AB;) # kruh, # htjelica-hrvatsko-četvorke (Težina fonta: Bold; Pozadina: Nema;) # kruh-mrzovi-četvoricu. Čišćenje: za poslijerjenja, # kruh-smanjuje-četiri.) :: Normal;)
Prednosti dizajna "krušnih mrvica" zasnovanih na CSS3
- Nema slika, pa samo ažurirajte i održavajte.
- Lako skalirano.
- Obrnuta kompatibilnost sa starim preglednicima.
U ovoj lekciji upoznat ćete se sa procesom kreiranja u Bootstrap 3 i 4 navigacijske lance ("krušne mrvice").
Označavanje navigacijskih lanaca
Navigacijski lanci ("krušne mrvice", krušne mrvice) je shema navigacije koja prikazuje trenutnu poziciju korisnika na web mjestu. Koriste se za prikaz hijerarhijski organiziranih informacija. Na primjer, u internetskoj trgovini "krušne mrvice" obično predstavljaju lanci odjeljaka. Uz njihovu pomoć, korisnik može odrediti u kojem je odjeljku sada, kao i omogućavaju vam da idete na odjeljke više visoki nivoi. Pružiti drugu mogućnost navigacije strukture web lokacije.
"Kruške mrvice" u Bootstrapu je obična naručena lista sa klasnim kruhom. Separator elementa liste automatski se dodaje pomoću CSS-a (Bootstrap.min.css) putem sljedeće klase:
Krušne mrvice\u003e LI + LI: Prije (boja: #cccccc; sadržaj: "/"; obloga: 0 5px;)
Primjer stvaranja "mrvica hljeba" sa čizmama.
Registracija navigacijskih lanaca u bootstrap-u
Još jedan primer:
Kruške mrvice za navigacijske arhive Informacije
Nije standardna varijanta dizajna krušnih mrvica
Razmotrite primjer stvaranja sljedeće utjelovljenja mrvica hljeba:
Primjer dizajna krušnih mrvica na web mjestu
Proces stvaranja mrvica hljeba sastoji se od razvoja HTML strukture i stilova (CSS).
CSS krušne mrvice:
/ * krušne mrvice * / #Breadcrumb (lista: nijedan; prikaz: Inline-Block; Block - lijevo: 0px;) #Breadcrumb .icon (Veličina fonta:) #Breadcrumb Li (plovak: lijevo;) LI a (boja: #fff; blok; pozadina: # cc2eaa; tekstualni dekoracija: nema; položaj: relativna; visina: 34px; 0px 0 5px; Tekst-Poravnavanje: Centar; Marža - - -Webkit-Korisnik-Odaberi: Nema; -Moz-Korisnik-Odaberite: None; -MS-Korisnik-Select: None; Korisnik-Odaberi: None;) #Breadcrumb Li: Prvo dijete A (požar -Seft; -moz-granični radijus: 4px 0 0 4px; -webkit-granični radijus: 4px; granični radijus: 4px 0 0 4px;) #Breadcrumb li: prvo dijete A: prije (granica: nijedna ;) #Breadcrumb li: Last-Child a (podlozi - desno: 15px; -moz-granični radijus: 0 4px 4px 0; -webkit-granični radijus: 0; granični radijus: 0 4px 4px 0;) # kruh Li: posljednje dijete A: nakon (granica: nema;) #Breadcrumb li a: prije, #Breadcrumb li a: nakon (sadržaj: "; Pozicija: apsolutna; na vrh: 0; CC2EAA; Širina granice: 17px 10px; Širina: 0; Visina: 0; ) #Breadcrumb li a: Prije (lijevo: -20px; granična lijeva boja: prozirna;) #Breadcrumb li a: nakon (lijevo: 100%; prozirna; bobo boja: # cc2eaa;) #Broadcrumb li a: lebde (boja pozadine:) #Broadcrumb li a: lebde: prije (granična boja: # a22587; granična lijeva boja: transparentna;) #Breadcrumb li a: lebde: nakon (granica - Lijeva boja: # A22587;) #Breadcrumb li a: aktivna (pozadina - boja: # a22587;) #Breadcrumb li a: aktivno: prije (granična boja: # a22587; prozirna;) # br. O: AKTIVNO: NAKON (Border-Levica boja: # A22587;) #Breadcrumb li.Current a (pokazivač-događaji: nema; kursor: nije dozvoljen; -webkit-box -shadow : Nema; kutija-senka: nema; neprozirnost: .65;)
Promjene boje izrađuju se uređivanjem vrijednosti odgovarajuće CSS svojsty.
HTML označavanje:
Vodeći iz trenutnog elementa (ako se koristi u lancu) vrši se dodavanjem trenutne klase u LI element.
