Acasă › Ipotecare › Cum se va relaxa. De ce aveți nevoie pentru a vă dezvolta afacerea de la zero. Automatizarea promovării pe rețelele sociale

Cum se va relaxa. De ce aveți nevoie pentru a vă dezvolta afacerea de la zero. Automatizarea promovării pe rețelele sociale

Navigarea este prezentă pe orice site bun, chiar dacă este unul de o pagină. În funcție de situație, linkurile de navigare pot duce la diverse secțiuni ale site-ului sau pot trimite către un marcaj (ancoră) aflat pe pagina curentă. Redactare competenta navigarea în care utilizatorul nu se încurcă necesită anumite cunoștințe și experiență. Proiectarea barei de navigare trebuie, de asemenea, făcută cu înțelepciune, iar în acest tutorial vă vom arăta cum să creați un meniu de navigare ușor de utilizat.

Crearea navigației

Ce este navigația? Aceasta este o colecție de link-uri, adesea ordonate și grupate după semnificație. Un meniu de navigare este adesea creat folosind o etichetă de listă HTML

conține un singur link . În HTML5, a fost introdusă o etichetă separată pentru navigare
, unde puteți plasa pur și simplu etichete de link. Odată ce ați creat cadrul HTML, puteți trece la stilarea acestuia cu CSS, unde puteți defini modul în care meniul dvs. va fi vertical, orizontal, drop-down etc.

Să presupunem că avem o navigare simplă cu cinci link-uri, create în HTML pe baza unei liste cu marcatori:
- Acasă
- Despre
- Galerie
- Ştiri
- Contacte
Inițial, fără stiluri, navigarea noastră arată ca o listă obișnuită:

Pentru a face acest element mai asemănător cu o bară de navigare, trebuie să faceți câțiva pași necesari. În primul rând, marcatorii nu sunt necesari lângă elementele de meniu și, în al doilea rând, marja standard și valorile de umplutură stabilite de browser pentru listă pot interfera, așa că le resetăm la zero. Rezultatul este următorul:
Meniu (tip listă-stil: niciunul; margine: 0; umplutură: 0; )

În esență, fișierul de resetare a stilului efectuează acțiuni identice în legătură cu liste Reset.css, prin urmare, dacă îl utilizați pe site-ul dvs., atunci codul de mai sus nu trebuie să fie scris.

După resetarea stilurilor standard de listă, puteți trece direct la crearea stilurilor pentru navigare. Vă vom arăta cum să faceți panouri verticale și orizontale.

Meniu vertical

Crearea unei bare de navigare verticală este considerată mai ușoară decât crearea unui meniu orizontal. În principal pentru că nu este nevoie să setați legăturile să fie orizontale. Aceasta este pur și simplu o listă verticală de pagini de pe un site. Totuși, unele stiluri importante vor trebui aplicate.

Blocați linkurile
În primul rând, trebuie să faci toate etichetele elemente de bloc:
Meniul a (afișare: bloc; )
Există mai multe motive pentru aceasta:

Lățimea meniului

Următorul lucru pe care trebuie să-l facem este să setăm lățimea meniului. Dacă nu ați predefinit lățimea barei de navigare și nu se află într-un container care o delimitează, atunci meniul se va întinde pe toată lățimea ferestrei (ca în exemplul nostru de mai sus) - pentru că așa este un element de bloc se comportă implicit. Puteți seta lățimea necesară pentru elementul .menu, de exemplu:
Meniu (lățime: 300px; )
În schimb, puteți seta lățimea articolelor
sau pentru link-uri - vizual efectul poate fi același, dar rețineți că în acest caz lățimea elementului .menu va rămâne în continuare 100%.

Separarea articolelor

Pentru a separa vizual elementele de meniu, puteți da fiecăruia dintre ele un chenar inferior sau superior. În funcție de cea pe care o folosiți, veți avea un chenar lipsă în partea de sus sau de jos a meniului. Acest lucru poate fi rezolvat prin adăugarea unui alt chenar la blocul .menu în sine:
Meniu a ( chenar-sus: 1px albastru continu; ) .meniu ( chenar-jos: 1px albastru continu; )
Înălțimea punctului și alinierea verticală

În prezent, linkurile meniului par prea scăzute și prea apropiate. Dacă textul fiecărui link nu ocupă mai mult de o linie, atunci puteți crește înălțimea acestora și puteți păstra textul centrat vertical folosind proprietățile înălțime și înălțime linie:
Meniul a (înălțime: 30px; înălțime linie: 30px; ) GIF
După cum puteți vedea în animație, proprietatea înălțime afectează înălțimea legăturii, iar distanța dintre linii și înălțimea linie modifică înălțimea liniei de text în sine. Asigurați-vă că setați aceleași valori pentru aceste două proprietăți dacă doriți ca textul linkului să fie centrat vertical.

Meniu orizontal

Sarcina principală atunci când se creează navigarea orizontală este aranjarea elementelor de meniu pe un rând. Acest lucru se poate face în mai multe moduri.

Metoda unu

Prima opțiune este să setați proprietatea de afișare a elementelor din listă cu valoarea inline sau inline-block:
Meniu (afisare: inline; )
În același timp, etichete interior
nu poate fi blocat, altfel articolele nu se vor mai alinia orizontal și vor reveni în poziție verticală. Linkurile pot fi, de asemenea, setate la inline sau inline-block . Selectați-l pe acesta din urmă dacă intenționați să indentați linkurile în viitor.

După aceasta, puteți începe să creați linkuri. De exemplu, puteți face acest stil:
Meniul a ( text-decor: niciunul; font-family: sans-serif; culoare: #5757a0; display: inline-block; umplutură: 10px 20px; fundal-culoare: lavandă; chenar-bottom: 5px solid #5757a0; )
Am adăugat o culoare de fundal și un chenar de jos pentru fiecare link și am mărit dimensiunea acestuia folosind umplutură. Observați că există mici decalaje între elementele de meniu, deși nu le-am adăugat prin stiluri. Acestea apar deoarece browserul interpretează caracterul de întoarcere a carului între etichetele de închidere și de deschidere în acest fel.
. Aceste lacune pot fi eliminate prin scrierea codului HTML al listei pe o singură linie:
- Acasă
- Despre
- Galerie
Cu toate acestea, acest lucru este incomod, deoarece aceste modificări vor trebui făcute manual HTML, iar codul va fi greu de citit. Prin urmare, puteți încerca să scăpați de goluri folosind valoare negativă margine-dreapta:
Meniu li ( margine-dreapta: -5px; )
Acest cod nu elimină golurile, ci le acoperă prin deplasarea elementelor cu cinci pixeli la stânga. Această metodă nu se poate spune că este foarte de încredere, deoarece dimensiunea decalajului poate varia în funcție de alte stiluri.

Dacă spațiile dintre puncte nu sunt planificate în designul dvs., este mai bine să utilizați a doua metodă de aliniere orizontală a elementelor.

Metoda a doua

Poate ați ghicit deja că a doua opțiune pentru crearea unui meniu orizontal este utilizarea proprietății float. Pentru a face acest lucru, adăugați un stil pentru etichete
:
Meniu li (float: stânga; )
După cum puteți vedea, nu mai există decalaje între puncte. Toate celelalte stiluri funcționează ca înainte. Dar dacă adăugați un alt element HTML după navigare (să spunem
), atunci va fi afectat de împachetare și va fi aliniat cu elementele de meniu. Puteți anula această acțiune adăugând proprietatea clear: left la antet. Dar atunci când dezvoltați un site cu o mulțime de pagini diferite, poate deveni dificil să urmăriți dacă ați uitat să specificați această proprietate oriunde. Este mult mai ușor să anulați împachetarea pe partea de navigare. Această intrare vă va ajuta în acest sens:
Meniu ( overflow: ascuns; )
Acest lucru va ajuta, de asemenea, la readucerea părintelui elementelor plutitoare la înălțimea lor normală. Am vorbit deja despre această problemă în lecțiile anterioare, dar apoi am rezolvat-o printr-un hack special folosind pseudo-elementul:after . Exemplul de mai sus este o altă modalitate de a rezolva problema cu înălțimea lipsă a containerului.
Nota: dacă setați un fundal pentru un element .menu, atunci nu îl veți vedea până când nu aplicați overflow: ascuns acestuia. Logic, pentru că cum poți vedea fundalul unui element a cărui înălțime este zero?

În lecția următoare vom vorbi mai detaliat despre capacitățile selectoarelor de atribute, cu care puteți seta

În munca sa, el a dedicat mult timp dezvoltării diverse tipuri navigare pentru site-uri, atât folosind, cât și folosind pur style 3, fără imagini suplimentare și javascript. Am decis să pun împreună toate dezvoltările pe această temă și să le postez ca un fel de colecție de lecții despre crearea navigației. Recenzia prezintă diferite tipuri, în stil și funcționalitate, multi-nivel cu submeniuri derulante, în stilul popular „acordeon”, vertical și orizontal cu efecte dinamice, simplu și complex ca structură.
Pe baza acestor lecții, pe baza exemplelor date, experimentând și folosind puțină imaginație, poți face cu ușurință site-ul tău să iasă în evidență din mulțime, spectaculos și memorabil.
✓ Făcând clic pe titlu, veți fi dus direct la o pagină cu o descriere detaliată a întregului proces, iar făcând clic pe imagine, veți merge la o pagină cu un exemplu despre cum funcționează meniul pe care l-ați ales ツ
1.
Acest meniu uimitor a fost creat folosind stiluri și caracteristici CSS3 pure, fără fișiere imagine suplimentare sau javascript. Cu browserele moderne care acceptă noile standarde CSS3, a devenit posibilă utilizarea tuturor proprietăților magice ale magiei CSS3 în designul site-urilor web. Punând în practică această tehnică de creare a meniului, puteți obține rezultate uimitoare.
2.
În acest tutorial, veți învăța cum să utilizați stilurile și noile proprietăți CSS3, fără a utiliza javascript sau imagini, puteți crea un meniu grozav, funcțional și rapid în stil acordeon.
3.
Un tutorial detaliat despre crearea unui meniu frumos în stil acordeon folosind CSS și jQuery. Meniul a fost testat și funcționează excelent în toate browserele moderne. Utilizarea funcției de gradient liniar css3 în design face acest meniu mai expresiv și mai dinamic.
4.
Lecția prezintă întregul proces de creare a unui meniu vertical interesant pentru un site web, construit în întregime pe utilizarea CSS și a unui fișier imagine mic, pe care îl puteți edita cu ușurință pentru a se potrivi nevoilor dvs., dacă doriți.
5.
Ca o continuare a lecției anterioare, a adăugat descriere detaliată opțiunea de a crea un meniu vertical cu sub-articole imbricate
6.
O lecție mică, dar în același timp detaliată despre crearea unui cod de înaltă calitate, cu o cantitate mică de cod HTML, CSS și JavaScript, cu o interfață frumoasă, un bloc de navigare în stilul „Accordion”.
7.
O altă soluție interesantă în ceea ce privește crearea unui meniu de navigare pe mai multe niveluri folosind jQuery. Compatibilitatea între browsere a produsului final, animația JQuery și gradientul CSS3 fac blocul de navigare și mai atractiv.
8.
Îmi place soluția de a avea meniurile să se comporte ca niște drop-down-uri. Meșterii folosesc adesea JavaScript pentru a obține acest efect, dar acest tutorial arată cum să obții ceea ce vrei folosind doar stiluri și funcții CSS pure.
9.
În acest tutorial, veți învăța cum să creați un meniu frumos cu sub-articole derulante. Ceea ce atrage atenția este soluția non-standard de afișare a submeniului, nu ca de obicei, chiar sub elementele meniului principal, dar elementele submeniului sunt aliniate la stânga, cu afișaj direct sub bara de navigare.
10.
Traducere și versiune adaptată a lecției despre crearea unui meniu frumos, orizontal în stilul „Lava-Lamp” Există multe versiuni de meniuri realizate în acest stil pe Internet, pe baza cunoștințelor acumulate din lecție, pe care le puteți crea liber. ceva al tău.
Asta e tot deocamdată. Această colecție prezintă doar o mică parte din ceea ce se poate face în ceea ce privește crearea de meniuri de navigare frumoase și individuale și, cel mai important, funcționale pentru proiectele dvs. Sper că cineva va găsi o opțiune potrivită pentru ei înșiși și o va folosi în munca sa de îmbunătățire a site-ului. Dacă cuiva i-a plăcut articolul, comentează, distribuie prietenilor prin Twitter, Google+ și alte rețele sociale. servicii sau puteți doar să marcați articolul

Meniu orizontal este o listă de secțiuni de site, deci este mai logic să o marchezi în interiorul elementului