Salut, tout le monde.
Bienvenue de retour.
Comme c'est la quatrième semaine et que
vous travaillez sur votre projet final, ce que je veux faire est de vous montrer
quelques-unes des différentes options que vous pouvez utiliser lorsque vous coiffez vos pages.
Et dans cette vidéo,
je veux vous montrer ce qui se passe lorsque vous essayez de faire une barre de navigation verticale.
Donc, ici dans mon navigateur,
j'ai à quoi la page va ressembler quand nous aurons fini.
Mais allons-y et je vais appuyer sur refresh et voir d'abord à quoi cela ressemblerait
si j'essayais de faire une barre de navigation en utilisant quatre liens simples.
Encore une fois, les liens sont en ligne, donc ils vont les uns à côté des autres. Il
n'y a pas de couleur. Il
n'y a rien qui se passe.
Et c'est vraiment horrible.
Laisse-moi remettre ce style.
Actualisez la page.
Et je vais vous montrer comment j'ai créé cette barre de navigation.
Commençons par parler du corps.
Je viens de mettre un peu de couleur de fond, de rembourrage et de marge.
Ce n'est pas vraiment important ici.
Ce qui est important, c'est de parler de notre section de navigation.
L' une des choses que je voulais faire est de vous montrer l'idée d'
utiliser cette boîte à border-taille de boîte.
Ce que cela va faire, c'est qu'il
vous enlève le besoin de compter combien de largeur, combien de rembourrage, combien de bordure.
Tu n'as pas à faire les calculs.
Le navigateur le fera pour vous.
J' ai mis dans une simple bordure, couleur, couleur de fond, etc.
La première chose que j'ai fait, cependant, est que je l'ai fait inline-block,
parce que je veux que ma navigation soit à côté des autres parties de ma page.
Et puisque Nav est bloqué, ça n'arrivera pas à moins que je le jette là dedans.
J' ai donc dit que je voulais qu'il soit environ 20% de la page, puis j'ai ajouté une certaine marge.
Maintenant, quelque chose de nouveau que vous n'avez peut-être pas vu auparavant est cette idée de hauteur
égale 100vh.
C' est la hauteur de votre fenêtre.
Donc, cela signifie que je veux que la navigation prenne toute la hauteur de votre page.
Je ne le recouvre pas dur à 400 pixels ou 200 pixels,
car je ne sais pas à quel point l'écran est grand que vous regardez.
Ensuite, parlons des longueurs réelles elles-mêmes.
Ce que je suis allé et fait, c'est que j'ai enlevé les liens ennuyeux réguliers et
je les ai vraiment stylés pour les rendre un peu plus original.
J' ai donc mis une hauteur de la hauteur que je veux que chacun de mes liens soit.
Et puis j'ai mis un peu d'astuce et
j'ai dit que je voulais que la hauteur de la ligne soit de 45 pixels.
Alors pourquoi je ferais ça ?
La raison en serait que je veux centrer les photos de la maison ou
que je veux centrer les mots à l'intérieur et c'est ainsi que je peux le faire.
Le prochain genre de chose cool que j'ai fait est que j'ai ajouté une image de fond.
J' ai ajouté ces petites flèches.
Et la chose cool que j'ai dû faire que je veux vraiment vous signaler, c'est que
je ne pouvais pas simplement lier au dossier puis au fichier.
En raison de la façon dont j'ai configuré mon code, j'ai d'abord besoin de dire, oh, je sais que je suis dans le
dossier CSS en ce moment, donc je vais retourner dans mon dossier principal et puis trouver des images.
Si c'est déroutant pour vous, ne vous inquiétez pas.
C' est un tout nouveau concept, mais c'est quelque chose que beaucoup d'entre vous
vont rencontrer lorsque vous essayez de lier des images de votre feuille de style.
D' accord.
La dernière chose que j'ai faite était juste d'ajouter un peu de rembourrage, donc il y a de
la place pour l'image, puis ajouter une certaine marge.
Donc, en utilisant ces différentes choses dont nous avons déjà parlé, position, désolé,
affichage, hauteur de ligne, URL d'arrière-plan, nous avons été en mesure de faire quelque chose
qui, je pense, semble vraiment cool pour une barre de navigation simple et verticale.
Vas-y et essaye-le.
Bonne chance.