Motivul pentru care nu le înregistrăm ca liste este că nu vrem să vedem un marcator înainte de fiecare legătură din meniu. În articolul precedent, am vorbit despre unele metode de aspect al paginii utilizând CSS. Într-una din aceste tehnici, am învățat cum să afișăm liste într-un rând, nu pe verticală.
În acest articol, vă voi arăta cum să îmblânziți aceste liste greoaie și stângace folosind CSS. Este suficient ca ei să se poticnească în mod stramt prin paginile dvs. web. E timpul să le spui cum să se comporte.
Pregătirea arenei
Ca subiect de formare am ales liste simple neordonate. Toate regulile CSS menționate aici pot fi aplicate listelor numerotate cu același rezultat. În toate exemplele (cu excepția cazurilor specificate) se utilizează următoarea listă:
Fiecare listă este pur și simplu plasată într-un element separat
Fără reguli de stil suplimentare, lista din DIV-e de bază va arăta astfel:
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
poziționare
În exemplul următor, proprietățile stânga margine și stânga pentru elementul UL sunt setate la 0:
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Rețineți că marcatorii se află în afara limitei DIV. Dacă recipientul nu era un DIV, dar
document, marcatorii ar fi în afara ferestrei browserului, adică ar fi dispărut din ochi. Dacă doriți ca marcatorii să se afle în limitele DIV, de-a lungul marginii sale stânga, atribuiți proprietății din stânga-padding sau proprietății margini stângi la 1em.- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Să presupunem că ai nevoie de o listă cu marcaje speciale. Cum ai mai făcut-o înainte? A fost creată o masă, într-o coloană a fost plasată o imagine GIF a marker-ului și o mutat în celulă în sus și în dreapta. În cealaltă coloană, textul a fost plasat, care ar fi trebuit să fie în elementele
Regula de stil arată astfel:
Și browserul va afișa lista astfel:
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Pentru acele browsere care nu acceptă ieșirea desenului, adăugați următoarea linie la reguli:
Imaginile pe care le-ați selectat ca marcator pot "creea" din listă. Pentru a evita acest lucru, plasați imaginea în interiorul blocului
Toate cele trei declarații pot fi combinate într-o singură regulă scurtă:
Lista de rezultate va arăta astfel:
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Se întâmplă să aveți o listă, dar nu aveți nevoie de markeri sau doriți să utilizați un alt simbol ca marcator. Din nou, CSS se grăbește să vă ajute. Adăugați stilul listei de reguli: nici unul; și să facă elementele
Fie proprietatea este lăsată de padding. fie proprietatea marginii stânga ar trebui să fie setată la 0, iar cealaltă proprietate ar trebui să fie 1em. Prin schimbarea acestei proprietăți, puteți ajusta mărimea indentului de la marcator la acceptabil. O valoare negativă în proprietatea text-liniuță face ca prima linie a fiecărui element din listă să se deplaseze spre stânga, iar "restul" pe restul textului.
Următoarea listă va fi normală, de exemplu, doar un simbol HML standard va fi folosit ca marker, de exemplu. " care corespunde marcajului tipografic de închidere: ".
- »Punctul 1
- »Punctul 2
- »Punctul 3
- »Punctul 4
- "Punctul 5 va face acest punct un pic mai lung, astfel încât să meargă la linia următoare
Trebuie remarcat faptul că Netscape6 / 7 / Mozilla (și alți derivați de ventuză browsere) și Opera capabile să genereze element de conținut folosind pseudo: inainte de CSS2 standardul. Noi folosim acest lucru pentru a genera automat simbolul „sau un alt caracter ca un marker. Astfel, nu va trebui să-l introduceți manual în fiecare element LI. Dacă utilizați Opera sau cu familia de browsere, Gecko, următoarele CSS va crea aceeași listă care și cea anterioară, dar nu trebuie să adăugați nimic în lista însăși.
Proprietății conținutului i se poate atribui un șir de text, o adresă URL sau altceva, inclusiv caractere speciale. Dacă alegeți simbolul de tip, trebuie să scrieți codul hexazecimal al caracterului din proprietate. Marcajul de cotație tipografic corect este codul \ 00BB (celălalt caracter \ 0020 este un spațiu, adăugat din motive estetice). Rezultatul final este prezentat mai jos (consultați browserul Opera sau Mozilla / Netscape):
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Construim o listă la rând
Cine a spus că listele ar trebui să meargă pe verticală și să fie formate pe stânga de markeri? De exemplu, aveți nevoie de o listă numerotată de referințe, dar vizual pe care doriți să lista de pe pagina arăta ca o bară de navigare verticală. Sau, să zicem, doriți ca linkurile să fie plasate orizontal de-a lungul marginii superioare a paginii.
Aceasta se aplică nu numai la lista de referințe. Este posibil să trebuiască să listați de mai multe ori într-un paragraf (de exemplu, o listă de cărți). Structurally - această listă, dar înainte de a fi dacă ați făcut-o, această listă vă va sparge paragraful. CSS vine din nou la salvare!
Deoarece această listă nu va apărea pe pagină ca ceva separat, nu o voi pune în baza DIV, ca în listele anterioare. De data aceasta marcajul va arăta astfel: paragraf, listă, următorul paragraf.
Am auzit deja strigătele: "Doodle, am crezut că ne-ai învăța cum să introducem liste într-un paragraf, nu între două paragrafe."
Și pentru asta răspund: "Ei bine, da, aveți dreptate." Din păcate, (X) HTML nu vă permite să puneți liste în interiorul unui paragraf, dar cu stiluri puteți face acest lucru ".
Mai întâi, iată regulile de stil:
Toate codurile sunt plasate în
Rezultatul arată astfel (lista este evidențiată în albastru):
Un pic de text înainte de a apărea lista. Poate contextul este ceva despre un soț care a primit un apel de la soția sa pentru a lua câteva lucruri pe drumul spre casă de la serviciu. Nu contează cu adevărat, pentru scopurile noastre avem nevoie doar de un text anterior înaintea listei:
- Punctul 1,
- Poz. 2,
- Punctul 3,
- Punctul 4,
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie.
Și apoi există textul care urmează lista din paragraf. Una sau două propoziții sunt suficiente pentru exemplu.
Ca și în exemplul de mai sus cu un marker, putem genera automat virgule și perioade folosind CSS. Dacă vizitatorii dvs. folosesc numai browserele Opera și Gecko, nu aveți de ce să vă faceți griji. Regulile de stil vor arăta astfel:
Aici folosim pseudo-elementul: după adăugarea unei virgule la sfârșitul fiecărui element de listă și setăm punctul folosind clasa de clasă "last". Rezultatul va fi acest lucru (rețineți, funcționează numai în Opera sau Mozilla / Netscape):
Un pic de text înainte de a apărea lista. Poate contextul este ceva despre un soț care a primit un apel de la soția sa pentru a lua câteva lucruri pe drumul spre casă de la serviciu. Nu contează cu adevărat, pentru scopurile noastre avem nevoie doar de un text anterior înaintea listei:
- Punctul 1
- Punctul 2
- Punctul 3
- Punctul 4
- Punctul 5 va face acest articol un pic mai lung, astfel încât să meargă la următoarea linie
Și apoi există textul care urmează lista din paragraf. Una sau două propoziții sunt suficiente pentru exemplu.
Așa cum am spus chiar la începutul meniului de linkuri pe care îl vedem pe fiecare site, ar trebui să fie proiectate ca liste, care sunt în esență și sunt. Deoarece nu vrem să vedem această listă în modul în care browserul o afișează în mod implicit, vom folosi CSS pentru a face modificări cosmetice. Știm deja că listele pot fi afișate în mod orizontal (într-o singură linie) și nu numai pe verticală (așa cum sunt afișate în mod implicit). Cu ajutorul stilurilor, marcajele pot fi eliminate și o gamă largă de posibilități apare în mâinile dvs., cum se separă vizual un articol din listă de celălalt.
Iată câteva exemple de liste orizontale plasate în aceeași bază DIV cu următoarele reguli.
Cele două exemple de mai jos utilizează același UL numai fără textul lung din ultimul paragraf. A fost adăugată o clasă suplimentară care vă permite să lucrați separat cu unul din LI-urile din listă.
Simbolul | Este adesea folosit pentru a indica diferitele opțiuni. Este normal să le folosiți în meniu. Simulăm acest simbol cu ajutorul granițelor LI.
Am adăugat o clasă de clasă = "prima" la primul LI, astfel încât să nu aibă o margine inutilă pe partea stângă.
Regulile pot fi modificate pentru a da o listă de marcaje:
În acest exemplu, am adăugat clasa de clasă = "aici" la unul din LI, astfel încât marginea inferioară a acestui element de listă are o culoare care se potrivește cu fundalul. Astfel, în meniu vom indica poziția actuală a utilizatorului pe site.
Notă: această tehnică a fost propusă de Randal Rust, iar apoi a fost îmbunătățită de abonații listei de discuții css-discuss
Link-uri-lanț
Un alt tip de link-uri care sunt de obicei situate orizontal pe o pagină web sunt link-urile de pescuit cunoscute tuturor. Aceste linkuri arată în mod clar unde se află în ierarhia site-ului dvs. - tot drumul de la pagina principală la secțiunea sau pagina curentă. Dacă doriți să creați corect codul paginii dvs., acest tip de linkuri ar trebui să fie proiectat ca o serie de liste imbricate, deoarece fiecare secțiune face parte din secțiunea anterioară:
- acasă
- amp "Produse
- amp "Computere
- amp "Software
- amp "Computere
- amp "Produse
rezultatul este:
Aplicând următoarele reguli:
primim acest lucru:
Din nou, simbolul "" (sau orice alt simbol adecvat) poate fi generat automat folosind: înainte de pseudo-element în combinație cu clasa de clasă "prima". astfel încât primul punct LI să nu aibă acest simbol.
Lumea realităților
Să analizăm regulile foii de stil și să explicăm de ce aveți nevoie de fiecare dintre ele.
În cele din urmă, am ajuns la legături. În designul original, erau 10 pixeli fiecare pe partea stângă și pe dreapta. Aceste frontiere și-au schimbat culoarea împreună cu fundalul în timp ce plasa mouse-ul. Acest comportament este destul de ușor de obținut folosind pseudo-clasa: hover. astfel încât efectul modificării culorilor de fundal și de fundal este aplicat elementelor .
Aici am folosit un truc: pentru ca comportamentul linkurilor să se extindă la întregul bloc (lățime și înălțime), le-am atribuit display: block; rule. Acest lucru a funcționat în toate browserele, cu excepția IE pentru Windows. Dacă specificați în mod explicit o lățime de 100%, IE pentru Windows va înțelege totul. Dar, în același timp, aveți probleme în browserele IE5 pentru Mac și Netscape / Mozilla. Așa că am înșelat: utilizând selectorul pentru copii ">", am setat lățimea la "auto". Deoarece browserul IE pentru Windows nu înțelege selectorii de copii, acesta ignoră această regulă. IE5 pentru Mac, Opera și Netscape / Mozilla înțeleg această regulă și toată lumea a fost fericită.
Regula pentru pseudo-clasa: hover modifică fundalul și culoarea frontierelor atunci când plasați mouse-ul peste link.
Vârful aisbergului
Mark Newhouse (Mark Newhouse) conduce blogul gnuhaus.com. lucrează în noao.edu. și scrie articole pentru realworldstyle.com.
Trimiteți-le prietenilor: