Crearea unui meniu simplu pentru site-ul de pe html și css

Deci, mergeți la primul pas al acestei lecții și mai întâi trebuie să conectați fișierul demo.css. care se află cu noi în tata CSS. Apoi conectăm fontul Open Sans. Băieți, vă spun totul despre demo, astfel încât să puteți face totul pe cont propriu.







Apoi, trebuie să creați o listă regulată cu bullet de ul li. și, de asemenea, setați prima ul pentru nav. astfel încât să putem lucra prin aceasta, referindu-se la stilurile css. Acest lucru este foarte simplu, nu știu ce pot fi descrise aici, așa că renunț la structură imediat, la fel ca în demo.

Mergând la stilurile CSS și primul lucru, trebuie să instalăm fontul care a fost prescris la începutul acestei lecții, și anume Open Sans. După ce fontul nostru este înregistrat cu succes, trecem deja în scheletul listei cu marcatori, pe care vom stabili anumite proprietăți, precum și poziționarea și poziționarea elementelor. Rețineți că creăm un meniu orizontal, așa că aplicăm proprietatea float left.

Acum, după ce meniul nostru este ascuns cu succes, trebuie să facem un meniu drop-down. Acest lucru este destul de ușor de implementat, trebuie să setați elementul de meniu cu identificatorul nav vizibil. Astfel obținem rezultatul meniului drop-down. Mai mult, prin standard, schimbăm meniul drop-down la discreția noastră, îi fixăm indenturile și culoarea. Nu uitați să specificați proprietatea stângă 0 pe Hover, deoarece fără ea tot meniul derulant va merge și, în consecință, nu va fi foarte frumos. (paragraful 1)







Din moment ce Eugene, a pregatit aspectul acestui meniu, apoi toate punctele legate de design-ul lui, am realizat cu voi in concordanta. Acum, trebuie să implementăm meniul de frontieră, deoarece are o anumită caracteristică funcțională. Să o luăm în considerare. În primul rând, trebuie să facem frontiera pe dreapta pentru meniul principal, apoi pentru ca marginea să nu fie pe stânga, trebuie să specificăm meniul principal pentru a seta proprietatea none.

Acum este momentul să mergeți la meniul drop-down, unde proprietățile funcționale vor părea mult mai complicate decât meniul principal, pentru că va trebui să setăm anumite proprietăți elementelor. Pentru a începe, să presupunem că este vorba de frontieră pentru cele două laturi ale meniului drop-down, și anume pentru partea dreaptă și spre stânga. În cele din urmă, va trebui să ascundem partea stângă și cea dreaptă a meniului cu ajutorul niciunuia dintre margini.

Verificăm totul pe site și vedem că totul funcționează bine, cu excepția unui singur detaliu, și anume meniul derulant atunci când se află pe cel de-al doilea link și alunecările ulterioare ușor spre dreapta. Pentru aceasta, pentru a rezolva această problemă, am setat elementul de meniu cu identificatorul nav în proprietatea din stânga și îi dăm un parametru minus doi ca parametru. (a se vedea paragraful 1)

Verificăm totul pe site și vedem că acum am făcut totul bine și putem termina această lecție.







Articole similare

Trimiteți-le prietenilor: