Timp bun al zilei,% nume utilizator%. Astăzi vă voi arăta cum să creați un meniu orizontal pe baza meniului din acest forum. În prealabil, am pregătit totul în Photoshop, un fișier PSD poate fi descărcat de pe acest link. meniul în sine este ușor modificat și arată astfel:
După cum vedem, meniul este ușor mai deschis și în el a apărut o formă de căutare. Să ne imaginăm designul meniului nostru. Elementele rubricilor vor fi implementate sub formă de link-uri încheiate în elementele de pe listă
Salvați modificările și deschideți fișierul, trebuie să obțineți următoarele:
Va fi necesar să creați un gradient vertical de la culoarea # 92cb2f la culoarea # 57a20c.
Setați valorile fixe pentru lățimea și înălțimea blocului, precum și rotunjirea colțurilor de 5px. Apoi centralizați blocul. Asta sa întâmplat. Cel mai important, chiar la începutul fișierelor style.css, copiați resetați css. Aceste reguli "scot" toate stilurile, anulează indentarea etc.
Dacă te uiți la rezultat. veți vedea că gradientul este afișat și blocul este centrat în centrul paginii. Acum, să ajungem la lista și legăturile noastre. Să punem listele într-o linie orizontală, să alocăm liniuțe și să stilizăm legăturile:
Să ne uităm la rezultatul curent:
Arată bine. Rămâne să adăugați stiluri pentru formularul de căutare și să nu uitați de separator. Să începem cu separatorul. Deoarece trebuie fixat permanent într-un singur loc, vom recurge la o poziționare absolută. Pe scurt, poziționarea absolută permite poziționarea elementelor în raport cu marginile afișajului. Dar vom face un pic diferit.
Am decis ca delimitatorul cu trei puncte ar fi o imagine normala png, nu vom distorsiona cu CSS, pentru ca nu merita. Pe pagina HTML, imediat după eticheta de închidere
creați un element de tip span cu clasa .doturi:
Excelent. Acum să ajungem la designul său. Așa cum am spus mai sus, vom folosi poziția absolută pentru acest element. Dar acest lucru nu este complet corect, deoarece elementul părinte este fixat și când creșteți sau micșorați documentul în browser, separatorul va rula orizontal în mod arbitrar. Pentru a evita acest lucru, elementul parent .main-meniu trebuie să precizeze poziționarea relativă. Așadar vom realiza că elementul span va fi respins deja cu privire la elementul părinte. Prin urmare, adăugați această linie în fișierul CSS în clasa de meniu .main:
Răcoros, atunci ce ai nevoie. Să scriem stilurile pentru intervalul nostru:
Deci, am rezolvat-o. Acum trebuie să aveți grijă de formularul de căutare și butonul sub formă de lupă. Pentru aceasta, vom modifica putin fisierul HTML si imediat dupa delimitare vom schimba codul nostru la aceasta:
E mai bine. Am adăugat acum un buton și am împachetat totul separat
Acum să o salvăm împreună și să vedem rezultatul:
Totul sa dovedit așa cum am planificat. Cu excepția faptului că în Mozilla și Safari cu butoane de umplutură există mici probleme, cauza pe care le vom afla mai târziu și vom rezolva.
Articole similare
Trimiteți-le prietenilor: