Asigurați-un meniu orizontal pentru dvs. site-ul

meniu orizontal au aproape orice site - este o parte importanta, deoarece poate cu aspectul și posibilitățile de utilizare pentru a atrage sau, dimpotrivă, sperie vizitatorii. Să învețe cum să creeze un meniu orizontal elementar: face „scheletul“ HTML, să stăpânească abilitățile de bază de a crea. Puteți găsi cu siguranță un meniu gata, dar mult mai plăcut pentru a învăța cum să-l dezvolte tine. Este destul de distractiv.

Aflați pentru a face meniul

Noi încercăm să nu se abată de la semantica, care aderă la cele mai importante figuri ale aspectului. În primul rând trebuie să facă un „schelet“ pentru meniurile noastre la HTML, învață abilități de bază pentru a face propriile lor meniuri orizontale. Și atunci se va decora, folosind foi de stil. Lăsați meniul nostru orizontal conține 5 elemente. Primul element va fi redirecționat către pagina de pornire. Al doilea punct - „Despre noi“. Al treilea - „Premiile noastre“. În al patrulea rând - „E distractiv.“ În al cincilea rând - „Contactați-ne“.

HTML-cod arată astfel:

Cine nu știe: tag - ul este folosit pentru glonțul, elementele sale încep cu li. Tag-uri Li moștenesc stilurile care sunt aplicate UL.

Ul - element de bloc al listei, acesta va fi întinsă la lățimea. Li este, de asemenea, un bloc.

Deci, a crea un index.html. Colectăm codul nostru. În acest moment, browser-ul afișează o verticală, mai degrabă decât un meniu orizontal. Dar noi cu tine gol - pentru a face un meniu orizontal pentru site-ul. Pentru aceasta avem nevoie de CSS.

Ce este CSS?

Dacă aveți încă să stăpânească dezvoltarea de site-uri, este necesar să se familiarizeze cu conceptul de Cascading Style Sheets. De fapt, acestea sunt regulile de formatare, procesare, care sunt aplicate diferitelor elemente de pe paginile unui site. Dacă vom descrie proprietățile elementelor din standardul HTML, va trebui să repetați de mai multe ori, veți obține o dublare a acelorași piese de cod. pagina pentru timpul de încărcare de pe computerul utilizatorului va crește. Pentru a evita acest lucru, există un CSS. Este suficient pentru a descrie o singură dată un anumit element, și apoi pur și simplu, să indice în cazul în care să utilizeze proprietățile unui anumit stil. Este posibil să se facă descrierea nu numai textul paginii în sine, ci și în alt fișier. Acest lucru va permite să aplice descrierea diferitelor stiluri pe toate paginile site-ului. De asemenea, este convenabil să se modifice unele pagini, modificarea CSS-fișier. foi de stil vă permite să lucrați cu fonturi la un nivel mai bun decât HTML, contribuind la evitarea înrăutățirii paginile grafice ale site-ului.

Utilizarea Style Sheets pentru dezvoltarea de meniu

CSS-cod pentru meniul:

1. # My_1menu {list-style: none; padding: 6; lățime: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu un {color: # 756; display: block; înălțime: 55px; line-height: 55px; padding: 0px 15px 15px 0px; fundal: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; fundal: # 788;}

Acum, să ne uităm la meniul CSS orizontal rezultat.

# My_1menu - astfel încât nu există atribuire stil pentru elementul ul- cu id = my_1menu, list-style: none - această comandă pentru a elimina semnele lăsate de elementele programate.

lățime: 800px - lățimea meniului nostru este de 800 pixeli.

padding: 0 - aceasta elimină padding interior.

margin: auto - vyravnivnie meniu orizontal în centrul paginii noastre.

# My_1menu li - atribuirea de stiluri li-elemente.

înălțime: 55px - înălțimea de meniu.

# My_1menu a: hover - atribuirea de stiluri pentru elementul șoarecele și atunci când este indusă.

Nu vom descrie în detaliu fiecare linie, ca fiecare dezvoltator poate specifica parametrii aici. Această bază pentru utilizarea stilurilor din meniul de pe site-ul web. Puteți da un aspect mai finisat si frumos, folosind imagini. Element Asociați dar, de exemplu, fundal: url (img1.png) repeat-x. Să fie de fundal: url (img2.png) repeat-x pentru: Hover.

Folosește-ți imaginația, preferințele creative. Apoi, pe baza cunoștințelor cu privire la modul de a crea un meniu simplu pe site-ul, vă puteți dezvolta o pagină cu propriul design unic.