Lista HTML orizontala sau un meniu orizontal folosind css
Salutări, dragi cititori webcodius blog-ul! Element obligatoriu de aproape orice site este meniul. Prin urmare, în cazul în care site-ul dvs. are mai mult de o pagină, probabil nu se poate face fără meniul de navigare. La urma urmei, fără meniul utilizatorului va fi dificil de a găsi paginile potrivite pentru el.
Deoarece orice meniu este o listă de link-uri care duc la pagini interne ale site-ului. folosesc de obicei liste cu marcatori pentru a crea meniuri. care sunt create folosind tag-uri html
- și
- . Dar, după cum știți elementele listei implicit sunt dispuse vertical unul deasupra celuilalt, și că, dacă aveți nevoie pentru a face un meniu orizontal. Utilizarea CSS nu este o mare problemă.
În primul rând, creați o listă cu marcatori regulat, care conține elemente din meniul nostru:
Pentru a identifica lista și cere pentru el stilurile css necesare, am adăugat la ea un atribut id cu un „meniu“ identificator.
În mod implicit, fără nici o reguli CSS, el va fi după cum urmează:
După cum puteți vedea o listă a elementelor aliniate vertical unul sub altul, iar dacă avem nevoie de un meniu vertical, dacă este necesar, trimiterile la stil (adauga culoare de fundal, borduri, margini, schimba fontul) poate fi o bara de navigare atractiv.
Dacă doriți să obțineți un meniu orizontal, trebuie doar pentru a aranja elementele din lista orizontală. În acest scop, selectorul de LI ar trebui să adauge valoare stilistică de proprietate de afișare cu inline sau inline-bloc. Voi folosi un ecran regula: inline-bloc. Deci, pentru a enumera elemente aliniate orizontal pur și simplu adăugați codul CSS:
Acum, lista de elemente sunt orizontale:
După cum puteți vedea elementele de meniu sunt aliniate într-un rând orizontal. Dar, în timp ce pe meniu nu pare foarte mult. Acum, pentru a obține un bar cu drepturi depline de navigare, aranja meniuri folosind stiluri css. Pentru a începe, adăugați un fundal pentru link-urile de pe panoul pentru a întinde întregul punct
Li, elimina reliefarea de link-uri, înființat marjele, etc.:Acest lucru va avea un astfel de meniu atractiv:
Aspectul general al meniului de mai jos depinde doar de imaginația și cunoașterea css proprietățile. Mai mult, de exemplu, aici sunt câteva opțiuni pentru meniu.
meniu orizontal centrat
Aflați cum să creați motoare profesionale în PHP si MySQL
Aliniați centrul meniului, puteți:
meniu orizontal cu elemente de aceeași lățime
Aflați cum să creați motoare profesionale în PHP si MySQL
Pentru a face toate elementele din același meniu dimensiune, specificați dimensiunea dorită pentru ei. Numai că principalul lucru în sumă de elemente nu depășesc dimensiunea întregului panou. Puteți face acest lucru:
Dacă adăugați un pic de transformare:
meniul va primi cu colțuri teșite: