Crearea meniului este probabil unul dintre principalele puncte în dezvoltarea site-urilor și programelor. În plus, o bună elaborare și proiectare logică a unui astfel de meniu este fața unui site sau a oricărui program. De exemplu, să luăm Microsoft și sistemul de operare Windows 7. După lansarea Windows 7, Microsoft a auzit multe critici care nu erau măgulitoare pentru sine. Au fost multe critici, dar de cele mai multe ori poziționate în mod incomod elementele de meniu. Citiți cu atenție acest tutorial despre cum să creați un meniu vertical orizontal cu CSS și Expression Web. Stilurile de etichetă se vor modifica pentru a crea meniul
Instrucțiuni
Pasul 1
Accesați Gestionare stiluri, apoi faceți clic pe butonul Stil nou. Dați numele Selector ul li noului stil pe care tocmai l-ați creat. De asemenea, nu uitați să vă asigurați că noul stil trebuie definit în fișierul drop-down.css.
Pasul 2
Pentru a întinde un meniu orizontal, trebuie să spuneți elementelor de meniu că acesta va fi orizontal. Apoi, trebuie să determinați lățimea fiecărui element de meniu și să eliminați toate punctele inutile din fața tuturor elementelor de listă.
Pasul 3
Pentru alinierea orizontală, accesați Layout și setați atributul de afișare la linie. Setați atributul float la stânga. Faceți clic pe butonul Aplicare. Toate elementele listei trebuie să fie setate pe un singur rând. Pentru ca aceștia să nu se suprapună, trebuie să faceți următoarele: setați valoarea Poziție a atributului lățime la 150 px. Acum verificați-l. Toate elementele listei ar trebui să aibă aceeași dimensiune.
Pasul 4
Acum trebuie să încercăm să eliminăm punctele din fața articolelor din listă. Pentru aceasta, accesați List și setați atributul list-style –type la none.
Pasul 5
Faceți clic pe OK pentru a accepta toate modificările.
Pasul 6
Pentru a ajusta dimensiunea fontului pentru stilul ul li, trebuie să faceți următoarele. În Manage Styles, faceți clic dreapta pe stilul ul li trebuie să selectați Modify Style. Se va deschide caseta de dialog familiară pentru adăugarea sau modificarea atributelor. Mergeți la categoria Font și setați atributul font-family la Arial, Helvetica, sans-serif. Apoi, mergeți la atributul font-size și setați-l la 0.9em. După aceea, configurați atributul text-transform, setați valoarea acestuia cu majuscule.
Pasul 7
Înălțimea elementelor din meniul creat poate fi ajustată în categoria Poziție. Setați atributul înălțime la 30 px.
Pasul 8
Apoi, trebuie să salvați fișierul menu.html. Pentru a face acest lucru, Expression Web va deschide fereastra necesară Salvare fișiere încorporate pentru a salva fișierul. Salvați în fișierul drop-down.css. Faceți clic pe OK pentru a salva.
Pasul 9
Acum verificați rezultatul. Pentru fiabilitate, este mai bine să-l testați în diferite browsere. Pentru a verifica rezultatul obținut în browserul implicit, trebuie să apăsați tasta F12 de pe tastatură.
