Salut, tout le monde.
Bienvenue à un autre examen de code.
Plus tôt, j'ai créé une barre de navigation qui fonctionnait verticalement.
Il est monté et descendu.
Aujourd'hui, je veux juste vous montrer comment vous pouvez utiliser le même code HTML mais
créer une barre de navigation horizontale, à la place.
Alors, jetons un coup d'oeil.
Je veux aller à quelque chose qui ressemble un peu plus à ça.
Et, non seulement je suis allé à une barre de navigation horizontale, mais je veux vous montrer
un exemple de montrer quelle page est celle que nous regardons actuellement.
Donc, si vous remarquez, dans la barre de navigation,
le lien photos semble un peu différent des autres.
Il est très courant de le faire pour indiquer aux gens que
c'est la page que vous regardez en ce moment.
Jetons donc un coup d'oeil au CSS et voyons comment j'ai pris du HTML brut et l'
ai transformé en quelque chose où j'ai une barre de navigation joliment stylée.
D' accord, on commence par dire, tu sais quoi ?
Nous voulons styliser tous les liens qui se trouvent dans la barre de navigation.
Je ne veux pas styliser tous les liens, à la place,
je veux indiquer juste les liens qui sont à l'intérieur de nav.
Et une fois que nous avons fait cela, c'était assez simple pour moi d'aller de l'avant et de mettre que je veux
une certaine hauteur, une certaine couleur de fond, une certaine décoration de texte.
Une des choses que j'ai ajoutées ici est un rayon de bordure. Le
rayon de la bordure courbe les boîtes, donc
si vous regardez, tout est un peu incurvé ici le long du côté.
Rien de trop important ici.
La prochaine chose que j'ai,
la nouvelle, est cette idée d'avoir une classe appelée courant.
Ce que fait la classe actuelle, c'est fondamentalement un moyen de marquage.
Hey, tu connais tous les liens qui sont sur ma page ?
Je veux te montrer lequel je regarde en ce moment.
Et tout ce que j'ai fait ici, c'est que je suis allé et je l'ai mis de sorte
que j'ai une couleur de fond différente.
D' accord.
Donc, il était assez simple de créer cette
barre de navigation horizontale tant que vous faites très attention à espacer les choses.
Encore une fois, je veux juste vous montrer que les choses comme le rembourrage et la
marge sont très importantes et qu'elles sont très additifs.
Donc, quand vous utilisez des pourcents, au lieu de pixels, cela va l'empêcher d'être
que cela semble bien sur un grand écran, puis vraiment mauvais sur un petit écran.
La dernière chose, j'ai un peu mis ici juste pour avoir du plaisir et pour vous
aider à vous montrer à nouveau quelques-unes des différentes choses que vous pouvez faire avec CSS,
est que j'ai ajouté un état de survol pour l'un de mes liens de navigation.
Donc, si tu
jettes un coup d'oeil, je suis entré ici et j'ai dit que quand quelqu'un passe au-dessus de la page, je veux changer la couleur du texte
et je veux me débarrasser de tout ce truc de rayon de frontière.
Alors jetons un coup d'oeil.
Va ici, je vais passer la souris sur les recettes et
le texte est tourné du blanc au noir, et il est passé d'un cercle à l'autre.
Maintenant encore, comme je passe en revue tous ces différents exemples avec vous, il est vraiment
important que vous réalisiez, je ne suis pas un artiste, et je ne suis pas très artistique.
Et j'espère que vous pouvez prendre ces extraits de code et le
transformer en quelque chose qui a l'air vraiment génial et personnalisé pour
la page que vous essayez de créer.
Alors allez-y, amusez-vous, et maintenant essayez de faire une barre de navigation
qui va de différentes manières, de haut en bas, de côté, ou même de combinaisons.
Bonne chance.