Վերջին տարիներին CSS եւ CSS3- ի զարգացման շնորհիվ մենք հասել ենք այն պահին, երբ շատ հին ծրագրային լուծումներ, ներառյալ ֆոնային պատկերներ, այժմ կարող են ամբողջությամբ ստեղծվել CSS- ում: Այս դասում մենք կքննարկենք ստեղծել «Հացաթխուկներ» նավիգացիայի հղումների հաջորդականությունը, հարթ ոճով, առանց ֆոնային պատկերի հետ աշխատելու նախապես հանրաճանաչ մեթոդի, կոչվում է «լոգարիթմական դռներ» մեթոդ:
«Հացաթխում է փշրանքներ», որոնք մենք կստեղծենք, ոճավորված են Chevrons- ի տեսքով `պատկերացնելու կառուցվածքային բովանդակության գաղափարը: Նախկինում մենք կօգտագործենք ֆոնային պատկերը PNG ձեւաչափով `Chevron- ի այս ձեւը ստեղծելու համար, եւ այժմ օգտագործելով սահմանների խորամանկ հանդերձանքը, կարող եք ստեղծել միայն CSS- ի միջոցով:
Մենք կսկսենք «հացի փշրանքներ» նավարկելու համար հղումների ստեղծում `որպես չօգտագործված ցուցակ: Յուրաքանչյուր «հացի փշրանք» տարր է
#crumbs ul li a (ցուցադրում. Block; float; ձախ; բարձրություն, 50px; ֆոն. # 3498DB; 20px; Տեքստային ձեւավորում. Ոչ մեկը; Գույն, #fff;)
CSS- ի սկզբնական ծածկագիրը յուրաքանչյուր խարիսխ է դնում կոկիկ կապույտ ուղղանկյունի ոճի ցուցակի: Տեքստը գտնվում է կենտրոնում, եւ բոլոր կողմերից ավելացվում են հավասար ներքին կետեր: Բացարձակապես հետեւյալ տարրերը դիրքավորելու համար այս տարրերը ավելացրին դիրքը. Հարաբերական սեփականություն., Այնպես որ այդ բացարձակապես տեղադրված իրերը ցուցադրվում են այս ծնողի տարրերի համեմատ:
#crumbs ul li a: Հետո (բովանդակություն, "; Սահման-վերեւ, 40px պինդ կարմիր; սահմանը ներքեւում; 40px ամուր; -40px; )
Այժմ մենք կստեղծենք Chevron ազդեցություն CSS- ում, որոնք նախկինում ձեռք են բերվում միայն ֆոնային պատկերի օգտագործմամբ: Օգտագործեք ընտրիչը. Հետո ստեղծել լրացուցիչ տարր, որին կարող եք անհատապես ստեղծել ոճեր: Եռանկյունաձեւ ձեւը ստեղծվում է տարբեր CSS սահմանների միջոցով, որպեսզի տեսնեք նախորդ պատկերում, կապույտ եռանկյունը կարող է ստեղծվել `ծածկույթի տարածքը հատելու համար` օգտագործելով վերեւի եւ ներքեւի սահմանները: Այս սահմանները կարմիր գույնի համար կարմիր են, բայց եթե դրանք թափանցիկ են, ապա ստացվում է կապույտ եռանկյունը: Սահմանի այս ազդեցությունն այնուհետեւ տեղում է իր տեղում `օգտագործելով բացարձակ դիրքավորում:
Սահման-վերեւ, 40px պինդ թափանցիկ; Սահմանի հատակը, 40px պինդ թափանցիկ; Սահման-ձախ, 40px պինդ # 3498dB;
Սահմանի ազդեցությունը ճիշտ գույնի արժեքներով կստեղծի ցանկալի եռանկյուն, որը կտա «հացի փշրանքներ» Chevron- ի հանրաճանաչ ձեւը:
#crumbs ul li a: Նախքան, 40px պինդ թափանցիկ; սահմանի հատակը. 40px պինդ թափանցիկ; սահմանը ձախ. 40px պինդ # D4F2FF; ձախ, 0;)
Օգտագործելով նույն սկզբունքները, մեկ այլ եռանկյունաձեւ ձեւ կարող է կիրառվել «Հաց խորտակ» ձախ մասի վրա: Այս անգամ սահմանի նույն գույնը, որքան ֆոնի գույնը խնդրվում է թաքցնել կապույտ ֆոնային կապի կտորները:
Լիցք, 30px 40px 0 80px;
Ինչպես վկայակոչվում է HTML- ի հավելումներին, «հացի փշրանքների» հաջորդականությունը մեծանում է, դրանք բաժանվում են հետաքրքիր ձեւով Chevron- ի հետ, CSS սահմանների եռանկյուն ազդեցության եւ փոքր ճիշտ վերադարձի շնորհիվ:
#crumbs ul li. Առաջին երեխայի ա (սահմանի վերեւից ձախ-շառավիղ. 10px; սահմանի ներքեւ-ձախ-շառավիղ. 10px;) # առաջին երեխա LI. Last-child A (լիցքավորում-աջ, 80px; սահմանի վերեւից աջ-շառավիղ. 10px; սահմանի ներքեւի աջ-շառավիղ. 10px; )
«Հաց փշրանքների» ամբողջական բլոկը կարող է ավելի ստիլիզացվել `եռանկյունու ազդեցությունը հեռացնելով առաջին եւ վերջին տարրերից` օգտագործելով ընտրողներ. Առաջին երեխա, որից հետո կարող եք տալ անկյունների փոքր կլորացում Սահմանային շառավիղի ունեցվածքը:
#crumbs ul li a: hover (ֆոն. # fa5ba5;) #crumbs ul li a: hover: հետո (սահմանի ձախ գույնը, # FA5BA5;)
Այն ամենը, ինչ մնում է էֆեկտը կիրառել այն հղումներին, որոնք տեղի են ունենում, երբ մկնիկի ցուցիչը սավառնում է: Մի մոռացեք փոխել սահմանի ձախ գույնի ունեցվածքի արժեքը եռանկյունու ազդեցության համար մկնիկի ցուցիչով սավառնելու վիճակում, որպեսզի ամբողջ «հաց փշրանքը» կփոխի գույնը:
Թարգմանություն - Djurka
Բարեւ, հարգելի ընթերցողներ: Այս օրը մենք կսովորենք ստեղծել Գեղեցիկ հացի փշրանքներ (հացաթուխներ) սովորական կայքերի համար, ինչպես նաեւ WordPress բլոգերի համար, Ես խորհուրդ եմ տալիս չսահմանափակվել այս պահը, քանի որ փշրանքները ցույց են տալիս ձեր հոդվածի կամ տեղեկատվության ճանապարհը կայքում, որը մեծապես հեշտացնում է նավարկումը կայքում, ինչպես նաեւ լրացուցիչ ներքին հղումներով:
CSS.
Ul (լուսանցք. 0; լիցք; 0; ցուցակի ոճը. Ոչ մեկը;)Ամեն ինչ, առաջինը փոքր քայլ չէ: Եվ հիմա եկեք ավելացնենք մեր փշրանքների գեղեցիկ տեսքը:
Առաջին օրինակը
Տարրի ձեւը ինքնին բաղկացած կլինի երեք մասից, որոնք միացված են մեկ ամբողջ մասում: Այն ավելի պարզ դարձնելու համար տես ներքեւում նկարը.
# Breadcrumbs-մեկը (ֆոն. #Eee; սահմանի լայնություն. 1px; սահմանի ոճը. Սահմանային գույնը `# F5F5F5 # e5EVA; 0 0, 0,0, .2); արտահոսք. Թաքնված; լայնություն, 100%;) # breadcrumbs-մեկ li (լողալ. 7EM) Ձեւավորում. Ոչ մեկը; Գույն, # 444; Պաշտոն, հարազատ; Տեքստ-ստվեր, 0 1px 0 RGBA; Bridge-Grade; # DDD);) # breadcrumbs-one li: առաջին երեխա a (լիցքավորում-ձախ. 1 գ; 1 հատ 0 0 5px;) # breadcrumbs-մեկ on a :: Դրանից հետո # Breadcrumbs-One A :: Նախկինում (բովանդակություն. "Դիրքը,". -1.5EM; 1.5EM Solid Top: 1.5EM Պինդ թափանցիկ; սահմանը ձախ. 1EM պինդ; աջ. -1em;) # breadcrumbs-մեկ :: հետագա (index; 2) ( Սահմանի ձախ գույնը. # CCC; Right իշտ, -1.1em; Z- ինդեքս. 1; ) # Breadcrumbs-One A: Hover :: Ամրոց (սահմանի ձախ գույն. #FFF;) # հացահատիկ (տառատեսակ. -Որ. Cresent :: Հետո, # breadcrumbs-մեկը .Current :: Նախկին (բովանդակություն, նորմալ;)
Երկրորդ օրինակը
Այստեղ, ինչպես առաջին օրինակով, տարրը բաղկացած է երեք մասից, որոնք կառուցված են մեկ մասում, օգտագործելով CSS:
# Breadcrumbs-Two (արտահոսք. Թաքնված; Լայնություն, 100%;) # breadcrumbs-երկու li (float: 0.5EM) ; Float: ձախ; տեքստի ձեւավորում. Ոչ մեկը; Գույն, # 444; Տեքստ-ստվեր. 0 1px 0 rgba;) # 99DB76;) # Breadcrumbs-Two a :: Նախկին. Բացարձակ; վերեւ, 50%; -1.5em; -1.5em; 1.5EM #DDD # DDD թափանցիկ; ձախ. -1em;) # breadcrumbs-twe a: hover :: Նախկին (սահմանային գույնը `# 99DB76 # 99DB76 թափանցիկ;) Վերեւ, 50%; Margin-top: -1.5em; -1.5em; 1.5EM պինդ թափանցիկ; սահմանի ներքեւ. 1.5EM պինդ թափանցիկ; աջ. -1em; Հովեր :: Դրանից հետո (սահմանի ձախ գույնը. # 99DB76;) # breadcrumbs-two .Crent, # հացաթխման HT: Bold; Նախապատմություն. Ոչ մեկը; ) # Breadcrumbs-երկու.
Երրորդ օրինակը
Երրորդ կետում տարրերը բաղկացած են երկու մասից:
# Breadcrumbs-երեք (արտահոսք. Թաքնված; լայնություն, 100%;) # հացաթխրամներ-երեք լի (լիցք, 0,7 գ 2 հատ): Ձախ; տեքստի ձեւավորում. Ոչ մեկը; Գույն, # 444; ֆոն. #DDD; դիրք, հարազատ, 0,5-րդ շառավիղ. .4EM 0 0 .4EM;) # breadcrumbs-երեք Ա. Հովեր (ֆոն. # Աբեակ;) # breadcrumbs-երեք A :: Դրանից հետո. -1.25em Դիրքը, բացարձակ; աջ, -1em; վերեւ, 50%; լայնություն, 2.5EM; -1; վերափոխում.) # Bread bread breadი; Հետո (ֆոն. # Abe0ef;) # breadcrumbs-երեք .Crent, # breadcrumbs-երեք. Սավր (տառատեսակ, ոչ, նորմալ; )
Չորրորդ օրինակ
# Breadcrumbs-Four (արտահոսք. Թաքնված; Լայնություն, 100%;) # breadcrumbs-չորս LI (float: 0.5EM) ; Float: ձախ; տեքստի ձեւավորում. Ոչ մեկը; Գույն, # 444; Տեքստ-ստվեր. 0 1px 0 rgba;) # 5). Ցեղ (ֆոն. # Efc9ab;) # Breadcrumbs-four a :: Նախկինում, # breadcrumbs-four a :: Հետո (բովանդակություն. "; Դիրք, բացարձակ, 1-րդ; ;) # Breadcrumbs-four a :: Նախկինում (ձախ. -5em; Սահման-շառավիղ. 5px 0 0 5px;) # breadcrumbs-four a :: Դրանից հետո (աջ. -.5em; սահմանի շառավիղ. 0 5px 5px 0;) # breadcrumbs-չորս A: hover :: Հետո (ֆոն. # E bread9 bread) (Տառատեսակ. Համարձակ; ֆոն. Ոչ մեկը;) # հացաթխում-չորս .Crent :: ирити, # նորմալ;)
Օրինակ
Դա ամեն ինչ է, ես հավատում եմ, որ շատ նորաձեւ եւ միեւնույն ժամանակ պարզ փշրանքներ: Հատկապես պատկերներ չկան, համապատասխանաբար դրանք ավելի արագ բեռնված են:
Օգտագործված ոճերի բոլոր օրինակներում Սավառնել.Դա փոխում է տարրի գույնը, երբ, պարզապես եթե ձեզ դուր չի գալիս ներկայացված գույներից մեկը, դուք կարող եք հեշտությամբ փոխարինել այն ձեր սեփականով:
Այժմ ժամանակն է երկրորդ մասը գնալ, մասնավորապես, մենք կներկայացնենք օրինակներից մեկը ձեր WordPress բլոգի մեջ, գնացել ենք:
Մաս 2. Ինչպես կցել հացի փշրանքների տվյալները WordPress բլոգում
Եվ այսպես, նախ, մենք պետք է ներբեռնենք plugin BreadCrumb Navxt, Դուք կարող եք ներբեռնել այն: Plugin- ը ներբեռնելու եւ ակտիվացման ավարտից հետո ձեզ հարկավոր է որոշ պարամետրեր կատարել.
Պարամետրերը պարամետրերում են: Ներդիրում Ընդհանուր Անհրաժեշտ է գտնել մի գիծ BreadCrumb բաժանարար: Եվ ջնջեք այն ստանդարտ արժեքը, որը կանգնած է այնտեղ, այլ կերպ ասած, դուք պետք է դաշտը դատարկ թողնեք:
Ամեն ինչ, հավելվածով Ավարտված է, այժմ անհրաժեշտ է ընտրել այն դիզայնը, որը ձեզ ամենաշատն է դուր եկել: Այս դեպքում այս ոճը կլինի օրինակով.
այն Երկրորդ օրինակըորը վերեւում է հոդվածում:
Վերցրեք եւ պարզապես պատճենեք այս ոճերը, ապա դրանք ավելացրեք style.css. Ձեր թեման, ցանկացած վայրում, որը ձեզ ամենաշատը դուր է գալիս, ես խորհուրդ եմ տալիս կարեւորել փշրանքների ոճերի սկիզբն ու վերջը, քանի որ եթե ապագայում ես ուզում եմ փոխել այնտեղ, շփոթել:
Այժմ հարկավոր է ավելացնել հաց փշրանքները ուղղակիորեն բլոգում:
Ադմինիստրատորի բլոգում գտնվել է արտաքին տեսք, ապա խմբագիրեւ ընտրեք single.php., Հաջորդը, ավելացնել հետեւյալը.
Կարեւոր
Խնդրում ենք նկատի ունենալ, որ ծուռ մարտահրավերն ինքնին արժե պիտակների միջեւ: ID, որը Հացաթխման երկու:Մի մոռացեք փոխել այս ID- ն այն օրինակով, որը ավելացվել է ոճերին: Օրինակ, եթե սա առաջին օրինակն է (որն ավելի բարձր է), ապա պետք է այսպիսին լինի.
Եթե \u200b\u200bդուք ունեք բլոգի վրա ձեւանմուշ, ինձ նման է, այն իմաստով, որ ֆոնը մոխրագույն է, եւ բլոկն ինքնին սպիտակ է, բայց փշրանքները լավ են դնում բլոկի վրա: Քանի որ դրանք կարող են տեղափոխվել նոր տողի, եթե անունը շատ երկար է եւ հավատացեք ինձ, այն շատ գեղեցիկ չէ: :-)
Այս ամենը: Հարգելի ընկերներ, եթե որեւէ դժվարություն պարտադիր է Հարցրեք մեկնաբանություններում, Տեսնում եմ ձեզ շուտով:
Նախորդ հոդվածում «BreadCrumbs նավարկություն ԵՊՀ-ների վրա» թեմայով նկարագրված է, թե ինչպես ստեղծել ընտրացանկ, օգտագործելով մաքուր CSS, առանց գրաֆիկայի օգտագործման:
Մեթոդը լավ է բոլորի համար, բացառությամբ մեկից `հին զննարկիչներում նման ընտրացանկի աջակցությունը կասկածելի է: Բայց այս հոդվածի փոխանցմամբ, հղումն ուղղված էր գրաֆիկայի միջոցով նավարկություն ստեղծելու միջոց:
Հոդվածը գրված է երկար ժամանակ, բայց մեթոդը բացարձակապես աշխատում է: Հոդվածի Հեղինակն ընդդեմ կաբինետների, եւ այդ պաշտոնը ինքնին կոչվում է «պարզ մասշտաբային CSS հիմնված հացաթուխներ»: Ստորեւ ես նույնիսկ անվճար թարգմանություն եմ, բայց անվճար վերափոխում:
Մի քանի օր առաջ ես խնդիր ունեի ստեղծել նավիգացիայի մենյու «Հաց փշրանքներ» (Breadcrumbs) ոճով կայքի համար, որի համար ես աշխատել եմ: Չեմ կարծում, որ նման ընտրացանկը անհրաժեշտ է յուրաքանչյուր կայքի համար, բայց որոշ դեպքերում այն \u200b\u200bշատ օգտակար է եւ գործնական:
Այնուամենայնիվ, այս օրինակը կարծես թե այն հիմքն է, որը կարող է ընդլայնել եւ կիրառվել գործնականում: The անկը կստեղծվի, օգտագործելով պարբերական պիտակի ցուցակը:
| 1 | Ul |
Բայց նախ նայեք նմուշին, ում հետ մենք կաշխատենք.
The անկը բավականաչափ պարզ է, ինչպես կա այն ծածկագիրը, որի հետ մենք կստեղծենք այն:
HTML կոդ - Basic UL ցուցակը
- ՏՈՒՆ
- Հիմնական բաժինը:
- Ենթաբաժին:
- Ենթաբաժին բաժին:
- Էջը հենց հիմա եք
Menu անկի բոլոր տարրերը ունեն հղումներ, բացառությամբ վերջինից. «Էջը, որի վրա հիմա գտնվում եք» (էջը, որտեղ դուք ներկայումս գտնվում եք): Menu անկի վրա աշխատելիս ես մտածեցի, արդյոք ամենահարմար կառույցի ցանկը ընտրացանկ ստեղծելն է: Ես հավատում եմ, որ այս դեպքում ցուցակի կիրառումը խիստ կանոն չէ, բայց ինձ թվում է, որ ամենաաղմկալի եւ ճիշտ տարբերակն է:
CSS կոդ - Ստեղծեք ոճեր ընտրացանկի համար
Մենյուի համար մենք նշում ենք ընդհանուր ոճերը. Հեռացրեք ցուցիչները եւ վերափոխեք Firefox զննարկիչներում տեղադրվածները, այսինքն.
Մենք լողում ենք ամբողջ ընտրացանկի բարձրության վրա հավասար գույքի միջոցով: Եւ սահմանեք տեքստի գույնը: Հաջորդը, մենք տեղադրում ենք հղում կատարելու ֆոնային պատկերը, որը կտրված է դասավորությունից: Դա անելու համար կտրեք միայն «սլաքը».... Որ «պարզապես« շտապում »աջ (100%) եւ տեղադրել ճիշտ ուղղահայաց (50%): Մենք նույնպես անում ենք աջ կողմում գտնվող իրավունքից
| 1 | Լիցքավորում - ձախ, 15px |
Արդեն գրեթե ամեն ինչ արվում է: Մնում է կապել տեքստի ոճեր: Մենք հեռացնում ենք ստանդարտ ներքեւում եւ փոխում դրա գույնը.
.| 1 | : սավառնել |
| 1 | կենտրոնանալ |
Մեր աշխատանքի արդյունքը ներկայացված է այստեղ.
Թարգմանիչ Նշում.
Հոդվածի հեղինակը պարզեցրեց օրինակն ու ծածկագիրը ինքնին, համապատասխանաբար, որքան հասկանում եմ: Փաստն այն է, որ օրինակն ակնհայտորեն տեսանելի է ընտրացանկի յուրաքանչյուր կետի համար գծային հորիզոնական գրադիենտ: Այնուամենայնիվ, այն չի ցուցադրվել կոդում: Դե, ոչ թե խնդիրներ. Արդյոք խնդիր է CSS3- ում գծային գրադիենտ ստեղծել: Առաջադրանքն ինքնին կատարված է:
Նավիգացիան «Հաց փշրանքների» տեսքով կօգնի տեղակայման այցելուներին նավարկելու փաստաթղթերի հիերարխիկ կառուցվածքում եւ գտնել դեպի վերեւի մակարդակի ճանապարհը: Հետեւաբար, եթե մեծ թվով փաստաթղթեր տեղակայված են կայքում, ապա այն պետք է ապահովվի «հացի փշրանքներ»: Այս դասում CSS ծածկագիրը կներկայացվի, ձեւավորման տարբեր տարբերակներ ստեղծելու համար, ի հայտ ըստ ցանկալի նավիգացիոն գործիքների:
HTML Markup
Նշումը պարզ եւ նվազագույն է: Այն հիմնված է չկարգավորված ցուցակի վրա:
CSS.
Սկսելու համար մենք կկազմենք փոքր CSS վերականգնում մեր անկարգ ցուցակի համար.
Ul (լուսանցք. 0; լիցք; 0; ցուցակի ոճը. Ոչ մեկը;)
Կօգտագործվեն մեր «հացի փշրանքներ» կեղծ տարրերի ձեւավորման համար:
Առաջին օրինակը
Այս օրինակում օգտագործվում է շատ պարզ տեխնիկա: Շրջանակի վրա ստեղծվում է եռանկյունի աջ կողմում `մյուս կողմից տեղադրված կեղծ տարրերի օգնությամբ: Dark եռանկյունու տեղաշարժեր `շրջանակային էֆեկտ ստեղծելու համար:
# Breadcrumbs-մեկը (ֆոն. #Eee; սահմանի լայնություն. 1px; սահմանի ոճը. Սահմանային գույնը `# F5F5F5 # e5EVA; 0 0, 0,0, .2); արտահոսք. Թաքնված; լայնություն, 100%;) # breadcrumbs-մեկ li (լողալ. 7EM) Ձեւավորում. Ոչ մեկը; Գույն, # 444; Պաշտոն, հարազատ; Տեքստ-ստվեր, 0 1px 0 RGBA; Bridge-Grade; # DDD);) # breadcrumbs-one li: առաջին երեխա a (լիցքավորում-ձախ. 1 գ; 1 հատ 0 0 5px;) # breadcrumbs-մեկ on a :: Դրանից հետո # Breadcrumbs-One A :: Նախկինում (բովանդակություն. "Դիրքը,". -1.5EM; 1.5EM) Պինդ թափանցիկ; սահմանը ձախ. 1EM պինդ; աջ. -1em;) # breadcrumbs-մեկ :: հետագա (index; 2) ( Սահման-ձախ գույն. #CCC; RI Ght: -1.1em; Z- ինդեքս. 1; ) # Breadcrumbs-One A: Hover :: Ամրոց (սահմանի ձախ գույն. #FFF;) # հացահատիկ (տառատեսակ. -Որ. Cresent :: Հետո, # breadcrumbs-մեկը .Current :: Նախկին (բովանդակություն, նորմալ;)
CSS ձեւերը կառուցված են տարրերից առաջ եւ հետո տեղադրված կեղծ տարրերի միջոցով:
# Breadcrumbs-Two (արտահոսք. Թաքնված; Լայնություն, 100%;) # breadcrumbs-երկու li (float: 0.5EM) ; Float: ձախ; տեքստի ձեւավորում. Ոչ մեկը; Գույն, # 444; Տեքստ-ստվեր. 0 1px 0 rgba;) # 99DB76;) # Breadcrumbs-Two a :: Նախկին. Բացարձակ; վերեւ, 50%; -1.5em; -1.5em; 1.5EM #DDD # DDD թափանցիկ; ձախ. -1em;) # breadcrumbs-twe a: hover :: Նախկին (սահմանային գույնը `# 99DB76 # 99DB76 թափանցիկ;) Վերեւ, 50%; Մարժ. Հովեր. «Հանգստացնող (սահմանի ձախ գույնի. # 99DB76;) # breadcrumbs-երկու. Նախապատմություն. Ոչ մեկը; ) # Breadcrumbs-երկու.
Օգտագործելով սահմանային շառավիղի գույքը, ուղղանկյունի եւ հրապարակների անկյունները կոր են: Քառակուսի հերթը դրանից ադամանդ պատրաստելու համար:
# Breadcrumbs-երեք (արտահոսք. Թաքնված; լայնություն, 100%;) # հացաթխրամներ-երեք լի (լիցք, 0,7 գ 2 հատ): Ձախ; տեքստի ձեւավորում. Ոչ մեկը; Գույն, # 444; ֆոն. #DDD; դիրք, հարազատ, 0,5-րդ շառավիղ. .4EM 0 0 .4EM;) # breadcrumbs-երեք Ա. Հովեր (ֆոն. # Աբեակ;) # breadcrumbs-երեք A :: Դրանից հետո. -1.25em Դիրքը, բացարձակ; աջ, -1em; վերեւ, 50%; լայնություն, 2.5EM; -1; վերափոխում.) # Bread bread breadი; Հետո (ֆոն. # Abe0ef;) # breadcrumbs-երեք .Crent, # breadcrumbs-երեք. Սավր (տառատեսակ, ոչ, նորմալ; )
Կեղծ տարրերի օգնությամբ ավելացվում են երկու ուղղանկյուն: Հետո նրանք գանգրացնում են անկյունները:
# Breadcrumbs-Four (արտահոսք. Թաքնված; Լայնություն, 100%;) # breadcrumbs-չորս LI (float: 0.5EM) ; Float # Breadcrumbs-four a :: Նախկինում, # breadcrumbs-four a :: Հետո (բովանդակություն. "; Դիրք, բացարձակ, 1-րդ; ;) # Breadcrumbs-four a :: Նախկինում (ձախ. -5em; Սահման-շառավիղ. 5px 0 0 5px;) # breadcrumbs-four a :: Դրանից հետո (աջ. -.5em; սահմանի շառավիղ. 0 5px 5px 0;) # breadcrumbs-չորս A: hover :: Հետո (ֆոն. (Տառատեսակ. Համարձակ; ֆոն. Ոչ մեկը;) # հացաթխում-չորս .Crent :: ирити, # նորմալ;)
CSS3- ի հիման վրա «հացի փշրանքների» նախագծման առավելությունները
- Նկարներ չկան, այնպես որ պարզապես թարմացրեք եւ պահպանեք:
- Հեշտ մասշտաբի:
- Հակադարձ համատեղելիություն հին զննարկիչների հետ:
Այս դասում դուք կծանոթանաք Bootstrap 3 եւ 4 նավիգացիոն ցանցում ստեղծելու գործընթացին («Հաց Փշրանքներ»):
Նավիգացիոն շղթաների նշում
Նավիգացիոն ցանցեր («Հաց փշրանքներ», հացաթխման միջոցներ) նավիգացիոն սխեման է, որը ցույց է տալիս կայքում օգտագործողի ներկայիս դիրքը: Դրանք օգտագործվում են հիերարխիկորեն կազմակերպված տեղեկատվություն ցուցադրելու համար: Օրինակ, «Հաց փշրանքներ» առցանց խանութում սովորաբար ներկայացնում են բաժինների շղթաներ: Իրենց օգնությամբ օգտագործողը կարող է որոշել, թե որ բաժնումն է այժմ, ինչպես նաեւ թույլ են տալիս գնալ ավելի բարձր մակարդակների բաժիններ, այսինքն: Տրամադրել կայքի կառուցվածքը նավարկելու եւս մեկ հնարավորություն:
«Bread Crumbs» Bootstrap- ում սովորական կարգի ցուցակն է դասի հացաթուխներով: List ուցակի տարրի տարանջատիչը ավտոմատ կերպով ավելացվում է CSS (Bootstrap.min.css) օգտագործելով հետեւյալ դասի միջոցով.
Breadcrumbs\u003e Li + Li: Նախքան (Գույն: #CCCCCC; Բովանդակություն. "/"; Լիցք, 0 5px;)
«Հաց փշրանքներ» ստեղծելու օրինակ `Bootstrap- ով:
Նավիգացիոն շղթաների գրանցում Bootstrap- ում
Եւս մեկ օրինակ.
Հացաթխում է արխիվային տեղեկատվության նավարկության համար
Հացի փշրանքների դիզայնի ստանդարտ տարբերակ չէ
Դիտարկենք հացի փշրանքների հետեւյալ մարմնավորման ստեղծման օրինակ.
Կայքում հացի փշրանքների դիզայնի օրինակ
Հացի փշրանքների ստեղծման գործընթացը կազմված է HTML կառուցվածքի եւ ոճերի (CSS) մշակումից:
CSS հաց փշրանքներ.
/ * Հացաթխում է * / # breadcrumb (ցուցակի ոճը. Ոչ մեկը; ցուցադրում. Ներդիր-բլոկ; լիցք `0 հատ;) Li A (գույնը, #fff; ցուցադրում. Block; Block; Մարժապետ. -Գյուղացին, 15px; -moz- սահմանի շառավիղ. 4px 0 0 4Px; -webkit-Border-Radius: 4Px; 4Px 0 0 4px; ԱՌԱՆՈՐԴ. ;) # Breadcrumb li: Last-child A (լիցքավորում-աջ, 15px; -Moz; Սահմանի շառավիղ. -Webkit-Border-Radius: 0; Bronder-Radgain 0;) # breadcrumb LI. Last-child A: Հետո (սահման. Ոչ մեկը;) # breadcrumb li: Նախքան, # Breadcrumb Li A: CC2EAA; Սահմանի լայնությունը `17px 10px; Լայնություն, 0; Բարձրություն, 0; ) # Breadcrumb li: Նախքան (ձախ, -20px; սահմանի ձախ գույնը, թափանցիկ;) #breadcrumb li a: # Breadcrumb li a: hover (ֆոն-գույն. # A22587;) # breadcrumb li a: shover: Մինչեւ սահման.) # Bronder - Ձախ-գույն. # A22587;) # Breadcrumb LI A: Ակտիվ (ֆոն-գույն. # A22587;) # Breads-Leftware: Թափանցիկ;) # BreadCrumb Li Ա. Ակտիվ. Դրանից հետո (սահմանի ձախ գույնը, # A22587;) # BreadCrumb Li.Current a Ոչ մեկը; տուփ-ստվեր. Ոչ մեկը; Անթափանցիկություն. .65;)
Գույնի փոփոխությունները կատարվում են համապատասխան CSS համապատասխան հատկությունների արժեքների խմբագրմամբ:
HTML նշում.
Ընթացիկ տարրի առաջատարը (եթե այն օգտագործվում է շղթայում) իրականացվում է, ներկայիս դասը ավելացնելով LI տարր:
