Pesmet frumos. Crearea de pesmeturi plate folosind CSS. Yoast SEO - instrucțiuni detaliate pentru configurarea firimiturii

Datorită dezvoltării CSS și CSS3 în ultimii ani, am ajuns la punctul în care multe soluții software vechi care implică imagini de fundal pot fi acum construite în întregime în CSS. În acest tutorial, ne vom uita la crearea unei secvențe de link-uri de navigare numite „breadcrumb” într-un stil plat, fără a fi nevoie de tehnica de imagine de fundal cunoscută anterior numită metoda „sliding door”.

Pesmeturile pe care le vom crea sunt stilizate ca chevronuri pentru a vizualiza ideea de conținut structurat. Anterior, am fi folosit o imagine de fundal PNG pentru a crea această formă chevron, dar acum, cu o tehnică inteligentă a marginilor, putem crea același efect folosind doar CSS.

Vom începe prin a crea link-uri de navigare breadcrumb ca o listă neordonată. Fiecare pesmet va fi un element

  • cu elementul de ancorare instalat.

    #crumbs ul li a (afișare: bloc; float: stânga; înălțime: 50px; fundal: #3498db; text-align: center; padding: 30px 40px 0 40px; poziție: relativă; margine: 0 10px 0 0; font-size : 20px ; text-decor : niciunul ; culoare : #fff ; )

    Codul CSS inițial setează fiecare element din listă ancorat la un stil dreptunghi albastru. Textul este centrat și se adaugă umplutură egală pe toate părțile. Pentru a poziționa elementele absolut următoare, la acele elemente se adaugă proprietatea poziție: relativă, astfel încât acele elemente poziționate absolut să fie redate relativ la acel element părinte.

    #crumbs ul li a:after (conținut: ""; chenar-sus: 40px roșu continuu; chenar-jos: 40px roșu continuu; chenar-stânga: 40px albastru continuu; poziție: absolut; dreapta: -40px; sus: 0; )

    Acum vom crea un efect chevron în CSS, care anterior era realizabil numai folosind o imagine de fundal. Utilizați selectorul :after pentru a crea un element suplimentar care poate fi stilat individual. Forma triunghiulară este creată folosind diferite margini CSS, așa cum puteți vedea în imaginea anterioară, triunghiul albastru poate fi creat prin aplicarea marginilor de sus și de jos pentru a intersecta zona de acoperire. Aceste margini sunt colorate în roșu pentru claritate, dar dacă sunt transparente, va rezulta un triunghi albastru. Acest efect de graniță este apoi mutat în poziție folosind poziționarea absolută.

    Chenar-sus: 40px solid transparent; chenar-jos: 40px solid transparent; chenar-stânga: 40px solid #3498db ;

    Efectul de chenar cu valorile corecte de culoare va crea triunghiul dorit care conferă pesmetului forma populară de chevron.

    #crumbs ul li a:before (conținut: "" ; chenar-sus : 40px solid transparent ; chenar-jos : 40px solid transparent ; chenar-stânga : 40px solid #d4f2ff ; poziție : absolut ; stânga : 0 ; sus : 0 ; )

    Folosind aceleași principii, o altă formă triunghiulară poate fi aplicată în partea stângă a pesmetului. De această dată, culoarea chenarului este setată la aceeași culoare cu culoarea de fundal pentru a ascunde părți din culoarea albastră de fundal a link-ului.

    Umplutură : 30px 40px 0 80px ;

    Pe măsură ce se adaugă link-uri la HTML, secvența de pesmet crește, despărțite de chevronuri cu forme interesante, datorită efectului de margine CSS triunghiulară și a unei margini ușoare din dreapta.

    #crumbs ul li:first-child a ( chenar-sus-stânga-rază: 10px ; chenar-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( afișare : niciuna ; ) #crumbs ul li:last-child a ( padding-right : 80px ; chenar-sus-dreapta-raza: 10px ; border-bottom-right-radius: 10px ; ) #crumbs ul li:last-child a:after ( afișare: niciunul ;)

    Cutia de pesmet completă poate fi stilată în continuare prin eliminarea efectului de triunghi din primul și ultimul element folosind selectoarele :first-child și :last-child, după care puteți da colțurilor o mică rotunjire cu proprietatea border-radius.

    #crumbs ul li a:hover ( fundal: #fa5ba5 ; ) #crumbs ul li a:hover :după (border-left-color: #fa5ba5 ; )

    Tot ce mai rămâne este să aplicați efectul de hover la linkuri. Nu uitați să modificați valoarea proprietății border-left-color pentru efectul de triunghi asupra stării hover, astfel încât întregul pesmet să își schimbe culoarea.

    Traducere - Birou

    Listele sunt convenabile datorită structurii lor ierarhice și setărilor flexibile de vizualizare, prin urmare sunt utilizate nu numai pentru scopul propus, ci și pentru crearea diferitelor elemente ale paginii, cum ar fi breadcrumbs, paginare, meniuri, file etc.

    firimituri de pâine

    Breadcrumbs vă ajută să navigați pe site și să afișați poziția paginii curente în raport cu alte secțiuni ale site-ului. Acest lucru face ușor să urcăm un nivel și să înțelegeți în ce secțiune vă aflați în prezent. Deci, pentru un site tehnic, navigarea poate fi după cum urmează (Fig. 1).

    Orez. 1. Tipul de pesmet

    Ultimul text indică pagina curentă și nu este un link. Toate elementele sunt separate unele de altele printr-un simbol, de obicei o săgeată (→), o bară oblică (/), un semn mai mare decât (>) și altele asemenea.

    Deoarece designul este atribuit stilurilor, codul HTML este foarte concis. Creăm o listă și îi atribuim clasa breadcrumbs, astfel încât stilul să nu se răspândească în alte liste.

    • Acasă
    • Transferuri
    • Cutii de viteze
    • Unelte melcate

    Rețineți că aici nu există separatori, ele sunt afișate folosind proprietatea stil de conținut (exemplul 1).

    Exemplul 1: Prepararea pesmetului

    firimituri de pâine

    • Acasă
    • Transferuri
    • Cutii de viteze
    • Unelte melcate

    Pentru început, resetam toate marginile și indentările listei și aliniem elementele pe orizontală prin proprietatea de afișare cu o valoare inline-block . De asemenea, elimină markerii, astfel încât nu trebuie să o faceți intenționat. Pseudo-elementul ::before este necesar pentru a adăuga un separator între elemente și pentru a-i controla aspectul. Textul este adăugat la toate articolele, inclusiv la primul, de care bineînțeles nu avem nevoie. Prin urmare, îl eliminăm cu pseudo-clasa :first-child, care aplică stilul primului element

  • .

    Un număr mare de materiale, cum ar fi articolele de pe site, sunt adesea împărțite în pagini separate cu 10-15 articole pe pagină, ceea ce duce la o reducere a încărcării site-ului. Tranziția între paginile individuale se face prin numerotarea acestora, unde fiecare număr servește ca link către pagina corespunzătoare. Este posibil să afișați toate paginile, un anumit număr dintre ele sau numai link-uri către pagina următoare și anterioară. Ce opțiune să alegeți depinde de designul site-ului și de preferințele dvs. Una dintre metodele posibile de numerotare este prezentată în Fig. 2.

    Orez. 2. Paginare

    Pentru a face această numerotare, folosim din nou o listă simplă, acum cu clasa pager, fiecare articol din această listă va fi un link către pagină. Pentru a evidenția pagina curentă, să adăugăm clasa activă (exemplul 2).

    Exemplul 2: Paginare

    Paginare

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Linia dintre elemente se face prin proprietatea border-bottom de pe element