Hogyan lehet egyszerűen felépíteni a Mashable navigációs sávját HTML és CSS segítségével

Amikor meglátogatja a wecodejs.com oldalt, azt gondolhatja magában: „Ember, milyen navigációs sáv. Milyen nagy, gyönyörű navigációs sáv. Nyerő. ”

És akkor megy a kódszerkesztőjébe, és úgy tűnik, nem tudja elérni, hogy a HTML elemek blobja hasonlítson arra a nagy, gyönyörű navigációs sávra.

A CSS megírása olyan, mint egy gyökércsatorna megszerzése, gondolod. A fene, ez is varázslat lehet.

Nos, ez nem varázslat. Könnyedén megformázhat egy „navigációs sávot” vagy bármely más webkomponentust. Csak annyit kell tennie, hogy megváltoztatja a CSS nézetét.

Element, mi vagy?

Az első dolog, amit el kell tennünk az útról, az az elképzelés, hogy az összes CSS csak a dolgok csinosítását jelenti. Helytelen módszer a CSS-projekt kezelésére, mert elvonja a figyelmét arról, hogy mire valójában használják a CSS-t. Alapvető szinten a CSS-t használjuk az elemek rendszerezésére egy weboldalon.

Most mi az elem? A Wikipédia így definiál egy HTML elemet:

A HTML elem egy HTML dokumentum vagy weboldal egyedi összetevője , miután ezt elemezték a dokumentumobjektum modellbe.

Fúj. Ez nem igazán segít rajtunk. A W3schools definíciója egyszerűbb, azaz: "Minden HTML elem doboznak tekinthető."

Ez elképesztő! Nem, komolyan ezt nem lehet elégszer hangsúlyozni. Nagyon egyszerű egyszerűen elsimítani ezt a kijelentést, amikor végigmegy a CSS-en. Ha el tudjuk képzelni, hogy minden általunk létrehozott HTML elem új doboz, akkor jobban megértjük a CSS szerepét ezeknek a mezőknek az elrendezésében.

Hirtelen értelme van a „doboz modellnek”. Biztos vagyok benne, hogy láttad már.

A párnázás, a szegély és a margó tulajdonságai mind segítenek a dobozunk alakjának megadásában. Párnázással készítjük a doboz vizuális képét, egy szegélyt a kerületének kerítéséhez, és egy margót, hogy megkülönböztessük minden más doboztól.

Most, hogy vonatkozik ez a navigációs sávunk rejtélyére? Kezdjük el a kódolást, hogy megtudjuk. Újra elkészítjük a Mashable navigációs sávját, levonva a legördülő menüből és a közösségi ikonokból (ez egy másik bemutatóhoz). Ne felejtsen el kódolni, mivel ez a legjobb módszer a tanulásra.

Tervezz, tervezz, tervezz

Ha egy projektet ellenőrzőlistával indítunk, ez segít nekünk a szervezett kód megírásában. Normál esetben drótvázat állítottunk fel, de már van modellünk, amelyből ki lehet dolgozni.

HTML:

  1. Hozzon létre egy navigációs elemet, amely tartalmazza az összes fül elemet
  2. Hozzon létre lapelemeket
  3. A legfelső lapot logóként azonosítja

CSS:

  1. Állítsa a navigációs sáv színét kék színűre
  2. Állítsa a tabulátor mező színét világosabb kék színre
  3. Állítsa be a betűtípusokat a tabulátorablakokban sans-serif értékre, és színezze őket fehérre
  4. Állítsa be a logó betűtípusát és doboz tulajdonságait.

Mese két navigációs sávról

Úgy tűnik, készen állunk a kódolásra, de tartsd ki magad! Emlékszel, amikor korábban említettük a „HTML-foltot”? Nos, el kell gondolkodnia azokon az elemeken, amelyeket használni szeretne a navigációs sáv létrehozásához. HTML-beírásának egyik módja rendezetlen lista létrehozása:

Kimenet:

Ha most kezdi a CSS-t, ez változhatatlan foltnak tűnhet. Még linkeket sem adtunk hozzá, ami azt jelenti, hogy elemeket kell fészkelnünk.

Itt van egy egyszerűbb megközelítés a navigációs sáv létrehozásához, miközben megtartjuk a jelölés szemantikáját:

Mint láthatja, csak a HTML használatával feltörtünk egy navigációs sávot. Most már csak annyit kell tennünk, hogy megvalósítsuk a dobozmodellt, hogy eltereljük őket. Használjuk a második HTML kazánt a Mashable navigációs sávjának létrehozásához, majd áttekintést nyújtunk a megfelelő stílus kialakításáról.

CSS a megmentéshez

Most rendezzük ezeket a dobozokat néhány CSS-sel. Felsoroljuk az összes kiválasztót, amelyre szükségünk lesz ehhez a feladathoz.

/* 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 { }

Az első dolog, amellyel el kell kezdenünk, a hajónk szélességének és magasságának beállítása, valamint egy kis szín hozzáadása. A színkerék nagyszerű forrása itt van.

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 { }

Megvan a navigációs bárunk! Ezután kezdjük el létrehozni néhány mezőt, amelyek között mozoghatunk. Megtehetjük, hogy az elemeket blokkként jelenítjük meg.

nav { width: 100%; background-color: #0b98de;
} nav a { display: block; 
 } nav a:hover { } #logo { }

Úgy tűnik, hogy megtörtük a szép hajónkat. Nem feltétlenül kellett ezt tennünk, de az elemeink igazítása sokkal könnyebb, ha minden elemet blokkként kezelhetünk. Ennek kijavítására egyszerűen azt írjuk, float: left;.hogy ezzel visszatérünk az első helyre.

Megjegyzés: ez a lépés kihagyható,de ha rendezetlen listát használ, akkor azt végre kell hajtani.

Most hozzuk létre a dobozokat. Ha visszatekint a doboz modelljére, akkor észreveszi, hogy a párnázás hozza létre ezeket a dobozokat. Ha meg szeretné tudni, hogyan működik ez, és tesztelje a dobozok méretét, állítsa be a background-colorés border:a nav aválasztót.

 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;
} 

The widths are all different, but that’s consistent with Mashable’s random style. You can always set a width if you crave consistency. We also adjusted the font here for a clean look. You can get some great fonts from Google. Make sure to stick the link tag they provide into your ad> tag.

We’ll delete our handicap and move the background-color property to the nav a:hover selector. You can always keep the handicap on if you need to make adjustments.

We’re almost done. Let’s work on the 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; }

You might have noticed by now that your padded boxes extend past the nav. All you have to do is hide the overflow by adding overflow: hidden; to your nav selector. This little property gets rid of a lot of frustrations.

The final product

Closing statements

CSS can appear to be a language full of magic, especially if you’re used to the logic of programming languages. But all you have to do is keep the box method in mind when constructing the layout of a site.

Of course, there are tricks that CSS masters use to add that extra bit of style. We’ll list a bunch of resources below that’ll make you a pro at CSS in no time. If you’re still annoyed with CSS, then you should take a look at some of the pre-processors designed to make the task of styling an entire site more efficient.

Resources:

CSS Tricks

You’ll know how to create anything you can dream of by browsing through this site.

Thecodeplayer

Thecodeplayer offers live coding to help you understand the nuances of CSS.

Color calculator

Get precise values for your background colors.

Don’t forget to drop some claps if this tutorial helped. Share it with friends who head desk when wrangling with CSS.

Code in peace,

Raji Ayinla|intern technical content writer|email: [email protected]