de Codesmith

Cum să construiți cu ușurință bara de navigare Mashable cu HTML și CSS

Cum sa construiti cu usurinta bara de navigare Mashable cu
pixabay

Când vizitați wecodejs.com, s-ar putea să vă gândiți: „Omule, ce bară de navigare. Ce mare, frumoasă bară de navigare. Învinge. ”

Și apoi te duci la editorul de cod și nu poți obține blob-ul de elemente HTML să semene cu acea mare și frumoasă bară de navigare.

Scrierea CSS este ca și cum ai obține un canal radicular, crezi. Heck, la fel de bine ar putea fi magie.

Ei bine, nu este magie. Puteți stiliza cu ușurință o „bară de navigație” sau orice altă componentă web. Tot ce trebuie să faceți este să schimbați modul în care vedeți CSS.

Element, ce ești?

Primul lucru pe care trebuie să-l ieșim din cale este noțiunea că tot ceea ce face CSS este să îngăduie lucrurile. Este o modalitate greșită de a aborda un proiect CSS, deoarece vă distrage atenția de la ce se folosește cu adevărat CSS. La un nivel foarte de bază, folosim CSS pentru a organiza elemente pe o pagină web.

Acum ce este un element? Acesta este modul în care Wikipedia definește un element HTML:

Un Element HTML este o componentă individuală a unui HTML document sau pagină web, după ce acesta a fost analizat în Modelul de obiect document.

Da. Asta nu ne ajută cu adevărat. Definiția W3schools este mai simplă, care este: „Toate elementele HTML pot fi considerate ca niște casete”.

Asta e uimitor! Nu, serios, acest lucru nu poate fi suficient de stresat. Este foarte ușor să treci pur și simplu peste această afirmație atunci când îți treci prin CSS. Dacă putem conceptualiza că fiecare element HTML pe care îl creăm este o casetă nouă, putem înțelege mai bine rolul CSS în aranjarea acelor casete.

Dintr-o dată, „modelul cutiei” are sens. Sunt sigur că l-ai mai văzut.

Cum sa construiti cu usurinta bara de navigare Mashable cu
w3schools

Proprietățile de umplere, margine și margine contribuie la formarea cutiilor noastre. Folosim căptușeala pentru a crea imaginea vizuală a cutiei, o margine pentru a îngrădui perimetrul acesteia și o margine pentru a o deosebi de orice altă cutie.

Acum, cum se aplică acest lucru pentru enigma noastră de bare navale? Să începem codarea pentru a afla. Vom recrea bara de navă a lui Mashable minus pictogramele derulante și sociale (asta este pentru un alt tutorial). Asigurați-vă că codificați, deoarece acesta este cel mai bun mod de a învăța.

1611975127 440 Cum sa construiti cu usurinta bara de navigare Mashable cu
Uită-te la toate acele patrulatere! Comentează sub numărul de casete de pe această pagină

Planifică, planifică, planifică

Începerea unui proiect cu o listă de verificare ne ajută să scriem un cod organizat. În mod normal, am fi creat un wireframe, dar avem deja un model pe care să-l lucrăm.

HTML:

  1. Creați un element de navigație care conține toate elementele filelor
  2. Creați elemente de filă
  3. Identificați fila de sus ca logo

CSS:

  1. Setați culoarea barei de navigație la o nuanță de albastru
  2. Setați culoarea casetei de filă pe o nuanță mai deschisă de albastru
  3. Setați fonturile din casetele de filă la sans-serif și colorați-le în alb
  4. Setați proprietățile fontului și casetei logo-ului.

O poveste de două bare de navigare

Se pare că suntem gata să codăm, dar țineți-vă! Vă amintiți când am menționat mai devreme „blob of HTML”? Ei bine, vrei să te gândești la elementele pe care vrei să le folosești pentru a-ți crea bara de navigare. Un mod de a-l scrie în HTML este crearea unei liste neordonate:

1611975127 677 Cum sa construiti cu usurinta bara de navigare Mashable cu

ieșire:

1611975127 537 Cum sa construiti cu usurinta bara de navigare Mashable cu

Dacă tocmai începeți cu CSS, acest lucru ar putea arăta ca un blob imuabil. Nici nu am adăugat linkuri, ceea ce înseamnă că trebuie să cuibărim elemente.

Iată o abordare mai simplă a creării unei bare de navă, păstrând în același timp semantica noastră de markup:

1611975127 506 Cum sa construiti cu usurinta bara de navigare Mashable cu
1611975128 708 Cum sa construiti cu usurinta bara de navigare Mashable cu
Totul este aranjat frumos pentru noi datorită ancorelor!

După cum puteți vedea, am spart o bară de navigație doar folosind HTML. Acum tot ce trebuie să facem este să implementăm modelul cutiei pentru a le spaționa. Să folosim cea de-a doua boilerplate HTML pentru a crea bara de navă a lui Mashable și apoi vă vom oferi o prezentare generală a modului în care să o coafați corect.

1611975128 916 Cum sa construiti cu usurinta bara de navigare Mashable cu
Observați cum folosim un id pentru a diferenția sigla.

CSS la salvare

Acum să organizăm aceste cutii cu niște CSS. Vom enumera toți selectorii de care vom avea nevoie pentru această sarcină.

/* we'll target the entire nav */nav {}
/*we'll target a specific tab*/  nav a { }
/*we're going to use a css pseudo-class to change the background color when we hover over a tab */  nav a:hover {  }/*we're going to target the logo for some specific styles 'cause the logo is super special*/  #logo {  }

Primul lucru cu care ar trebui să începem este setarea lățimii și înălțimii navului nostru și adăugarea unui pic de culoare. O resursă excelentă pentru o roată de culoare este corectă Aici.

nav {  width: 100%; //width should be a percentage for responsiveness  height: 38px; //height should be px. Adjust to your liking  background-color: #0b98de;//hex color code should be used
}  nav a { }  nav a:hover {  }  #logo {  }
1611975128 610 Cum sa construiti cu usurinta bara de navigare Mashable cu

Avem barul nostru nav! Apoi, să începem să creăm câteva casete pe care să le putem deplasa. Putem face acest lucru afișând elementele ca blocuri.

nav {  width: 100%;  background-color: #0b98de;
}  nav a {    display: block;     
 }  nav a:hover {  }  #logo {  }
1611975128 272 Cum sa construiti cu usurinta bara de navigare Mashable cu

Se pare că ne-am rupt drumul frumos. Nu a trebuit neapărat să facem acest lucru, dar alinierea elementelor noastre este mult mai ușoară atunci când putem trata fiecare element ca un bloc. Pentru a remedia acest lucru, scriem pur și simplu, float: left;. Acest lucru ne va readuce la primul loc.

Notă: acest pas poate fi omis, dar dacă utilizați o listă neordonată, atunci aceasta trebuie implementată.

Acum să creăm casetele. Dacă vă uitați înapoi la modelul cutiei, veți observa că umplerea este cea care creează aceste cutii. Dacă doriți să vedeți cum funcționează acest lucru și să testați dimensiunea cutiilor dvs., setați un background-color și border: în cadrul nav a selector.

  nav a {    display: block;    float: left;/*We're just setting up fonts settings here*/
    font-family: sans-serif;    font-size: 9px;    color: white;
/*Box Method Test AKA handicap*/
    background-color: #17b0cf;    border: 1px solid #000;   
   /*Padding Our Box*/
    padding-top: 20px;    padding-right: 10px;    padding-bottom: 10px;    padding-left: 10px;
/Let's remove the dumb link decoration*/    text-decoration: none;
} 
1611975129 488 Cum sa construiti cu usurinta bara de navigare Mashable cu

Lățimile sunt diferite, dar acest lucru este în concordanță cu stilul aleatoriu al lui Mashable. Puteți seta întotdeauna o lățime dacă doriți consistență. De asemenea, am ajustat fontul aici pentru un aspect curat. Puteți obține câteva fonturi grozave de la Google. Asigurați-vă că lipiți eticheta de link pe care o furnizează <heanunț> etichetă.

Ne vom șterge handicapul și vom muta background-color proprietate la nav a:hover selector. Puteți păstra oricând handicapul dacă trebuie să faceți ajustări.

1611975129 845 Cum sa construiti cu usurinta bara de navigare Mashable cu
Aceasta este o culoare destul de frumoasă

Aproape am terminat. Să lucrăm la logo.

#logo { /*font*/
  font-family: 'Hind', sans-serif;  font-size: 30px;  letter-spacing: -2px;  text-shadow: 1px 1px 2px #c4c4c4;
/*box*/
  padding-left: 20px;  padding-right: 40px;  margin-right: 10px;  margin-top: -20px;  }

S-ar putea să fi observat până acum că cutiile dvs. căptușite se extind peste nav. Tot ce trebuie să faceți este să ascundeți preaplinul prin adăugare overflow: hidden; pentru dumneavoastră nav selector. Această mică proprietate scapă de o mulțime de frustrări.

Produsul final

1611975129 233 Cum sa construiti cu usurinta bara de navigare Mashable cu
1611975129 681 Cum sa construiti cu usurinta bara de navigare Mashable cu

Declarații de închidere

CSS poate părea a fi un limbaj plin de magie, mai ales dacă sunteți obișnuiți cu logica limbajelor de programare. Dar tot ce trebuie să faceți este să țineți cont de metoda casetei atunci când construiți aspectul unui site.

Desigur, există trucuri pe care masterizatorii CSS le folosesc pentru a adăuga acel plus de stil. Vom enumera mai jos o serie de resurse care vă vor face profesionist la CSS în cel mai scurt timp. Dacă sunteți încă enervat de CSS, atunci ar trebui să aruncați o privire la unele dintre pre-procesoare concepute pentru a face sarcina de stilizare a unui întreg site mai eficientă.

Resurse:

Trucuri CSS

Veți ști cum să creați orice puteți visa prin navigarea pe acest site.

Jucătorul de coduri

Thecodeplayer oferă codare live pentru a vă ajuta să înțelegeți nuanțele CSS.

Calculator de culoare

Obțineți valori precise pentru culorile de fundal.

Nu uitați să renunțați la unele aplauze dacă acest tutorial a ajutat. Împărtășiți-l cu prietenii care se află la birou când se ceartă cu CSS.

Cod în pace,

Raji Ayinla | scriitor de conținut tehnic intern | e-mail: rajiayinla858@gmail.com

1611975130 598 Cum sa construiti cu usurinta bara de navigare Mashable cu
Icoane proiectate de Freepik din www.flaticon.com