Pateicoties CSS un CSS3 attīstībai gadu gaitā, mēs esam sasnieguši punktu, kurā daudzi veci programmatūras risinājumi ieskaitot fona attēlus, tagad var pilnībā izveidot CSS. Šajā apmācībā mēs apskatīsim, kā izveidot navigācijas saišu secību, ko sauc par rīvmaize plakanā stilā, neizmantojot iepriekš populāro fona attēla metodi, ko sauca par bīdāmo durvju metodi.
Rīvmaize, ko veidosim, ir veidota ar ševroniem, lai vizualizētu strukturēta satura ideju. Iepriekš mēs izmantojām fona attēlu PNG formātā lai izveidotu šo ševrona formu, un tagad ar gudru apmales paņēmienu varat izveidot tādu pašu efektu, izmantojot tikai CSS.
Sāksim, izveidojot rīvmaiņas navigācijas saites kā sarakstu ar aizzīmēm. Katra "maizes drupača" būs elements
#crumbs ul li a (displejs: bloks; pludiņš: pa kreisi; augstums: 50 pikseļi; fons: # 3498db; teksta līdzinājums: centrā; polsterējums: 30 pikseļi 40 pikseļi 0 40 pikseļi; pozīcija: relatīvā; piemale: 0 10 pikseļi 0 0; fonta lielums : 20 pikseļi; teksta noformējums: nav; krāsa: #fff;)
Sākotnējie CSS stili katru saraksta vienumu enkuro ar glītu zila taisnstūra stilu. Teksts ir centrēts, un uz visām pusēm ir pievienots vienāds polsterējums. Lai pozicionētu absolūti nākamos elementus, šiem elementiem ir pievienota rekvizīta pozīcija: relatīvais, lai šie absolūti novietotie elementi tiktu parādīti attiecībā pret šo vecākelementu.
#crumbs ul li a: after (saturs: ""; apmale augšpusē: 40 pikseļi vienkrāsains sarkans; apmale apakšā: 40 pikseļi vienkrāsains sarkans; apmale pa kreisi: 40 pikseļi vienkrāsains zils; pozīcija: absolūtā; pa labi: -40 pikseļi; augšā: 0; )
Tagad CSS izveidosim ševrona efektu, kas iepriekš bija sasniedzams tikai ar fona attēlu. Izmantojiet: pēc atlasītāja, lai izveidotu papildu elementu, ko var veidot individuāli. Trīsstūra forma tiek veidota, izmantojot dažādas CSS apmales, tāpēc, kā redzat iepriekšējā attēlā, zilu trīsstūri var izveidot, uzliekot augšējo un apakšējo apmali, lai krustotu pārklājuma laukumu. Skaidrības labad šīs apmales ir iekrāsotas sarkanā krāsā, bet, ja tās ir caurspīdīgas, iegūstat zilu trīsstūri. Šis apmales efekts pēc tam tiek pārvietots vietā, izmantojot absolūto pozicionēšanu.
Apmale augšpusē: 40 pikseļi, caurspīdīgs; apmale-apakša: 40 pikseļi, caurspīdīgs; apmale-left: 40px solid # 3498db;
Apmales efekts ar pareizām krāsu vērtībām radīs vēlamo trīsstūri, kas piešķirs rīvmaizēm populāro ševrona formu.
#drupatas ul li a: pirms (saturs: ""; apmale augšpusē: 40 pikseļi, caurspīdīgs; apmale apakšā: 40 pikseļi, caurspīdīgs; apmale-kreisais: 40 pikseļi ciets # d4f2ff; pozīcija: absolūta; pa kreisi: 0; augšā: 0; )
Izmantojot tos pašus principus, maizes drupatas kreisajai pusei var uzklāt citu trīsstūra formu. Šoreiz iestatiet tādu pašu apmales krāsu kā fona krāsu, lai paslēptu saites zilās fona krāsas daļas.
Polsterējums: 30 pikseļi 40 pikseļi 0 80 pikseļi;
HTML kodā tiek pievienotas saites, pateicoties trīsstūrveida CSS apmales efektam un nelielajam labajam polsterējumam, rīvmaiņas secība pieaug, atdalīta ar interesantiem ševroniem.
#crumbs ul li: pirmais bērns a (apmale-augšējā-kreisais-rādiuss: 10px; apmale-apakšā-kreisais-rādiuss: 10px;) #crumbs ul li: pirmais bērns a: pirms (displejs: nav;) #crumbs ul li: pēdējais pakārtots a (padding-labais: 80 pikseļi; apmale-augšējā-labais-rādiuss: 10px; apmale-apakšējā-labais-rādiuss: 10px;) #crumbs ul li: pēdējais bērns a: pēc (displejs: nav ;)
Pilnīgo rīvmaizes bloku var vēl vairāk veidot, noņemot trīsstūra efektu no pirmā un pēdējais vienums izmantojot pirmās atvases un pēdējās atvases atlasītājus, pēc kuriem varat nedaudz noapaļot stūrus, izmantojot īpašību border-radius.
#drupatas ul li a: virziet kursoru (fons: # fa5ba5;) # drupatas ul li a: novietojiet kursoru: pēc (apmale-kreisā krāsa: # fa5ba5;)
Atliek tikai saitēm lietot kursora novietošanas efektu. Neaizmirstiet mainīt apmales-kreisās krāsas rekvizīta vērtību kursora trīsstūra efektam, lai visa rīvmaiņa mainītu krāsu.
Tulkojums - pienākums
Sveiki dārgie lasītāji. Šajā dienā mēs mācīsimies radīt skaists maizes drupačas(rīvmaize) parastajām vietnēm, kā arī WordPress emuāriem... Es iesaku šo brīdi neizlaist, jo drupatas parāda ceļu uz jūsu rakstu vai informāciju vietnē, kas ievērojami atvieglos vietnes navigāciju, kā arī papildu iekšējās saites.
CSS
ul (piemale: 0; polsterējums: 0; saraksta stils: nav;)Viss, pirmais nebūt ne mazsvarīgais solis tika sperts. Tagad pievienosim visu to pašu skaists skats mūsu drupatas.
Pirmais piemērs
Pats elementa izskats sastāvēs no trim daļām, kuras ir savienotas vienā veselā daļā. Lai padarītu to skaidrāku, skatiet attēlu zemāk:
# rīvmaize-one (fons: #eee; apmales platums: 1px; apmales stils: vienkrāsains; apmales krāsa: # f5f5f5 # e5e5e5 #ccc; apmales rādiuss: 5px; lodziņa ēna: 0 0 2px rgba (0, 0,0, .2); pārpilde: paslēpta; platums: 100%;) # rīvmaize-one li (peldēt: pa kreisi;) # rīvmaize-one a (polsterējums: .7em 1em .7em 2em; peldēt: pa kreisi; teksts- apdare: nav; krāsa: # 444; pozīcija: relatīva; teksta ēna: 0 1px 0 rgba (255 255 255, .5); fona krāsa: #ddd; fona attēls: lineārs gradients (pa labi, # f5f5f5, # ddd);) # rīvmaize-one li: pirmais bērns a (polsterējums-kreisais: 1em; apmales rādiuss: 5px 0 0 5px;) # rīvmaize-one a: virziet kursoru (fons: #ffff;) # rīvmaize-viens a :: pēc, # rīvmaize-viens a :: pirms (saturs: ""; pozīcija: absolūts; augšdaļa: 50%; mala augšpusē: -1,5 em; apmale augšpusē: 1,5 em cieta caurspīdīga; apmale apakšā: 1,5 em vienkrāsains caurspīdīgs; apmale-kreisais: 1em ciets; pa labi: -1em;) # rīvmaize-one a :: after (z-index: 2; border-left-color: #ddd;) # rīvmaize-one a :: before ( apmale-kreisā krāsa: # ccc; pa labi: -1,1 em; z-indekss: 1; ) # rīvmaize-one a: hover :: after (border-left-color: #fff;) # rīvmaize-one .current, # rīvmaize-one .current: hover (fonta svars: treknraksts; fons: nav;) # rīvmaizes-viens .pašreizējais :: pēc, # rīvmaizes-viens .pašreizējais :: pirms (saturs: normāls;)
Otrais piemērs
Šeit, tāpat kā pirmajā piemērā, elements sastāv no trim daļām, kuras ir savienotas vienā daļā ar izmantojot CSS.
# rīvmaize-divi (pārpilde: paslēpta; platums: 100%;) # rīvmaize-divi li (pludiņš: pa kreisi; mala: 0,5em 0 1em;) # rīvmaize-divi a (fons: #ddd; polsterējums: 0,7em 1em ; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; teksta ēna: 0 1px 0 rgba (255 255 255, .5); pozīcija: relatīvs;) # rīvmaize-divi a: kursors (fons: # 99db76;) # rīvmaize — divi a :: pirms (saturs: ""; pozīcija: absolūta; augšdaļa: 50%; mala-augšdaļa: -1,5 em; apmales platums: 1,5 em 0 1,5 em 1 em; apmales stils: vienkrāsains; apmale- krāsa: #ddd #ddd #ddd caurspīdīga; pa kreisi: -1em;) # rīvmaize-divi a: kursors :: pirms (apmales krāsa: # 99db76 # 99db76 # 99db76 caurspīdīga;) # rīvmaize-divi a :: pēc (saturs : ""; pozīcija: absolūta; augšdaļa: 50%; mala augšpusē: -1,5 em; apmale augšpusē: 1,5 em caurspīdīga; apmale apakšā: 1,5 em cieta caurspīdīga; apmale pa kreisi: 1 em cieta #ddd; pa labi: -1em;) # rīvmaize-two a: hover :: after (border-left-color: # 99db76;) # rīvmaize-two .current, # rīvmaize-two .current: hover (font-weig ht: treknraksts; fons: nav; ) # rīvmaizes-divi .pašreizējais :: pēc, # rīvmaize-divi .pašreizējais :: pirms (saturs: normāls;)
Trešais piemērs
Trešajā priekšmetā elementi ir divās daļās.
# rīvmaize-trīs (pārpilde: paslēpta; platums: 100%;) # rīvmaize-trīs li (peldiņš: pa kreisi; mala: 0 2em 0 0;) # rīvmaize-trīs a (polsterējums: 0,7 em 1 em .7 em 2 em; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; fons: #ddd; pozīcija: relatīvs; z-indekss: 1; teksta ēna: 0 1px 0 rgba (255 255 255, .5); apmales rādiuss: 0,4 em 0 0,4 em;) # rīvmaize — trīs a: virziet kursoru (fons: # abe0ef;) # rīvmaize — trīs a :: pēc (fons: #ddd; saturs: ""; augstums: 2,5 em; mala augšpusē: -1,25 em ; pozīcija: absolūta; pa labi: -1 em; augšpusē: 50%; platums: 2,5 em; z-indekss: -1; pārveidot: pagriezt (45 grādi); apmales rādiuss: 0,4 em;) # rīvmaize — trīs a: virziet kursoru: : after (fons: # abe0ef;) # rīvmaize-trīs .pašreizējais, # rīvmaize-trīs .current: hover (fonta svars: treknraksts; fons: nav;) # rīvmaize-trīs .current :: after (saturs: normāls; )
Ceturtais piemērs
# rīvmaize-četri (pārpilde: paslēpta; platums: 100%;) # rīvmaize-četri li (peldošs: pa kreisi; mala: 0,5em 0 1em;) # rīvmaize-četri a (fons: #ddd; polsterējums: 0,7em 1em ; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; teksta ēna: 0 1px 0 rgba (255 255 255, .5); pozīcija: relatīvs;) # rīvmaize-četri a: kursors (fons: # efc9ab;) # rīvmaize-četri a :: pirms, # rīvmaize-četri a :: pēc (saturs: ""; pozīcija: absolūts; augšā: 0; apakšā: 0; platums: 1em; fons: #ddd; pārveidot: šķībs (-10 grādi );) # rīvmaize-četri a :: pirms (pa kreisi: -.5em; apmales-rādiuss: 5px 0 0 5px;) # rīvmaize-četri a: hover :: before (fons: # efc9ab;) # rīvmaize-četri a :: pēc (pa labi: -.5em; apmales rādiuss: 0 5px 5px 0;) # rīvmaize-četri a: kursors :: pēc (fons: # efc9ab;) # rīvmaize-četri .strāva, # rīvmaize-četri .strāva : virzīt kursoru (fonta svars: treknrakstā; fons: nav;) # rīvmaize-četri .pašreizējais :: pēc, # rīvmaize-četri .pašreizējais :: pirms (saturs: normāls;)
Piemērs
Tas arī viss, manuprāt, tās ir ļoti stilīgas un tajā pašā laikā vienkāršas drupatas. Turklāt nav attēlu, tāpēc tie tiek ielādēti ātrāk.
Visos stilu piemēros tiek izmantots tags novietojiet kursoru, kas maina elementa krāsu, kad, it kā jums nepatīk kāda no piedāvātajām krāsām, varat to viegli aizstāt ar savu.
Tagad ir pienācis laiks pāriet uz otro daļu, proti, mēs pievienosim vienu no piemēriem mūsu WordPress emuārs, aiziet.
2. daļa. Kā pievienot šos rīvmaizi savam WordPress emuāram
Tātad, vispirms mums ir jālejupielādē spraudnis Breadcrumb NavXT, jūs varat to lejupielādēt. Pēc spraudņa lejupielādes un aktivizēšanas jums būs jāveic daži iestatījumi:
Iestatījumi ir norādīti parametros. Cilnē Ģenerālis jāatrod līnija Maizes drupatas atdalītājs un noņemiet tur esošo standarta vērtību, citiem vārdiem sakot, jums ir jāatstāj lauks tukšs.
Viss, mēs esam pabeiguši ar spraudni, tagad jums ir jāizvēlas dizains, kas jums patīk visvairāk. V šajā gadījumā piemērs būs šāds stils:
to otrais piemērs, kas atrodas rakstā augstāk.
Mēs ņemam un vienkārši kopējam šos stilus un pēc tam pievienojam tos stils.css Jūsu tēma, kur vien jums patīk vislabāk, iesaku izcelt drupaču stilu sākumu un beigas, jo, ja nākotnē vēlēsities tur kaut ko mainīt, jūs apjuksiet.
Tagad jums ir jāpievieno rīvmaize tieši emuāram.
Emuāra administratora apgabalā mēs atrodam izskats , tad redaktors un izvēlieties single.php... Tālāk pievienojiet šo:
Svarīgs
Lūdzu, ņemiet vērā, ka pati drupatas izsaukšanas funkcija atrodas starp tagiem kura id rīvmaize - divi, neaizmirstiet mainīt šo ID uz piemēru, ko pievienojāt stiliem. Piemēram, ja šis ir pirmais piemērs (kas ir iepriekš), tad tam vajadzētu būt šādam:
Ja jūsu emuāra veidne ir līdzīga manējai, tādā ziņā, ka fons ir pelēks un pats satura bloks ir balts, drupatas vislabāk ir novietot virs bloka, piemēram, manējā. Jo tos var transportēt uz jauna līnija ja vārds ir pārāk garš un, ticiet man, tas nav īpaši skaists. :-)
Tas ir viss. dārgie draugi, ja rodas kādas grūtības, pārliecinieties jautājiet komentāros... Uz drīzu redzēšanos.
Iepriekšējā rakstā “Navigācija rīvmaizē ar CSS trijstūriem” tika aprakstīts, kā izveidot izvēlni, izmantojot tīrs CSS, neizmantojot grafiku.
Metode ir piemērota visiem, izņemot vienu lietu - šādas izvēlnes atbalsts vecākās pārlūkprogrammās ir apšaubāms. Bet, tulkojot šo rakstu, bija saite uz veidu, kā izveidot navigāciju, izmantojot grafiku.
Raksts tika uzrakstīts jau sen, bet metode ir absolūti efektīva. Raksta autors ir Vērls Pīters, un pats ieraksts saucas “Vienkārši mērogojami CSS balstīti rīvmateriāli”. Zemāk es citēju pat nevis brīvu tā tulkojumu, bet gan brīvu pārstāstu.
Pirms dažām dienām man bija uzdevums izveidot rīvmaizes stila navigācijas izvēlni vietnei, pie kuras strādāju. Es nedomāju, ka šāda izvēlne ir nepieciešama katrai vietnei, taču dažos gadījumos tā ir ļoti noderīga un praktiska.
Tomēr šis piemērs ir kā ietvars, ko var paplašināt un pielietot praksē. Izvēlne tiks izveidota, izmantojot parastu sarakstu ar aizzīmēm
| 1 | ul |
Bet vispirms apskatīsim paraugu, ar kuru mēs strādāsim:
Izvēlne ir diezgan vienkārša, tāpat kā kods, ar kuru mēs to izveidosim.
HTML kods — saraksts ar aizzīmēm ul
- Mājas
- Galvenā sadaļa
- Apakš sadaļa
- Apakš sadaļa
- Lapa, kurā atrodaties šobrīd
Visi izvēlnes vienumi ir saistīti, izņemot pēdējo - “Lapa, kurā pašlaik atrodaties”. Strādājot pie ēdienkartes, aizdomājos – vai saraksts ir piemērotākā struktūra ēdienkartes veidošanai? Es uzskatu, ka saraksta izmantošana šajā gadījumā nav stingrs noteikums, bet man šķiet, ka tas ir semantiskākais un pareizākais variants.
CSS kods — izvēlnes veidošana
Mēs iestatām vispārīgus izvēlnes stilus — noņemiet marķierus un atiestatiet atkāpes Firefox pārlūkprogrammas IE:
peldošs caur īpašumu, kas vienāds ar augstumu visā izvēlnē -. Un mēs iestatām teksta krāsu. Tālāk mēs ievietojam fona attēlu, kas izgriezts no saites izkārtojuma. Lai to izdarītu, jums ir jāizgriež tikai pati “bultiņa”:... ko “stumjam” pa labi (100%) un novietojam tieši vertikāli (50%). Mēs arī atkāpēsim saiti pa labi.
| 1 | polsterējums pa kreisi: 15 pikseļi |
Gandrīz viss jau ir izdarīts. Atliek iestatīt saišu teksta stilus. Noņemsim standarta pasvītrojumu un mainīsim tā krāsu:
.crumbs li a: link, .crumbs li a: apmeklēja (teksta noformējums: nav; krāsa: # 777;)| 1 | : virziet kursoru |
| 1 | : fokuss |
Mūsu darba rezultāts ir parādīts šeit:
Tulkotāja piezīme:
Raksta autors ir maksimāli vienkāršojis piemēru un pašu kodu, attiecīgi, cik saprotu. Fakts ir tāds, ka piemērs skaidri parāda lineāru horizontālu gradientu katram izvēlnes vienumam. Tomēr tas netika atspoguļots kodeksā. Nu, nav problēmu — vai CSS3 ir problēma izveidot lineāru gradientu? Pats uzdevums ir izpildīts!
Ātrgaitas navigācija palīdz vietnes apmeklētājiem orientēties dokumentu hierarhiskajā struktūrā un atrast ceļu uz to augstākais līmenis... Tāpēc, ja vietne satur liels skaits dokumentus, tad tas ir jāpiegādā ar "maizes drupačām". Šajā apmācībā tiks parādīts CSS kods, lai izveidotu dažādas dizaina iespējas šādam vēlamajam navigācijas rīkam.
HTML marķējums
Marķējums ir vienkāršs un minimāls. Tas ir balstīts uz nesakārtotu sarakstu.
CSS
Vispirms veiksim nelielu CSS atiestatīšanu mūsu nesakārtotajam sarakstam:
Ul (piemale: 0; polsterējums: 0; saraksta stils: nav;)
Lai izstrādātu rīvmaizi, mēs izmantosim pseidoelementus.
Pirmais piemērs
Šajā piemērā izmantota ļoti vienkārša tehnika. Izveido rāmī pa labi trīsstūri ar pseidoelementiem, kas ir sakrauti viens virs otra. Tumšais trīsstūris tiek pārvietots, lai izveidotu rāmja efektu.
# rīvmaize-one (fons: #eee; apmales platums: 1px; apmales stils: vienkrāsains; apmales krāsa: # f5f5f5 # e5e5e5 #ccc; apmales rādiuss: 5px; lodziņa ēna: 0 0 2px rgba (0, 0,0, .2); pārpilde: paslēpta; platums: 100%;) # rīvmaize-one li (peldēt: pa kreisi;) # rīvmaize-one a (polsterējums: .7em 1em .7em 2em; peldēt: pa kreisi; teksts- apdare: nav; krāsa: # 444; pozīcija: relatīva; teksta ēna: 0 1px 0 rgba (255 255 255, .5); fona krāsa: #ddd; fona attēls: lineārs gradients (pa labi, # f5f5f5, # ddd);) # rīvmaize-one li: pirmais bērns a (polsterējums-kreisais: 1em; apmales rādiuss: 5px 0 0 5px;) # rīvmaize-one a: virziet kursoru (fons: #ffff;) # rīvmaize-viens a :: pēc, # rīvmaize-viens a :: pirms (saturs: ""; pozīcija: absolūts; augšdaļa: 50%; mala augšpusē: -1,5 em; apmale augšpusē: 1,5 em cieta caurspīdīga; apmale apakšā: 1,5 em vienkrāsains caurspīdīgs; apmale-kreisais: 1em ciets; pa labi: -1em;) # rīvmaize-one a :: after (z-index: 2; border-left-color: #ddd;) # rīvmaize-one a :: before ( apmales-left-color: #ccc; ri ght: -1,1 em; z-indekss: 1; ) # rīvmaize-one a: hover :: after (border-left-color: #fff;) # rīvmaize-one .current, # rīvmaize-one .current: hover (fonta svars: trekns; fons: nav;) # rīvmaizes-viens .pašreizējais :: pēc, # rīvmaizes-viens .pašreizējais :: pirms (saturs: normāls;)
CSS formas tiek veidotas, izmantojot pseidoelementus, kas novietoti pirms un pēc elementa.
# rīvmaize-divi (pārpilde: paslēpta; platums: 100%;) # rīvmaize-divi li (peldošs: pa kreisi; mala: 0 ,5 em 0 1 em;) # rīvmaize-divi a (fons: #ddd; polsterējums: .7em 1em ; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; teksta ēna: 0 1px 0 rgba (255 255 255, .5); pozīcija: relatīvs;) # rīvmaize-divi a: kursors (fons: # 99db76;) # rīvmaize — divi a :: pirms (saturs: ""; pozīcija: absolūta; augšdaļa: 50%; mala-augšpusē: -1,5 em; apmales platums: 1,5 em 0 1,5 em 1 em; apmales stils: vienkrāsains; apmale- krāsa: #ddd #ddd #ddd caurspīdīga; pa kreisi: -1em;) # rīvmaize-divi a: kursors :: pirms (apmales krāsa: # 99db76 # 99db76 # 99db76 caurspīdīga;) # rīvmaize-divi a :: pēc (saturs : ""; pozīcija: absolūta; augšdaļa: 50%; mala augšdaļa: -1,5 em; apmale augšpuse: 1,5 em caurspīdīga; apmale apakšā: 1,5 em cieta caurspīdīga; apmale pa kreisi: 1 em cieta #ddd; pa labi: -1em;) # rīvmaize-two a: hover :: after (border-left-color: # 99db76;) # rīvmaize-two .current, # rīvmaize-two .current: hover (fonta svars: treknraksts; fons: nav; ) # rīvmaizes-divi .pašreizējais :: pēc, # rīvmaize-divi .pašreizējais :: pirms (saturs: normāls;)
Robežas rādiusa rekvizīts noapaļo taisnstūru un kvadrātu stūrus. Kvadrāts tiek pagriezts, lai no tā izveidotu dimantu.
# rīvmaize-trīs (pārplūde: paslēpta; platums: 100%;) # rīvmaize-trīs li (peldiņš: pa kreisi; mala: 0 2em 0 0;) # rīvmaize-trīs a (polsterējums: .7em 1em .7em 2em; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; fons: #ddd; pozīcija: relatīvs; z-indekss: 1; teksta ēna: 0 1px 0 rgba (255 255 255, .5); apmales rādiuss: 0,4 em 0 0 ,4 em;) # rīvmaize-trīs a: virziet kursoru (fons: # abe0ef;) # rīvmaize-trīs a :: pēc (fons: #ddd; saturs: ""; augstums: 2,5 em; malas augšdaļa: -1,25 em ; pozīcija: absolūta; pa labi: -1 em; augšā: 50%; platums: 2,5 em; z-indekss: -1; pārveidot: pagriezt (45 grādi); apmales rādiuss: 0,4 em;) # rīvmaize — trīs a: virziet kursoru: : after (fons: # abe0ef;) # rīvmaize-trīs .pašreizējais, # rīvmaize-trīs .current: hover (fonta svars: treknrakstā; fons: nav;) # rīvmaize-trīs .current :: after (saturs: normāls; )
Izmantojot pseidoelementus, tiek pievienoti divi taisnstūri. Pēc tam stūri tiek noapaļoti.
# rīvmaize-četri (pārpilde: paslēpta; platums: 100%;) # rīvmaize-četri li (peldošs: pa kreisi; mala: 0,5em 0 1em;) # rīvmaize-četri a (fons: #ddd; polsterējums: 0,7em 1em ; pludiņš: pa kreisi; teksta noformējums: nav; krāsa: # 444; teksta ēna: 0 1px 0 rgba (255 255 255, .5); pozīcija: relatīvs;) # rīvmaize-četri a: kursors (fons: # efc9ab;) # rīvmaize-četri a :: pirms, # rīvmaize-četri a :: pēc (saturs: ""; pozīcija: absolūts; augšā: 0; apakšā: 0; platums: 1em; fons: #ddd; pārveidot: šķībs (-10 grādi );) # rīvmaize-četri a :: pirms (pa kreisi: -.5em; apmales-rādiuss: 5px 0 0 5px;) # rīvmaize-četri a: hover :: before (fons: # efc9ab;) # rīvmaize-četri a :: pēc (pa labi: -.5em; apmales rādiuss: 0 5px 5px 0;) # rīvmaize-četri a: kursors :: pēc (fons: # efc9ab;) # rīvmaize-četri .strāva, # rīvmaize-četri .strāva : virzīt kursoru (fonta svars: treknrakstā; fons: nav;) # rīvmaize-četri .pašreizējais :: pēc, # rīvmaize-četri .pašreizējais :: pirms (saturs: normāls;)
CSS3 Breadcrumb Design priekšrocības
- Nav attēlu, tāpēc to ir viegli atjaunināt un uzturēt.
- Viegli mērogojams.
- Atpakaļ saderīgs ar vecākām pārlūkprogrammām.
Šajā nodarbībā ir aprakstīts, kā izveidot rīvmaiņas programmās Bootstrap 3 un 4.
Maizes drupatas uzcenojums
Rīcības drupatas ir navigācijas modeļi, kas parāda lietotāja pašreizējo atrašanās vietu vietnē. Tos izmanto, lai parādītu hierarhiski sakārtotu informāciju. Piemēram, interneta veikalā "rīvmaize" parasti ir ķēdē savienotas sadaļas. Ar to palīdzību lietotājs var noteikt, kurā sadaļā viņš šobrīd atrodas, kā arī ļauj vairāk doties uz sadaļām augsti līmeņi, t.i. nodrošināt citu veidu, kā pārvietoties vietnes struktūrā.
Bootstrap rīvmaiņas ir parasts sakārtots saraksts ar klases rīvmašīnām. Saraksta vienumu atdalītājs tiek automātiski pievienots ar CSS (bootstrap.min.css), izmantojot šādu klasi:
Rīvmaizes> li + li: pirms (krāsa: #cccccc; saturs: "/"; polsterējums: 0 5 pikseļi;)
Piemērs, kā izveidot rīvmaize, izmantojot Bootstrap.
Breadcrumbs veidošana pakalpojumā Bootstrap
Vēl viens piemērs:
Ātrgaitas, lai pārvietotos arhivētajā informācijā
Nav standarta dizaina variants maizes drupačām
Apsveriet šādas rīvmaizes dizaina opcijas izveides piemēru:
Maizes drupatas dizaina piemērs vietnē
Rīvmaizes izveides process sastāv no HTML struktūras un stila (CSS) izstrādes.
CSS rīvmaize:
/ * rīvmaize * / #breadcrumb (saraksta stils: nav; displejs: inline-block; padding-left: 0px;) #breadcrumb .icon (fonta lielums: 14px;) #breadcrumb li (peld: pa kreisi;) # rīvmaize li a (krāsa: #fff; displejs: bloks; fons: # cc2eaa; teksta noformējums: nav; pozīcija: relatīvs; augstums: 34 pikseļi; līnijas augstums: 34 pikseļi; polsterējums: 0 10 pikseļi 0 5 pikseļi; teksta līdzināšana: centrā ; margin-right: 23px; -webkit-user-select: nav; -moz-user-select: nav; -ms-user-select: nav; user-select: nav;) #breadcrumb li: pirmais bērns a ( polsterējums -kreisais: 15 pikseļi; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px;) #breadcrumb li: pirmais bērns a: pirms (apmale: nav ;) #breadcrumb li: pēdējais bērns a (padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0;) # rīvmaize li: pēdējais bērns a: pēc (apmale: nav;) #breadcrumb li a: pirms, #breadcrumb li a: after (saturs: ""; pozīcija: absolūts; augšā: 0; apmale: 0 ciets # cc2eaa; apmales platums: 17 pikseļi 10 pikseļi; platums: 0; augstums: 0; ) #breadcrumb li a: before (kreisais: -20px; apmales-left-color: caurspīdīgs;) #breadcrumb li a: after (kreisais: 100%; apmales krāsa: caurspīdīgs; apmales-left-color: # cc2eaa;) #breadcrumb li a: hover (fona krāsa: # a22587;) #breadcrumb li a: hover: before (border-color: # a22587; border-left-color: caurspīdīgs;) #breadcrumb li a: hover: after (apmale -kreisā krāsa: # a22587;) #breadcrumb li a: active (fona krāsa: # a22587;) #breadcrumb li a: aktīva: pirms (apmales krāsa: # a22587; apmales-kreisā krāsa: caurspīdīga;) # rīvmaize li a: aktīva: pēc (apmales-kreisā krāsa: # a22587;) #breadcrumb li.current a (rādītāja notikumi: nav; kursors: nav atļauts; filtrs: alfa (necaurredzamība = 65); -webkit-box -ēna: nav; lodziņa ēna: nav; necaurredzamība: 0,65;)
Krāsu izmaiņas tiek veiktas, rediģējot atbilstošo CSS rekvizītu vērtības.
HTML marķējums:
Pašreizējā elementa saglabāšana (ja tas tiks izmantots ķēdē) tiek veikts, pievienojot pašreizējo klasi elementam li.
