Bienvenue, tout le monde.
Il est temps pour nous d'arrêter d'apprendre de nouvelles choses et
de mettre en pratique les choses dont nous avons parlé la semaine dernière.
Ce que nous allons faire, c'est ajouter certains des nouveaux composants sur lesquels nous avons travaillé.
Mais nous allons le faire ensemble pendant que nous codons, donc encore une fois je vais insister
sur le fait que j'espère vraiment que vous arrêterez, posez tout ce que vous faites, fouettez votre ordinateur portable ou tout ce que vous codez, et
codez avec moi plutôt que de regarder ce que je fais.
Quand nous étions en train de coder ensemble,
j'espère que vous avez créé quelque chose qui ressemble à cet écran ici.
Nous sommes allés et nous avions utilisé la largeur et différents affichages, le
rembourrage et la marge et nous étions en train de rendre notre page un peu mieux.
Aujourd'hui, nous allons aller un peu plus loin et ajouter des éléments différents
tels que le dégradé, au lieu d'avoir trois sections de largeur égale, nous allons avoir quelques
sections prendre la moitié de la page, d'autres prendre la pleine page, de petites choses comme ça.
Et nous allons utiliser ces nouveaux sélecteurs que nous avons étudiés.
Alors, allons de l'avant et commençons.
La première chose que je veux faire est de mettre dans ce dégradé linéaire ou
cette nouvelle couleur qui va à la fois dans l'en-tête et le pied de page.
Donc quand j'irai à ma feuille de style, et que je viendrai ici.
Une des premières choses que je veux faire est que je veux mettre dans le fait que nous avons besoin d'un nouvel
arrière-plan pour l'en-tête et le pied de page.
Et je vais commencer par le mettre ici.
Je sais que j'ai triché, j'ai copié et collé.
Mais je voulais faire ça, désolé.
Je voulais faire ça, parce que je n'arrêtais pas de foirer quand je tapais.
Donc, ce que j'ai mis ici, c'est que j'ai commencé par mettre une couleur d'arrière-plan.
Vous voulez toujours le faire, parce que si vous ne le faites pas, si pour une raison quelconque
le navigateur ne peut pas gérer le gradient linéaire, vous lui avez donné un repli.
Ensuite, j'ai eu ma règle de gradient linéaire dans chacun des différents webkits.
Donc, une fois que j'ai ajouté cela et que j'ai frappé sauver, nous pouvons rafraîchir la page et
voir si nous avons ce genre de couleur grise à bleue que nous recherchions.
Hé, super, on l'a fait.
Maintenant, quand j'ai écrit cette règle, vous vous souvenez peut-être que j'ai mis
en-tête, pied de page et cela signifie qu'il est censé s'appliquer à ces deux éléments.
Mais il ne s'appliquait qu'à l'en-tête.
Nous devons réfléchir à la raison pour laquelle c'est arrivé.
La raison est que si nous faisons défiler vers le bas, vous pouvez voir que plus bas dans la page que
j'ai dit, je veux que mon fond de pied de page soit cette couleur particulière.
Ça écrase toutes les règles antérieures, donc je vais y aller.
Et je vais supprimer ceci, et dire, nous allons nous débarrasser de ça.
Rafraîchissez, et génial.
Maintenant, ça a l'air beaucoup mieux.
Ok, donc nous avons fait ce changement, et j'espère que vous vous habituez à l'idée
d'utiliser la virgule pour styliser deux éléments à la fois, vous pouvez faire encore plus et
mettre ces préfixes de kit Web ou les préfixes de navigateur.
Si vous vous en débarrassez, cela peut fonctionner sur votre navigateur,
mais il y a de très bonnes chances que cela ne fonctionne pas sur l'autre navigateur.
Donc on veut pratiquer ça.
Bon, jetons un coup d'oeil et voyons ce qu'on a.
J' ai le gradient.
La prochaine chose que je veux aborder est de coiffer ces liens
, et encore une fois, je ne coiffe pas tous les liens de la page,
car si vous remarquez, celui-ci ici ressemble toujours exactement le même.
Je veux seulement styliser les liens qui sont à l'intérieur de la section de navigation.
Donc, je vais y aller et, j'ai stylé mon nav.
Ça a l'air bien.
La prochaine fois, je vais dire,
hey, nous allons styler juste ces liens qui sont à l'intérieur du NAV.
Et, nous avons fait quelques changements.
Si je viens ici, on peut le voir.
Un que nous avons ajouté quelque chose qui ressemble à une structure de boîte à elle.
Normalement, vous ne pouvez pas le faire parce que les éléments en ligne ne prennent pas
une largeur et une hauteur, mais, nous allons de l'avant et jouer avec.
Allons de l'avant et commençons, je vais d'abord dire que je voudrais que la largeur de chacun de
mes liens soit d'environ 22%, sauf ceci.
Rafraîchissez, non pas de chance.
Encore une fois, rappelez-vous, une des choses que j'ai dites est que les liens sont en ligne et
vous ne pouvez pas leur donner de la largeur ou de la hauteur.
Donc maintenant, si j'y vais et je dis que nous allons changer notre affichage en
inline-block, nous devrions avoir beaucoup plus de chance.
Presque trop de chance, car l'écran ne correspond pas tout à fait à ça.
D' accord ? D'accord.
Tellement génial, c'est un pas de plus.
Ajoutons cette couleur d'arrière-plan différente.
Et je crois que je l'ai fait blanc.
Mais vous pouvez utiliser tout ce que vous voulez.
Boum.
On se rapproche définitivement. Les
petits pas nous rapprochent beaucoup, beaucoup plus près.
Donc, la prochaine chose que je veux aborder lorsque nous essayons de changer notre page
est cette idée que certaines des sections devraient prendre la moitié de l'écran,
tandis que certaines des sections devraient aller de l'avant et prendre toute la largeur de l'écran.
Et la façon dont nous allons le faire est d'utiliser des cours.
Si vous vous souvenez,
les classes sont un moyen de styliser certains groupes d'éléments de manière similaire.
Allons-y et voyons comment on va faire ça.
La première chose que je dois faire est de faire un nouveau cours, et ce cours va dire,
au lieu que toutes les sections prennent 30%, je veux juste quelques-unes d'entre elles,
je vais les appeler à moitié pour prendre environ, disons 45% de la page.
De cette façon, il ne va ramasser que certaines sections, pas toutes.
Si je rafraîchis, cela ne fonctionnera pas encore parce que le problème est que je me suis
débarrassé de mon style de section et l'ai remplacé par cette classe et
nulle part dans mon HTML je me suis souvenu de référencer la classe.
Donc, pour la première fois, nous allons maintenant entrer dans notre fichier HTML et
commencer à apporter quelques modifications. Je
vais aller ici, je voudrais que celui-ci ne prenne que la moitié de l'écran,
donc je vais dire classe = moitié.
Et je voudrais que celui-ci prenne la moitié de l'écran.
On a ça.
On ne changera pas l'autre, donc
quand je me rafraîchis, tu peux voir que deux d'entre eux sont maintenant à côté de l'autre.
Donc quand j'ai et rafraîchi, il semble un peu plus proche, sauf que j'ai des
choses bizarres qui se passent avec des choses bleues et différentes.
Donc c'est parce que j'ai utilisé float.
Et si vous vous souvenez, lorsque vous utilisez float parfois, cela fait que les choses qui
sont à côté de l'autre sont fondamentalement dans des positions où vous ne voulez pas qu'elles soient dans.
Donc notre section inférieure, celle que nous savions que nous ne voulions pas flotter,
nous devons entrer et dire hey, il y a certaines sections que nous voulons être entières.
Revenons à notre feuille de style.
Et je vais juste faire un peu de copie et coller ici.
Et je vais dire, tu sais quoi ?
Cette section, j'ai besoin que ce soit la classe égale entière.
Alors retournez par ici.
Classe de section = entier ce qui signifie que celui-ci devrait prendre toute la largeur,
n'essayez pas de le flotter l'un à côté de l'autre.
Et nous allons de l'avant et nous rafraîchissons.
Ça a l'air beaucoup mieux.
On dirait que nous voulions que les choses soient à la fin.
Et encore une fois, faites attention.
Seuls les liens de navigation sont stylés, pas tous les liens.
Nous avons mis dans le gradient.
Si votre dégradé ne fonctionne pas,
c'est peut-être parce que vous n'avez pas mis les préfixes de votre navigateur.
Il y a beaucoup de petites choses qui se passent sur cette page.
Et encore une fois, je ne suis pas graphiste, donc je ne fais pas les plus belles choses.
Mais c'est un peu amusant d'entrer et de créer différentes choses et de
voir comment vous pouvez les coiffer vous-même.
Alors, continuez et bonne chance et ne vous inquiétez pas quand vous frappez ces fautes de frappe.
Nous le faisons tous.