Maîtrise de HTML5 et de CSS3 pour les débutants

1. Promo: êtes-vous à la recherche d'un cours qui vous mènera d'un débutant complet à la construction de votre propre site Web ancêtres HTML ? Ou peut-être que vous connaissez déjà du XML et du CSS. Quoi ? Vous avez du mal à construire un site Web du monde réel. S' il a répondu oui à l'une de ces questions, vous êtes arrivé au cours des blancs. Salut, je m'appelle Alex. Comme me promener à mon cours de maître html cinq et CSS trois. Maintenant, c'est le coût de conçu spécifiquement pour vous montrer comment vous pouvez postuler. HTML NCs dit de construire des sites Web réactifs en guerre réelle, le cours est divisé en plusieurs sections dans les 2 premières sections. Je vais vous présenter les bases du HTML et du CSS, puis dans la section trois appliquera ce que vous avez appris dans les 2 premières sections pour construire ce beau Riel Ward Responsive site Web. Maintenant, ce cours n'est pas seulement sur le codage. En outre, pour en savoir plus sur l'histoire de cinq inceste externe, Je vais vous montrer comment vous pouvez optimiser votre avantage pour la vitesse et pour ces moteurs S C o. Je vais vous présenter les noms de domaine étaient Holston et enfin je vais vous montrer comment vous pouvez lancer la vie de votre site Web sur Internet. Il y a aussi des sections spéciales dédiées à vous enseigner les bases de PHP, où vous apprenez à vous bouleverser, plus interactif. Et il y a aussi une section dédiée à vous enseigner les bases de la conception Web afin que vous apprendrez comment vous pouvez concevoir de beaux sites Web modernes pour vous-même ou pour vos clients, car vient également en plus de 11 heures de contenu, des quiz, des affectations, des ressources relativement, et vous obtenez des stocks n'importe où dans le cours de l'Alberta pour vous fournir le soutien le plus rapidement possible. Maintenant, si vous avez jamais voulu en apprendre davantage sur HTML cinq histoire incessante. C' est le cours parfait pour vous et j'espère que Will dans le cours, et j'espère que vous voyez à l'intérieur elle est. 2. Introduction au HTML: D' accord. Parlons donc de H t m l. Qu'est-ce que HTML ? Eh bien, cela signifie le langage de balisage hypertexte. C' est exactement ce que Ht m l signifie. Donc la grande question en ce moment est OK, très bien. Que fait exactement HTML ? Eh bien, j'aime utiliser cette analogie quand tout le monde expliquable. HTML est imaginer qu'un site Web est le corps humain. Ok, réfléchis à ça une minute. Ce site est un corps humain. HTML serait le squelette de ce corps humain. C' est fondamentalement un peu comme la structure de base d'un site web. Vous ne pouvez pas avoir de site Web. Nous avons sorti html. C' est pratiquement impossible. Donc, fondamentalement huit formes similaires l'épine dorsale ou le squelette d'une toux, chaque page Web unique sur Internet, vous ne pouvez pas avoir une page Web sans HTML. C' est comme avoir un corps humain sans poêle, et ce n'est pas juste que ça n'arrivera pas. Donc, c'est essentiellement ce que h t m L est. Donc, ce que j'ai ici est une aide très simple sur Internet, et ce que vous pouvez voir ici est principalement juste du texte. Mais il peut aussi voir une image juste ici. Donc, si je voulais jeter un oeil au code derrière cette page. J' utilise le brave navigateur. Donc, si j'ai utilisé vous contrôler, cela me conduira à la source de la page. Le code source de la page. Je crois que vous contrôler est également applicable pour Google Coombe. Si vous utilisez Firefox ou peut-être même le navigateur safari, il peut être différent. Mais si vous faites un clic droit, vous devriez dire quelque chose que Cesar voir page. Donc, il suffit de cliquer dessus et vous devriez être en mesure de voir le code de la page. Alors quoi ? Ici vous pouvez voir le jargon, Zaid le code ils très sur le code sexy derrière cela sur la page sexy. Donc, beaucoup de choses que vous voyez ici est HTML. Mais ce n'est pas seulement un similiaire. Aussi, avez du javascript comme ça. Mais ne vous inquiétez pas. Concentrez-vous simplement sur les parties html. Donc, ici, vous pouvez voir h un exemple d'une simple page externe. Vous pouvez voir le langage de balisage hypertexte de la balise P. Ah, classe P. Tout ce que vous regardez ici, c'est l'âge T m l mais ne vous inquiétez pas. Nous allons traiter beaucoup, beaucoup plus profondément dans html. Je vais vous expliquer exactement la structure de base. Et ah, vous aurez une bien meilleure compréhension du fonctionnement du XML. Derrière le sens dans cette vidéo sont tout simplement pas vous introduire au HTML et vous donner également un exemple de ce que le code source du HTML ressemble. Donc c'est, je pense, c'est beaucoup de fortune. Je te verrai dans la prochaine classe. 3. Écriture de notre premier code HTML: Faisons quelque chose d'amusant tout de suite. D' accord ? Nous allons créer notre toute première page HTML maintenant. Je sais que vous ne connaissez pas HTML, mais ne vous inquiétez pas. Faites-moi confiance. Ça va être marrant, ok ? Je veux que vous créez un dossier n'importe où dans un ordinateur, par exemple. Je suis dans mon dossier de documents, et je vais créer un nouveau dossier, et je vais appeler ce dossier HTML d'accord. Et puis à l'intérieur de ce dossier, je vais créer un nouveau fichier et vous prenez documenté par le document texte, et nous allons juste nommer que le nouveau document texte. Je vais l'ouvrir maintenant. À l'intérieur du document. Note amusante. Pad. Vérifie ça. Ok, je vais faire ça. Je vais ouvrir quelques crochets, on va taper H 1, et ensuite je vais dire bienvenue. Et puis je vais taper un H à nouveau. Mais maintenant, devant ce H, le 2ème 1, je vais ajouter une barre de Ford, d' accord, accord, et puis une nouvelle ligne. Je vais faire quelque chose de similaire, mais cette fois, ce sera un P. et je dirai que je m'appelle Billie Jean. D' accord. Et puis je vais le fermer comme avec une barre oblique au téléphone et ensuite tu comprends ça ? OK, maintenant je vais aller de l'avant et toucher le dossier, et je vais sauver le cul. Tous les dossiers. Mais maintenant, le nom. Je vais changer le nom pour Billy dot h t m l Je vais aller de l'avant et sauver. Et maintenant à l'intérieur de ce dossier, vous devriez voir Billy ce HTML simplement double-cliquer dessus. Et tu y vas. J' utilise le PC. Donc, par défaut, Internet Internet Explorer est mes pouvoirs par défaut sont donc il est ouvert et Internet Explorer, et comme vous le considérez maintenant, il enregistre. Bienvenue. Je m'appelle Billy Jean. Espérons que vous avez des résultats similaires. Et si vous avez fait des félicitations. Donnez, en fait, juste dans votre tout premier morceau de code similaire 4. Installation des supports: pour le reste de ce cours, nous allons marcher avec un texte ou pour allumer et modifier notre code. Et maintenant, il y a tout un tas de Texas qui sont là dehors. Mais la seule recommandation ancienne serait des parenthèses pour trop de raisons. L' un est le fait qu'il est gratuit, et le second est le fait qu'il a été construit spécifiquement plein code HTML et CSS. Et oh, il est également compatible avec Boat Ah, PC et Mac. C' est donc un excellent choix. C' est déjà à l'aise de marcher avec un autre type de texte que je les ai pris. Par tous les moyens, vous pouvez coller avec un éditeur de texte. Ça ira, mais je vais y aller avec des crochets. Il suffit d'aller à Pakistan I o. et il suffit de cliquer sur le Bolton bleu qui disent les crochets de téléchargement. Maintenant, l'installation réelle des enregistrements est assez simple. Sur la toute première page, vous pouvez voir quelque chose comme ça, vous pouvez simplement cocher ces deux cases qui ajouteront des crochets au chemin pour venir en ligne et ensuite aussi à explorer. Tu peux vérifier ça aussi. Vous n'avez pas besoin que c'est généralement appeler la prochaine et cliquez sur installer, et c'est à peu près tout, donc vous voulez ce message ? Tu sais que tu veux que ça fasse des changements ? Oui, il suffit d'aller de l'avant et de cliquer. Oui. Et, euh, c'est vraiment très, très simple. Rien de compliqué. Ne devrait pas prendre trop de temps pour installer des supports. Et ah, je vais juste attendre un peu, accord ? Je vais mettre la vidéo en pause et tout reprendre une fois la solution terminée. D' accord ? Donc, une fois que vous aurez fini entre parenthèses volées et que vous l'aurez appris, ce sera la toute première page que vous verrez. Vous verrez sur les captures d'écran que vous pourriez voir index point html avec un exemple de code html. Et vous verrez également un autre fichier notre principal point CSS. Donc, cela a été beaucoup pour l'installation de supports. Allemand Avonex vidéo ours ne commencera pas à explorer html dans les détails beaucoup plus profonds. 5. Étiquettes et éléments HTML: Bon, Alors commençons avec la structure de base d'un immigrant page html. Faites usage de la page html point d'index fournie avec l'installation des crochets. Maintenant, ici, vous pouvez voir que c'est un document très long, mais regardons de plus près ce que nous avons exactement ici. Jetons un coup d'oeil à cette section particulière qui dit est ce que ces crochets ici, vous pouvez voir que nous avons P droit. Et puis nous avons un P de clôture aussi. Le P ici est ce que nous appelons une balise. Fondamentalement, tout ce que vous voyez sur cette page qui a un crochet d'ouverture et de fermeture est une balise. Donc, les exemples seraient comme la balise head, la balise meta tag body, H une balise P e M H trois Samp et ainsi de suite. Ce sont des balises. Les balises sont utilisées pour identifier un type particulier de contenu dans la plupart des cas. Donc, par exemple, le P est ici pour paragraphe, donc il reste, à droite. Tout ce texte qu'ils utilisent ayant ici bienvenue aux parenthèses sont open source moderne appelé un peu. Tout ce truc est un paragraphe. C' est ce que l'étiquette P est utilisée avec tous ceux ici où vous avez, comme un H le H pour un titre. Donc H one est un cap un fondamentalement, et il reste clouté de parenthèses. Donc, ces balises cet h on identifie ce texte comme un titre, tout comme avec H 2 identifiant Ah, ceci est votre guide comme un autre type de titre et ainsi de suite sur ces balises. Maintenant, quand vous avez à l'ouverture, balise la balise de fermeture. Et bien sûr, le contenu entre ces balises, c'est là que nous vous adaptons en tant qu'élément. Donc fondamentalement le plus vieux de votre aîné je suis clouté de têtes noires et puis la fermeture h un tout ce qui est là où nous vous adaptons comme un élément. Une chose que je devrais mentionner avant de passer à autre, c'est que chaque commande, la plupart des tags ont une ouverture et une fermeture. Pas tous sauf la majorité écrasante. Ok, c'est pour ça que tu en vois un ici. Et puis vous voyez les vêtements et une garniture avec la barre oblique avant GHT avec la barre oblique Ford H deux pour fermer la même chose avec le P aussi, le e m et quelqu'un. C' est donc juste une chose très importante que vous devriez savoir sur les balises. La plupart d'entre eux ont l'ouverture puis la fermeture. Et puis le contenu que vous avez entre ces balises et les attaques elles-mêmes combinées est ce que nous vous adaptons en tant qu'élément. Maintenant, vous pouvez également avoir des éléments à l'intérieur, souvent élément. Le meilleur exemple ici serait la balise body. Le regard du corps de cette façon vous emmène. Tu vois qu'on a cette étiquette, non ? Ne cliquez jamais dessus. Vous pouvez dire qu'il est surligné en vert Voisins refroidir. Jetez un oeil à l'endroit où il se ferme. Rappelez-vous, chaque étiquette d'ouverture doit avoir une fermeture, et vous pouvez la voir ici. C' est là que la balise body se ferme, et vous pouvez voir combien d'informations sont à l'intérieur de cette balise body. C' est beaucoup. Donc, juste pour vous le faire savoir à nouveau, un élément peut contenir des éléments à l'intérieur de celui-ci. Les balises sont utilisées pour identifier des bits de données, qu'il s'agisse d'une image, d'un texte ou d'un cache, et ensuite vos balises, plupart d'entre elles auront toujours leur fermeture, sorte que vous pouvez avoir une balise H one, puis la balise fermeture d'une balise Tron et ainsi de suite. Donc, c'est essentiellement manger pour la structure de la cour sur une page HTML. Merci d'avoir regardé. Je te verrai dans le prochain cours. 6. Les attributs HTML: Passons maintenant à parler des attributs HTML. Maintenant, les attributs sont utilisés pour fournir des informations supplémentaires sur une balise particulière. Donc, à titre d'exemple, allons tout le chemin ici et ensuite où vous avez ces une balise avec les attributs H ref . Fondamentalement, la balise A est utilisée pour identifier un lien malade que vous pouvez cliquer sur le Treff A. Voici les attributs de la balise A qui nous indique la source du lien. Donc, fondamentalement, lorsque vous cliquez sur ce lien, où allez-vous vers le H où fournit cette information Maintenant, sur le nouveau tag A, vous avez le tack i m g. Le I m g est utilisé pour représenter une image. Droit ? Et maintenant ici, vous avez le notre hommage l'attribut A lt, qui est le texte alternatif. Donc, fondamentalement, le lt attribue un immobile dans ceux une pierre Le navigateur que hey, le texte alternatif pour cette image est un court écran montrant CSS édition rapide Peut-être avez-vous déjà pris un cours de base sur S e O ? Ils vous diront toujours que Hey, pour optimiser vos images, vous voulez vous assurer qu'ils ont des textes alternatifs. C' est ainsi que vous ajouteriez la vieille tente de sexe pour une image en utilisant HTML et puis ici vous avez aussi vous avez le s. Je vais voir. Attributer les stents SRC pour la source, disant essentiellement ceux-ci. Ok, c'est la source de l'image. C' est là que vous pouvez trouver cette image particulière. Donc c'est tout pour les attributs. Ils fournissent essentiellement des informations supplémentaires sur une balise. Tu en as tout un tas dehors. Vous avez des attributs qui comptel nous disent le style qui appellent ou la peau avec et ainsi de suite et ainsi de suite de différents types de technologie. Alors c'est tout. Attributs complets. Je te verrai en classe suivante. 7. Entêtes et paragraphes HTML: Maintenant que nous avons appris sur les balises et attributs HTML, il est temps de se salir les mains en écrivant notre premier morceau de code officiel. Et pour ce faire, je vais passer sur deux crochets, puis aller au fichier et puis cliquer sur nouveau pour ouvrir dans un nouveau fichier. La première chose, c'est avant que nous puissions commencer ce soir. C' est un code similaire. Nous devons identifier notre document comme étant un dossier de chaque équipe. Et pour ce faire, nous avons la balise d'ouverture et puis nous avons l'auge de poste, puis en capsule nous avons le type DOC, puis l'espace, , puis html. Cela identifie simplement ce fichier comme un document HTML. C' est bon pour les navigateurs, fondamentalement, non. Et puis la prochaine sera la balise HTML elle-même. Officiellement maintenant identifier et dire, Hey, c'est dans chaque fichier, et maintenant à l'intérieur de ce système va déposer. Je vais appuyer sur la touche Tab sur le clavier pour l'indiquer. Ok, maintenant on va avoir un élément à l'intérieur de la balise HTML. Ok, cet élément va être l'étiquette du corps. L' attaque en bateau est généralement utilisée pour identifier le contenu qui sera affiché sur le navigateur . Donc les images ou les fichiers vidéo trucs comme ça tout ce qui devrait tomber sur leur tag de votre corps. Fondamentalement, tout ce qui se trouve à l'intérieur de votre tag body serait affiché sur le navigateur. Donc, parce que la balise body et maintenant encore un autre onglet. Et ajoutons ovaire d'abord H une étiquette chacun, et je vais dire que c'est très, très grand. Je vais fermer la balise H one. Faisons quelque chose de très similaire à nouveau. Nous avons Hte, aussi. C' est très grand. Qu' est-ce qu'on fait ? Nous avons fermé le bord à étiqueter. Allons ici. Ses trois étiquettes maintenant et voir ceci est grand. Fermons la balise HDB, et ensuite on peut aller à H pour H 5. Mais venez tout droit jusqu'à l'âge de six ans et je peux dire que c'est petit. Voici ce que nous vous inquiétons en tant qu'en-têtes. D' accord, donc on a 81 h 2 h 3 et ensuite h 6. Je vais aller de l'avant et fermer l'étiquette du corps. D' accord ? Et puis finalement fermé la balise html. C' est ainsi que vous structurez appelé avec HTML. Assurez-vous que vous dans les éléments bosselés qui tombent sous un élément particulier. D' accord, je vais aller de l'avant maintenant et frapper fichier, sauver le cul et appelons sa tête en point html Cliquez sur enregistrer et voilà vous y allez. Je vais aller de l'avant maintenant et ouvrir le dossier qui doit fichier à la tête du XML DoubleClick . Et voilà. Maintenant, vous pouvez voir la sortie. C' est très, très grand. C' est H une h deux h trois, puis l'âge de six ans. Donc, les titres sont importants parce qu'ils disent au Broza comment afficher un morceau de contenu particulier maintenant parce que nous avons dit que c'est très, très gros tombe sous une étiquette Hone. Le frère le sait. D' accord. Et la plupart affichent ce texte particulier en utilisant de très grandes tailles car il s'agit d'une balise h un. Et c'est aussi important parce que pour votre S e O, chaque fois que vous essayez d'optimiser nos pages ou publications pour de tels moteurs, vous voulez avoir un instructeur en chef. Vous avez h un au sommet, puis sous un 20 Canavan H deux, puis NH trois et ainsi de suite. Donc, cela est également important pour S e O. Mais en plus de la tête que six d'entre eux, H un à H six. Nous avons également la balise P, qui est utilisée pour identifier le paragraphe. Donc, entre H 3 et H 6, je vais ouvrir une balise P et je vais dire que c'est normal dans une balise API fermée . Et maintenant, allons de l'avant et sauvegardons le fichier. Retourne à mes cloches. Ah, rafraîchissons la page et voilà. Maintenant, vous pouvez voir la balise P en action. C' est normal. Donc généralement la balise P en termes de taille a tendance à tomber. Il est généralement légèrement plus petit qu'une étiquette H 3, mais plus grand qu'une étiquette H 4 h 5 ou H 6. Donc c'est plein. Les balises de titre, ainsi que les balises de paragraphe Veber utile utile affichent des en-têtes ainsi que, ah, du texte normal. Le texte normal sera les balises P. Et bien sûr, vos titres seraient vos avertissements H. Age faire est et ainsi de suite et ainsi de suite. Donc c'est une vidéo allemande Avonex. Bell continuera d'allumer le code HTML 8. Liens Hyper: déjà, nous avons parlé des en-têtes et des balises P. Jetons maintenant un coup d'oeil à la balise A utilisée pour identifier les liens. Bon, alors faisons-le. Je vais ouvrir une nouvelle ligne après l'étiquette de six ans, et je vais dire un qui est la balise de lien, puis les attributs d'un treff égal puis dans les manteaux et va ajouter le U. R L pour le site Web. Donc, c'est deux-points quatre slash quatre w W que le singe Web en ligne dot com et maintenant le texte réel que les gens vont cliquer sur. Je vais dire Visitez mon blawg et ensuite on peut fermer une étiquette et voilà. Maintenant, vous pouvez voir ce qu'on a fait ici. Nous avons une étiquette représentant le lien, puis le treff a, qui est la source dans les manteaux. Et puis nous fermons ça. Et puis nous avons dit : Visitez mon sang, qui sera le texte réel, et puis nous fermons l'étiquette A. Allons-y maintenant et sauvegardons ça. Passons à mon navigateur. Allons de l'avant et rafraîchir la page, et maintenant vous pouvez le voir juste là visiter mon blawg Si je vais de l'avant maintenant et cliquez sur le lien, vous pouvez voir qu'il prend sont directement à mon blawg. Et c'est exactement ainsi que les liens fonctionnent avec HTML. Mais maintenant qu'on parle de liens, laisse-moi te montrer quelque chose. Prends un cool. D' accord. Vous voyez, quand nous avons cliqué sur ce lien rapidement ici, il nous a emmenés sur le site. Mais alors il n'a pas ouvert le nouveau lien dans un nouvel onglet. Quand vous faites ça, nous voulons que ce soit le cas. D' accord ? Nous ne voulons pas que ce nouveau bouleversé prenne le relais. Ah, les gens qu'on a ici. Alors, comment obtenir des liens pour ouvrir dans de nouvelles fenêtres ou de nouveaux onglets ? Revenons à notre code. Et puis où nous avons la réf h. D' accord, je vais créer un espace, accord ? Je vais ajouter d'autres attributs. Et ça va être la cible égale. Et maintenant, vous pouvez voir l'option des droits ici en blanc sur l'école, puis en blanc. C' est l'attribut qui nous dit que Hey, quand vous cliquez sur ce lien qui souffle, il va s'ouvrir dans un nouvel onglet. Vérifions ça. Allons-y maintenant et il sauve. Revenons au navigateur. On est frais. Et maintenant c'est ce qui se passe lorsque je clique sur le lien. Voilà, tu y vas. Il s'est ouvert dans un nouvel onglet, et c'est exactement ainsi que les liens hypertexte fonctionnent en HTML. Maintenant. Nous pourrions également avoir des liens internes. Cela va simplement lier ah, une page à une autre page, ou même des cas où nous avons ce que nous appelons les ailes de cheville, où, lorsque vous cliquez sur le lien, il ne vous amène pas à une autre page, une autre stable Web à laquelle il pourrait vous emmener. Une autre section de cette même page va jeter un coup d'oeil à cela un peu plus tard dans le cours. Mais c'est tout pour les hyperliens. Merci d'avoir regardé. Je te verrai dans le prochain cours. 9. Images et chemins de fichier: laissez-moi vous montrer comment vous pouvez ajouter des images à votre fichier HTML. Mais avant de le faire, je veux que vous me fassiez une faveur, allez dans votre dossier HTML actuel, puis ajoutez une image. Donc cela donne en ce moment. Par exemple, j'ai le fichier XML point PNG, puis à l'intérieur de votre dossier d'estimation, créez un autre dossier appelé Images. Et puis au lieu du dossier images, ajoutez une image. Donc, dans mon cas en ce moment, j'en ai le genre. Il va fichier PNG et puis dans le dossier HTML, j'ai le fichier PNG titulaire HCM. Au fait, vos images n'ont pas besoin d'être des fichiers PNG. Il pourrait aussi s'agir de J. Peg. Ça n'a pas d'importance. Bon, alors comment on affiche celui de ce type ? Eh bien, je vais passer à mon texte de manuel de parenthèses, Ed, Ed, il le fera. Et maintenant, ajoutons la balise image juste sur la balise A astucieuse. Et puis je vais dire S r C égal et puis je vais ajouter le fichier PNG sombre html, ok, ok, espace et puis quatre barre oblique Voici comment vous feriez la balise image afin que vous n' ayez rien comme le crochet ouvert quatre slash et puis Je suis le support de fermeture GNN. Non, c'est comme ça que vous feriez la balise image. Nous avons également utilisé l'attribut source pour indiquer la source des gars. Vous pouvez le voir maintenant, alors allons-y maintenant et sauvegardons ceci. Je vais passer à Internet Explorer fait référence à la page, et là vous allez. Maintenant, nous avons l'affichage de notre image. Mais alors comment affichons-nous la deuxième image, qui va être le fichier Skynet dot PNG ? Eh bien, si nous revenons au texte des poches Eddie Tool, nous ouvrons une autre ligne et puis nous disons AMG SRC égale et puis manteaux, disons, dans Capital Laitue genre il point p et G puis l'espace. Et puis on ferme ça, et puis je suis venu ici et je dis : «  Sauvegardez, Sauvegardez, voyons ce qui va se passer. Je vais retourner à l'intérieur d'Explora. Nous allons faire référence à la page et bien, comme vous pouvez le voir en ce moment, rien n'est affiché. En fait, nous avons une indication ici que hé, quelque chose qui est entraîné à afficher, mais quelque chose n'est pas tout à fait léger. Alors que se passe-t-il exactement ici ? volonté. C' était lui le problème. Ok, si on compare. Ah, les deux images. Skynet de PNG se trouve à l'intérieur d'un dossier appelé Images, tandis que HTML le PNG est à l'intérieur du dossier racine. D' accord ? Et aussi, gardez à l'esprit que le document est froid. Head pensée HTM. Oh, c'est le fichier réel. Avaient marcher la façon dont il dirige le HTML maintenant, parce que l'image externe, le PNG et la tête dans le fichier hmm sont à l'intérieur des mêmes montres de chien pleines étendre Mel. Nous pouvons facilement ajouter directement la sauce sur l'image. Mais puisque la deuxième image est dans un dossier différent par rapport à la tête dans le fichier HTML, nous devrons spécifier ce dossier dans lequel se trouve ce dossier. Donc, en gros, on va devoir venir ici et dire des images. Oh, désolé pour ça. Retournons ici. On va dire des images, puis quatre slash skynet. Phil, PNG. Maintenant, c'est le chemin d'affichage de ce fichier PNG Canada. D' abord, on va y aller dans un dossier appelé Images. Et puis au lieu du dossier images trouvera un fichier appelé Skynet Got PNG. Chaque fois que je peux aller de l'avant, sauvegardez le fichier. Retournons à l'Explorateur. Actualisez la page. Et voilà. Maintenant, nous avons l'image étant cette plaque. Donc, c'est exactement comment vous pouvez afficher des images, mais aussi un petit chemin d'écoute et de fichier chaque fois que vous essayez d'ajouter une image ou quoi que ce soit d'autre. Tant que ce fichier est dans le même dossier que les documents principaux dans ce cas sont tête du XML, ou nous pouvons simplement taper le nom de ce fichier. Mais si le si le fichier est dans un dossier différent devra spécifier que pour la première, puis quatre barre oblique, puis le nom de ce fichier Donc, c'est ainsi que vous pouvez afficher des images. Mais avant de partir, nous pouvons aussi ajouter l'ancien texte provisoire. N' oublie pas ça. Donc je m g s r c que nous pouvons alors aussi venir ici et dire l t égal. Et puis dans les manteaux, disons le logo du fichier html et puis ici aussi bien nous pouvons faire exactement la même chose et dire ensuite Lt égalé et puis manteau ciel logo, trucs comme ça pour que nous puissions juste sauver ça et ah, c'est à peu près tout. Alors, voilà. C' est comment ajouter des images à votre document HTML 10. Projet 1: déjà. C' est l'heure de votre première mission, et ce que je veux que vous fassiez est assez facile. Jusqu' à présent, vous avez appris à ajouter des liens hypertexte à l'aide de la balise A. Vous avez également appris à ajouter des images en utilisant la balise I M G comme. Mais ce que je voulais faire dans cette affectation servait à comprendre comment vous pouvez rendre une de vos images cliquable de sorte que lorsque quelqu'un clique sur cette image, cela les conduira à un nouveau bouleversement à titre d'exemple. Ici, mon logo html cinq. Si je clique sur l'image, ça me mène directement à la maison Web Monkey Online, Doc. Donc, en d'autres termes, j'ai une image cliquable qui a un lien vers le singe Lendl Calm. De plus, le lien s'ouvre également dans un nouvel onglet. Donc, je veux que vous essayez de penser est d'essayer de comprendre un moyen de faire une image cliquable en utilisant HTML et également veiller à ce que lorsque vous cliquez dessus, il s'ouvre dans un nouveau navigateur. Bonne chance 11. Solution d'affectation 1: J' espère que vous avez réussi à résoudre les quais. Et si tu l'as fait, félicitations. Mais si vous ne vous inquiétez pas. Je vais vous montrer comment vous pouvez créer une image cliquable en utilisant HTML. D' accord, laisse-moi aller de l'avant. Tout d'abord, et nous d'abord cette page. Et comme vous pouvez le voir maintenant, le logo n'est pas cliquable. Alors, comment résoudrons-nous ça ? Eh bien, on va retourner à toutes les parenthèses. C' est le dossier. L' image que nous voulons rendre cliquable le html dopey n G final. Donc, je vais créer une nouvelle ligne. Et ce que je vais faire, c'est ça. Nous savons que la balise A est utilisée pour créer 18 liens, non ? Alors allons de l'avant et ajoutons la balise A. Ajoutons le lien vers lequel il nous mènera. Et c'est bien sûr. Ah, https, colon ford slash w dot uh, le singe web sur la ligne point com Rappelez-vous, il est censé s'ouvrir dans un nouvel onglet, donc nous allons ajouter les attributs cibles aussi. Ajoutons que celui - ci a été appelé vide. OK, maintenant on n'a pas besoin de texto. Nous avons juste besoin de l'image pour être cliquable. Alors quoi, on va faire, c'est très simple. Je vais quitter un peu d'espace ici. La balise A a été ouverte, Comme vous pouvez le voir, à droite, Nous allons inclure l'image à l'intérieur de la taxe A. Donc nous allons ajouter une fin et ici pour indiquer que cette image est sous la balise A. Et très simplement, on va juste aller de l'avant maintenant et fermer l'étiquette a. Laissez-moi le faire correctement. Et là, vous allez avec juste quitter ated sont l'image cliquable. Allons-y maintenant et sauvegardons ça. Je vais retourner à l'Explorateur. Mais d'abord une page. Et maintenant, quand je clique sur le logo, il ouvre le lit singe en ligne dot com. C' est donc exactement comme ça que vous pouvez créer une image cliquable en utilisant HTML. 12. Listes HTML: Parlons de la façon dont vous pouvez créer des listes années en HTML et les listes sont à peu près une grande entreprise sur beaucoup de sites Web. Et à titre d'exemple, ici sur cette page XML factice en bas, vous pouvez voir que nous le faisons. Vous avez une liste sur un lynx seaux que je dois des seaux. L' équipe Blawg est en marche. Bon hub. C' est une liste. Attendez ici. Et c'est essentiellement une liste ordonnée et des listes ordonnées. D' un autre côté, vous auriez 123456 peut-être A B C D. Vous savez, des trucs comme ça. Alors, comment pouvons-nous huit listes en utilisant HTML ? Eh bien, c'est très facile. Allons à nos crochets, textons n'importe quel outil et ensuite ce que je vais faire, c'est me laisser aller de l'avant et enlever la deuxième image. On n'a pas besoin de ça. Donc juste en dessous de la balise a ici, je vais m'ouvrir dans une nouvelle balise et je vais appeler ces U L. Cela représente une liste sur ordonnée. Si il doit y avoir une liste ordonnée, utiliserait o l. Mais vérifiez ceci. D' accord ? Je vais ouvrir une nouvelle ligne et ensuite annuler si je ne vais pas lister les éléments réels sont sous le on de la liste. Donc, le 1er sera l I. Ça représente le premier membre de cette liste. Appelons cette pomme pour qu'on puisse appeler. C' est peut-être une liste de nos aliments. Peut-être pour qu'on puisse fermer celui-là. Ouvrons une autre ligne et ajoutons un autre fruit. Moi et ça va être orange. Voilà, tu y vas. Et puis ajoutons un de plus et, ah, quel pied ? Sûrement adhérer goyave. Je suis sûr que tu n'as jamais pensé à ça, ok ? Et enfin, nous allons fermer sur la liste des commandes. Et voilà. C' est ainsi que vous créeriez une liste sur ordonnée. Tout d'abord, vous ouvrez avec le U L. et ensuite les éléments de la liste eux-mêmes. Tu auras l'étiquette 1 et tu fermeras. Ellen balises entre les deux. Chaque élément de liste maintenant, une liste ordonnée, comme je l'ai dit, est presque exactement la même chose. Je vais juste copier ce bloc comme une copie de clic, et je vais payer. Asseyez-vous ici. La différence entre Dill, c'est qu'au lieu de toi, ça va représenter une liste ordonnée, et tu es bon de voir la différence en ce moment. Je crée juste un peu d'espace ici. Ok, allons-y et enregistrer ceci et je vais revenir au document HTML étaient d'abord une page et maintenant vous pouvez voir sur d'autres listes Apple, orange Glover et puis la liste ordonnée sur Apple, Orange et Glover. C' est ainsi que vous pouvez créer sur des listes ordonnées et ordonnées. En utilisant HTML un autre que faiblir avec les listes est de changer les icônes par défaut représentant les éléments de liste. Maintenant, par défaut ici, vous pouvez voir que le bail commandé a, comme le cercle le cercle noir représentant l'élément de liste H, puis les listes d'ordre a Bigelow 123 Vous pouvez réellement changer cela. Et nous pouvons changer cela en ajoutant quelque chose connu comme une propriété de style parlera propriétés très, très bientôt. Mais vérifiez cet avocat où vous avez. Eh bien, je vais ajouter de l'espace, et je vais dire que le style est égal. Et puis dans les manteaux, je vais dire liste et puis vous pouvez voir la propriété cotée le moins type de style. Quel genre de type hors de la liste. Je ne peux pas entrer dans notre annonce ici maintenant vous pouvez voir plusieurs valeurs qui vous sont fournies. Cependant, essayons d'aller avec Square comme exemple, n'est-ce pas ? Et puis, à la fin de la case, je vais ajouter un point-virgule. Bon, allons-y et sauvegardons ça. Et maintenant, revenons à explorer d'abord la page. Et maintenant, vous pouvez voir que l'ICANN a changé des cernes deux carrés. Donc, c'est ainsi que vous pouvez changer la valeur par défaut. Je pourrais représenter dans le moindre des éléments pour notre propre liste ou celle -ci. Et comme vous pouvez le voir ici, nous avons accès à tous les Vela. En plus de la place, Disons, par exemple, qu'est-ce qu'on a d'autre ici ? Nous avons aussi le disque par chose. Le disque est le disque par défaut. Essayons le disque. Ah, gardons ça. Allons-y avec le disque. Voyons comment cela apparaîtrait avec frais. Ok, donc vous pouvez voir que c'est en fait, la valeur par défaut parce que parfois certains navigateurs, mais interpréter, discuter un peu différemment. Donc, pour explorer le disque est la valeur par défaut. Mais nous en avons un autre. On peut aller avec, ce qui est notre cercle, dit Go. C' est un cercle et voyons comment cela aurait l'air sûr. Il est venu ici d'abord une page et OK, donc fondamentalement cercle et disco exactement de la même chose avec explorer. Si vous utilisez un navigateur différent, exemple chrome ou safari, vous pouvez avoir des résultats légèrement différents maintenant revenir en arrière. Nous avons également un moyen de changer les icônes par défaut pour ou cette liste a été beaucoup va être . La même méthode va dire notre style et ensuite égal. Et puis dans les manteaux, affaiblir Voir ah type de style liste juste là. Et il considérait différent. Le disque décimal arménien de Vela, géorgien. Ah, voyons, nous n'avons pas de grec inférieur. Allons avec le grec inférieur et voyons à quoi cela ressemble. sommes demi-deux-points à la fin et puis nous pouvons sauver Allons à rafraîchir l'explorateur Et maintenant vous pouvez voir que nous avons maintenant le grec inférieur sont des chiffres représentant notre liste de commandes. Donc, c'est comment vous pouvez changer les icônes par défaut représentant les moins commandés et ordonnés ne dureront pas dans mentionné avant que nous arrondissons cela est que vous pouvez également créer listes à l'intérieur d'une liste. Donc, en gros, liste imbriquée C'est plus Fred, aussi. En tant que tel, c'est tout. Par exemple, où vous avez de l'orange dans la liste sur ordonnée. Laissons qu'ils veulent créer une autre liste à l'intérieur d'orange que nous allons faire ici. C' est ça. Il suffit d'ajouter, et en dense représente la nouvelle liste, puis va être vous. L encore et puis à l'intérieur du puits U, mais ne va pas ajouter la liste imbriquée. Donc, disons, par exemple, obtenu les oranges oh rouges juste comme un exemple, Attendez les oranges. Et puis nous pouvons aussi avoir beaucoup d'autres fois d'oranges sont là ? Nous avons du jaune. Orange a raison. Oranges jaunes. Fermons celui-là. Et puis enfin, nous allons fermer la liste imbriquée sur ordonnée et que vous l'avez. Allons-y maintenant et sauvegardons ça. Allons à l'Explorateur. Rafraîchissez la page et voilà. Maintenant, vous pouvez voir que nous avons et sur la liste ordonnée à l'intérieur de l'autre liste originale. Et c'est ainsi que vous pouvez créer des listes imbriquées en utilisant extrême El 13. L'argument de style HTML: permettez -moi maintenant de vous présenter les attributs de style HTML. Et c'est un attribut que vous pouvez utiliser pour ajouter différents types de styles deux types différents hors éléments. Qu' il existe une formule générale pour cela, et ce serait le nom de la balise entre parenthèses. Et puis le style, bien sûr, est égal dans les manteaux, la propriété hors du style, puis la valeur de cette propriété. Maintenant, un exemple très classique pourrait être nous à dans une couleur de fond à notre élément de corps. Donc, comme vous pouvez le voir en ce moment, nous avons corps style égal sac de couleur de fond sur appel ici étant la propriété, puis bleu étant la valeur de cette propriété. C' est ainsi que vous pouvez utiliser le style ach mettre, Mettons-le en action. Nous allons à la couleur de fond à notre élément de corps dans nos parenthèses. ai envoyé un texto. Donc ici, je vais dire, juste après l'élément du corps, je vais dire que le style de copain est égal et ensuite dans les manteaux devra ajouter le festival de la propriété , qui va être la couleur arrière du sol et puis le deux-points, et vous pouvez voir les différents types de ceux que nous avons. En fait, Allons avec Ah, allons-y avec Burly serait comme exemple, droit, Et puis, à la fin de développer la propriété ajoutera un demi-deux-points. Et voilà. Allons-y maintenant et sauvegardez le fichier. Aller sur Internet Explorer fait référence à la page, et voilà, juste comme ça avait la couleur de fond à, ah, tag body. Maintenant, en plus de changer dans le dos et les couleurs, hors page ou site Web, il y a d'autres choses que nous pouvons aussi faire aussi bien. Nous pourrions également ajouter, par exemple, comme le changement, la couleur de police pour notre texte, et cela va maintenant. Essayons de changer la couleur de police pour la balise H one. Donc ce que je vais faire, c'est que je vais faire un style égal. Et puis en manteaux, nous allons ajouter la propriété Kahlo. Gardez à l'esprit que les propriétés de réglage ne sont disponibles que pour les éléments assis. Par exemple, vous ne pouvez pas ajouter l'arrière-plan ah que je suis afin que vous puissiez ajouter l'appel tout ce que vous pouvez utiliser la propriété color avec, disons, la balise body. Ça ne marchera pas. Vous devrez utiliser la couleur d'arrière-plan à la place. D' accord, vous ne pouvez pas utiliser une culo Bagram sur une étiquette d'image. Ça ne va pas avoir de sens. Donc, dans ce cas, pour le H une h deux ans, si vous voulez changer la couleur, le texte devra utiliser la propriété call off. Bon, donc dans ce cas, donnons la valeur de Voyons votre rouge comme un exemple. Bon, donc on a changé la couleur pour lire. Allons-y maintenant et sauvegardons ça. Revenons en arrière, Teoh Broza Préférence la page. Et là, vous allez donc vous pouvez voir le H maintenant est en rouge, Donc, la même chose s'applique aux autres balises de texte votre H un Z H pour utiliser H 30 p tag. Vous pouvez changer la couleur de cette couleur amusante en utilisant simplement la propriété hors couleur. Mais tu pourrais aussi faire autre chose. Nous pouvons ajouter un autre type de style, qui sera le texte aligner dans ce cas, Allons ici pour l'âge de deux ans et disons le style et puis nous dirons, égal, puis en manteaux. Allons avec le texte, notre propriété de ligne, et puis nous pouvons dire centre comme la valeur d'autres électeurs bien sûr, serait de gauche à droite, justifiant des choses comme ça. Allons-y et mettons-le en fait pour sauver ça. Retournons vers vous. Perot, euh, fait référence à la page et voilà. Nous avons maintenant aligné notre texte H deux au centre de notre page. Donc, les différents types de nos propriétés et leurs valeurs là-bas beaucoup et beaucoup dépend de l'élément ou de la balise à laquelle vous les appliquez réellement. Maintenant, avant de partir, laissez-moi vous donner un autre exemple. Ciblons le lien A juste ici qui dit que c'est visiter mon blawg. Ce que je vais faire, c'est que je vais en fait ajouter trois types de propriétés différents. Donc, tout d'abord, nous allons supprimer la valeur par défaut sur la ligne. Nous allons changer la couleur du texte, et nous allons également transformer le texte en majuscules. Alors faisons ça. D' accord, je vais passer sur deux crochets et j'ai l'étiquette A juste ici. Donc, après la cible, je vais ouvrir ces attributs de style, puis égal, puis dans les couches, répertorié le 1er 1 pour supprimer le soulignement va être la propriété de décoration de texte, et alors la valeur ici serait aucun dit non décorations. Allons au demi-côlon. La propriété suivante serait cette transformation de texte, et nous allons transformer sa lumière en majuscules. Et puis le dernier ici ne serait pas la couleur. Et allons-y avec tout son vert comme un exemple. Sommet du côlon. Donc, là, vous allez avec éditer trois propriétés différentes avec trois valeurs différentes. Allons de l'avant, Enregistrer et d'autres revenir à Explorer étaient d'abord une page. Et là, vous n'allez plus sur la ligne majuscule Etta et le texte est maintenant vert, donc vous pouvez ajouter plusieurs propriétés sur et plusieurs valeurs pour ces propriétés à une. Ah, un élément unique. Maintenant, le nombre d'attributs et de balises que nous avons couverts jusqu'à présent ne représente qu'une très, très minuscule fraction du nombre total de balises, et en fait il est disponible avec HTML. Maintenant, on va commencer à en couvrir un peu plus tard dans ce cours. Mais si vous êtes intéressé à obtenir l'accès oriental à toutes les balises, tous les attributs bien, vous pouvez aller au HTML pour calmer quatre attributs barre oblique, puis ici vous pouvez voir tous les types possibles hors attributs que vous pouvez appliquer à différents types de balises avec les explications à côté d'eux. C' est beaucoup, et puis vous pouvez également aller à des étiquettes slash ford. Et ici, vous verrez toutes les balises disponibles pour vous d'utiliser avec HTML. Maintenant, je ne vous recommande pas de passer tout votre temps à travers tout ça. Vous n'avez pas besoin de connaître chaque action, mais vous n'avez pas besoin de connaître chaque balise. C' est un peu comme si tu essayais de connaître chaque mot d'un particulier à la langue, disons, en anglais et en japonais. Vous savez que vous n'avez pas besoin de connaître tous les mots tant que vous connaissez les balises les plus couramment utilisées et était, allez, les attributs utilisés, puis les propriétés et les types de ces propriétés que vous pouvez appliquer à eux. Tu seras bon d'y aller. De plus, quand vous commencez à en apprendre davantage sur CSS, vous trouverez, disons, il est beaucoup plus facile de marcher avec et de faire des changements de style à vos éléments et plus quand il s'agit de style, à la place est que vous êtes beaucoup mieux d'investir plus de temps en direct dans la CIA dit que, ah style html. Alors c'est tout. Pensez est beaucoup de fortune un Allemand, même supplémentaire Israël va maintenant jeter un oeil au texte Matin plein. Je te verrai alors. 14. Formatage texte: bienvenue. Et j'espère vraiment que vous appréciez le cours que nous avons parcouru beaucoup sur HTML et Ah, continuons. Donc maintenant je vais vous montrer comment vous pouvez apporter des modifications de formatage à votre texte réel . Mais avant de pouvoir le faire, ajoutons un paragraphe réel avec quelques lignes. Donc, pour ce faire, je vais aller plus loin pour apprendre si un mec sur qui je dois des limites est essentiellement utilisé pour générer texte factice que les développeurs à des fins de test utiles. Donc je vais tout simplement y aller maintenant. Et c'est copier certaines de ces lignes ici et juste aller de l'avant et copier ça et je vais passer sur deux crochets. Ouvrons une nouvelle balise de paragraphe en bas. Juste ici, Pete. Étiquette. Ajoutez cela, puis fermons la balise p. Ok, alors comment pouvons-nous apporter des changements de formatage à notre texte réel ? Nous ne pouvons pas utiliser ce talent, en fait, en fait, parce que les attributs ne s'appliquent qu'aux balises, est-ce pas ? Mais si, par exemple, nous voulions faire une tortue conceptuelle ici, ce particulier voudrait la rendre audacieuse. Comment ferons-nous ça ? Ce que nous pouvons utiliser des types assis de tags et spécifiquement pour le rendre audacieux. On va utiliser une étiquette appelée la balise B, qui est, bien sûr, bien sûr, je représente l'audacieux. Oh, tag. Donc je vais venir ici maintenant et fermer cette taxe maintenant. La tour construite va être audacieuse. Ajoutons une autre balise pour utiliser le mode blanc. Ici. Faisons ça italique. Ok, faisons de ce jour un style italique. Je vais venir ici. Fermons celui-là. En fait, faisons usage du Mont Temple. Donc deux mots. Faisons ces deux-là en italique. Fermons que nous avons une autre balise, qui est la balise de soulignement, qui va être, bien sûr, e. m. Mais je vais juste dire les tags et puis nous verrons à quoi ils ressemblent une fois que nous avons d'abord un était venu ici près que nous pouvons également faire d'autres modifications supplémentaires, comme ajouter ou le fait dans des types de texte, sont indice 11 exposant. Alors faisons ce SAPIEN ici. Faisons de ça un super script. Il va y avoir S u P ne vous inquiétez pas, vous verrez ce qu'ils font réellement vous dans un instant et après le S je vais aller avant et fermer cela. Donc nous avons fait des S en SAPIEN un exposant Ah, voyons, Send nous a couchés. Nous allons faire les derniers s ici. Un indice qui est utilisé la balise S U B. Et puis c'est juste là. Fermez ceci. Oh, c' est vrai. Et, euh d'accord, allons-y maintenant et sauvegardons ça. Nous avons donc ajouté 12345 différents types de balises. Allons ici vers vous Mes brèves cloches sont rafraîchies La page Passons ici. Et bien, voilà. Maintenant, vous pouvez voir constricteur. Le professeur est maintenant audacieux. J' utilise mon propre tempérament est l'accent d'un magnat italique qui est également très similaire au style métallique . Mais et ici, vous pouvez voir dire p et le s est exposant, ce qui signifie qu'il va sur le dessus et ensuite dans les sélecteurs le S est un substrat. Richman est ça descend. C' est ainsi que vous pouvez apporter nos modifications de formatage à des guerres spécifiques, même des lettres spécifiques en utilisant des balises HTML. Maintenant, avant de partir, il y a une de la balise qui est très similaire à la balise en gras, et ce sera la taxe forte À titre d'exemple, ajoutons la balise forte à ipsum. D' accord, en enregistrant un peu, euh, je viens juste ici et enlève le 1er 1 Ok. Je vais aller de l'avant et sauver ça. Je reviens ici pour braver frais. Maintenant, vous pouvez voir Epsom est également maintenant audacieux. Mais une question est, quelle est la différence entre l'étiquette de bol et l'étiquette forte ? Si tout ce qu'ils font est en fait juste faire le texte en gras ? Eh bien, du point de vue de l'affichage, il n'y a pas de différence parce que les deux sont audacieux. Cependant, dans les coulisses, il y a aussi des arcs, mettant plus d'importance au texte qui a la balise forte. La taxe forte devrait être utilisée pour des textes très, très vitaux, très importants et qui ont un sentiment d'urgence. Les balises de balle qui est utilisé juste le rend en quelque sorte assez audacieux. Peut-être ah, nom d'une personne nom d'un endroit, trucs comme ça. Et puis cela devient également important lorsque vous commencez à travailler avec CSS parce qu'avec CSS, vous pouvez dire OK, tous les éléments, toutes les balises, tout le texte, tout ce qui a la balise forte, les rendre rouges, puis tous les textes qui ont le tag taureau font juste leur Michelob noir. Tu pourrais faire quelque chose comme ça. Donc, à la fin de la journée, ce n'est pas super important. Esther, que ce soit utilisé une étiquette forte ou la balise de balle, mais dans le but de le faire de la bonne façon utilisé une balise de bol lorsque vous voulez juste faire un texte en gras et puis si vous avez un certain texte qui est hors très, très une grande importance. Peut-être que comme un manteau ou quelque chose comme ça, vous pourriez utiliser l'étiquette forte pour eux. Nous en parlerons un peu plus à mesure que nous progressons dans CSS. Mais c'est ça pour le texto de Martin avec sa fortune, je pense que je te verrai dans la prochaine classe. 15. Block et éléments en ligne: continuons avec le cours, et maintenant parlons de quelque chose de très, très important, et ce sera le concept hors ligne et les éléments de bloc facile en HTML. Vous avez généralement deux types de différents types d'éléments. Vous avez les éléments de bloc, puis vous avez ce que nous appelons les éléments en ligne maintenant. La différence entre cela, aussi, est que les éléments de bloc sont des éléments qui, par défaut, occuperaient leurs propres lignes séparées. À titre d'exemple. Ici, vous pouvez voir que lorsque nous sortons des balises H un, les H deux et H trois et même la balise P, vous pouvez voir qu'elles se trouvent toutes sur des lignes séparées. C' est parce qu'ils sont des éléments de bloc par défaut. Donc, vous bloquez l'élément que vous avez affiché. Il occupe une ligne, donc il est seul sur une seule ligne. Chaque autre élément qui vient après, il poussera à la ligne suivante. C' est ce qu'on appelle des éléments de bloc. Maintenant, Ellen éléments à l'opposé. Vous pouvez ajouter autant d'éléments intérieurs que vous le souhaitez sur la même ligne. Maintenant, si nous revenons à notre texte un peu ici, nous avons identifié que le H avertit les balises P et tout ça. Ce sont des éléments de bloc. Cependant, vos éléments Angleterre seraient la balise A et les balises image. Donc, allons-y, par exemple, ici. Pourquoi j'ai le premier lien. Je vais aller de l'avant, et je vais simplement copier exactement le même texte. Et puis créons dans Oulan, puis collons le même lien à nouveau. Allons-y maintenant et en sécurité. C' est rafraîchir la page. Et maintenant, ici, vous pouvez voir que nous avons maintenant les outils côte à côte. Et c'est parce que les balises sont naturellement dans les éléments linéaires. Si vous avez copié dans h un tag sur un John Element et que vous le rythme de ceux-ci juste à côté d' un autre élément H un, je vous garantis que le 2ème 1 ira à la ligne suivante. C' est ainsi que les éléments de bloc marchent par défaut. Maintenant, vous pouvez réellement changer la façon dont ces éléments sont marchés par défaut. Par exemple, si je voulais forcer, disons que la première balise ici pour agir comme un élément de bloc, je peux réellement le faire , et bien sûr, il y aura une propriété pour cela. D' accord ? Je vais passer au style, puis après le Vela vert pour l'attribut de couleur, je vais ajouter une nouvelle propriété et ce qui va être appelé la propriété d'affichage, puis la valeur va être bloc. Bon, donc maintenant je dis au premier lien la première attaque à agir comme un élément de bloc. Allons-y maintenant et sauvegardons ça à moins que ça ne se produise. Je vais rafraîchir la page maintenant, et voilà. Maintenant, vous pouvez voir que la première balise est en haut, en haut, haut, ici tandis que la 2ème 1 est en bas afin que vous puissiez forcer les éléments de ligne à agir comme des éléments de bloc . Et par hasard, vous pouvez forcer les éléments de bloc à agir comme des éléments d'Angleterre. Donc, au lieu d'utiliser la valeur de notre bloc pour la propriété display, vous utiliseriez en ligne dans ce cas. Donc, cela vient de vous présenter le concept, éléments hors bloc et dans l'élément de ligne. Cela deviendra très important une fois que nous commencerons à nous plonger dans les ensembles de la CIA. Mais pour l'instant, qu'as-tu fait ? Tu connais la différence entre ces deux-là. Je te verrai dans la classe suivante 16. Le tag pause: Je veux attirer votre attention sur une balise particulière, que je pense que vous trouveriez très utile lorsque vous commencez à construire des boulevers avec HTML maintenant. Auparavant, je vous ai montré comment vous pouvez forcer les éléments aylan comme vous êtes une balise à agir comme un élément de bloc en utilisant simplement la propriété display, puis développer hors bloc droit. Cependant, il existe une meilleure façon d'obtenir exactement les mêmes résultats sans utiliser la propriété display. Alors que vous pouvez le faire dans ce cas en ce moment est, laissez-moi juste vous montrer que je vais aller de l'avant et supprimer la propriété d'affichage. D' accord ? Donc, si je veux forcer le 1er 8, je me soucie d'agir comme un élément de bloc. Ce que je peux faire est de créer une nouvelle ligne, puis je vais ajouter la balise, être et dans l'espace, puis quatre barre oblique C'est fondamentalement une balise de pause. Il dit HTML que hey, créant une nouvelle ligne pour le contenu qui doit suivre. C' est essentiellement ce que fait cette balise. Allons-y maintenant et économisons. Revenons en arrière, Teoh mes courts profils qui actualisent la page et là vous allez exactement les mêmes missiles obtenus mais beaucoup plus facile. Attendez. Maintenant, plus vous ajoutez d'étiquettes, plus vous freinez au maximum d'espace. Donc, titre d'exemple, laisse-moi juste copier ça, ok ? Et faisons ça. Je vais simplement aller de l'avant maintenant et coller plusieurs uns plus. Allons-y maintenant, économisez. Rafraîchissons la page et ah, Opps. Excusez-moi, actualisons cette page et maintenant vous pouvez voir les résultats. Maintenant, vous pouvez voir qu'il y a beaucoup d'espace entre le premier cerf juste ici et la deuxième étiquette. Maintenant tu te demandes peut-être Hey, Alex, attends une minute. Qu' en est-il de cette image ? Pourquoi cette image apparaît-elle en quelque sorte entre la première AG et la pâte A tag even ? Si nous allons à notre page ici, vous pouvez voir que l'image vient après la seconde. Une étiquette. En fait, ce que vous voyez ici est exactement correct. C' est parce que cette image est si grande. Vous pensez que c'est au-dessus de la deuxième attaque, mais ils sont en fait sur la même ligne. S' il remarque les années quatre-vingt ici et que l'image est juste à côté. C' est parce que l'image est vraiment, vraiment grande ? C' est pour ça que ça ressemble, Oh, l'image est en fait au-dessus de la deuxième attaque. Ce n'est pas le cas en fait sur la même ligne. Donc c'est tout pour la balise break. Merci d'avoir regardé. Je te verrai dans le prochain cours. 17. Divs et étiquettes: balistique sur deux étiquettes très importantes. Et ça va être le tag sourd et les tags span. Laisse-moi te poser une question, non ? Si vous vouliez changer la couleur, disons la couleur d'un certain mot. Disons, par exemple, que la renommée mondiale est ici. Comme si vous vouliez changer la couleur de l'orteil noir par défaut, disons rouge, comment ferais-tu ça ? Maintenant, nous savons qu'il existe une propriété appelée Color avec laquelle nous pourrions utiliser pour changer la couleur du noir au rouge. Et nous savons qu'il existe un attribut connu sous le nom de style que nous pouvons réellement utiliser pour mettre en œuvre ce changement, non. Mais le problème est que les attributs ne marchent qu'avec des balises. Maintenant, la fames n'est qu'un mot. Ce n'est pas le cas. Ce n'est pas une vraie bottes. Alors, comment pouvons-nous changer la couleur de ce mot ? Eh bien, c'est là que la balise span entre en jeu. Tu vois, avec la balise span, on peut cibler des mots. On peut prendre des lettres, des chiffres. Nous pouvons prendre n'importe quoi et utiliser la balise span pour changer la propriété de cet élément particulier . Alors, ils voulaient changer la couleur du noir au rouge en ce moment pour la célébrité. Je vais faire ça. Je vais ouvrir un nouveau tag et dire span, et ensuite je vais dire style. Maintenant, nous pouvons attacher les attributs de style à cette balise span, puis nous pouvons maintenant dire, Ok égal, puis dans les couches. Mais bien sûr, va maintenant dire appelant et puis va maintenant,bien sûr, bien sûr, à la valeur de Red semi Colon et allons de l'avant et fermons l'ouverture. Mais rappelez-vous, bien sûr que c'est une attaque. Donc, nous devons aussi fermer le tag. Donc après le mot, je vais entrer ici maintenant et ajouter et fermer l'étiquette est pan. Bon, donc voilà. Allons-y maintenant et sauvegardons ça. Rafraîchissons la page. Allons ici et voilà. Donc, vous pouvez aussi, les fams sont maintenant en rouge, grâce à cette balise panoramique de sorte que vous pouvez utiliser une travée tacked pour cibler les mots, lettres, les chiffres, tout ce que vous pourriez également changer par coïncidence la propriété que nous sommes traiter avec. Nous pourrions changer peut-être la propriété de ligne textile, mais pourrait changer la décoration de texte pour afficher la propriété et ainsi de suite. Et ainsi de suite pour la balise SPAN. Qu' en est-il de la balise Dev ? Maintenant, le remorqueur diff est utilisé pour cibler des sections sur toutes les pages Web. Il y a un exemple. moment, nous avons, Disons, par exemple, que vous vouliez cibler spécifiquement une section contenant le H jusqu'à la première Ah, une lumière d'étiquette. Je voulais donner à cette section particulière une couleur de fond différente. Nous utiliserions l'élément Dave dans un tel cas. Donc à titre d'exemple, parce que venir ici et ce que je vais faire, c'est que je vais ajouter un onglet pour pousser tout à la lumière. Revenons après la balise corporelle et les dégâts qui vont ouvrir la nouvelle étiquette, qui va bien sûr être le Dev Tacked E i V. Et puis ici, je ne peux pas aller de l'avant et fermer la balise sourde. Donc fondamentalement, nous avons maintenant donné cette toute nouvelle section, nous avons divisé cette section du reste hors de la page Web. Donc à partir d'ici, maintenant, je peux venir ici et dire OK, style def est égal et ensuite code, Um, je n'y vais pas. Entrez et dites arrière-plan, euh, couleur et disons Ah vert comme exemple. Allons de l'avant et sauvegardons ça. Rafraîchissez la page, et si je rentre à l'école maintenant, vous pouvez voir que la section contenait la tête et l'élément jusqu' à où nous avons l'âge auquel vous pouvez voir parce que c'est exactement la même couleur que la couleur de fond nous avons ciblé. Nous avons fondamentalement changé le dos et coloré cette section entière, en utilisant la balise Dev qu'ils ont élément. Donc c'est ce que vous utilisez normalement des dibs pleins maintenant. Techniquement, vous pourriez vous en sortir avec plusieurs taxes corporelles. Donc, par exemple, vous pouvez fermer la première balise à puce, vous savez, par ici, puis ouvrir une autre balise corporelle. Mais c'est juste un froid terrible. Et c'est comme le pire XML selon tous les temps. Alors, s'il te plaît, ne fais pas ça. Votre page Web ne devrait avoir qu'une seule balise de corps. Si vous avez besoin de sections divines de votre page bien utilisé l'attaque Dev. C' est ce qu'ils sont pleins. Donc c'est tout pour les Daves et ces étiquettes de pan. Pantex est une fois de plus utilisé pour cibler les mots. Laissez que vous pouvez utiliser détection pour changer les propriétés de ces types d'éléments, tandis que les Daves sont utilisés pour cibler des sections sur votre pigeon. Bien sûr, balises ou les éléments de développement sont des éléments de bloc, tandis que vos balises SPAN sont généralement dans des éléments de ligne. Donc c'est tout pour Dave et Span. Pensez à une veilleuse, je vous verrai dans la prochaine classe. 18. Combiner des éléments en ligne et bloc: Maintenant que vous êtes familier avec ce que sont les blocs et les éléments en ligne, faisons un peu d'avion autour. Ok, voyons comment nous pouvons réellement combiner l'Angleterre et bloquer des éléments ensemble à ce contenu de jeu . Donc, d'abord, je vais changer la couleur de fond pour le Dev que nous avons créé précédemment. Allons avec notre orange cette fois autour et pas vert pour que nous puissions voir nos étiquettes A. Sauvons ça. Ok, essayons quelque chose de drôle. Comme maintenant, nous avons le H one tag juste ici. C' est très, très grand. Que faire si nous avons réellement ajouté la balise AP à l'intérieur de la taxe H one ? Donc, fondamentalement, nous ajoutons maintenant un élément de bloc à l'intérieur d'un autre élément de bloc. Comment cela va vous affecter l'affichage ? Ce siège ? Ah, allons-y et supprimez ces mots supplémentaires. Ok, donc on doit faire pipi à l'intérieur de la H sur la taxe. Allons ici. Sauvegardons et voyons qu'il va y avoir une différence était venu ici première page et bien, comme contre le maintenant, il n'y a pas de différence. Il agit toujours comme une balise H one, donc il ajoute vraiment des éléments de bloc à l'intérieur d'autres éléments de bloc ne change rien vraiment . Ça va être toi. Vous obtiendrez à peu près le même résultat la plupart du temps. Cependant, et si nous venions ? Frappe où nous avons notre étiquette ? D' accord, allons-y avec la seconde. Une étiquette. Et si je venais ici et que je disais, tu sais quoi ? Je vais faire ça dans chaque étiquette. Bon, donc maintenant nous ajoutons la balise a à l'intérieur de la balise H 1. Voyons ce qui va se passer. C' est près de la balise H 1. Retournons ici en sécurité. Retourne, Teoh Broza fait référence à la page. Maintenant, vous pouvez voir que la deuxième balise, la deuxième attaque est maintenant aussi grande que le texte H un ici. La seule raison pour laquelle ça a l'air parce que, euh, toutes les lettres sont majuscules aussi. Celles ici sont toutes les petites villes, à l'exception du premier tee. Donc, c'est fondamentalement ce qui se passe lorsque vous combinez des éléments de bloc. S' il avait des éléments de bloc au lieu d'autres éléments de bloc, vous n'aurez pas vraiment de changement. Mais si vous ajoutez un élément Ellen en signe d'un bloc. Élémentaire Devine quoi ? L' élément bloc affectera la façon dont l'élément de ligne principale est affiché. Notez, cependant, que ce n'est pas toujours le cas. Il y a des cas où même si vous ajoutez un élément alien à l'intérieur d'un élément de bloc, vous ne verrez peut-être aucune différence. Ne vous inquiétez pas. Au fur et à mesure que vous commencez à travailler plus à l'aise avec HTML et que vous commencez à prendre différents types de tâches, travaillant avec différents attributs et balises et des choses comme ça, vous vous habitueriez à l'enfer. Ces choses fonctionnent vraiment. Mais pour l'instant, je voulais juste que vous sachiez que vous pouvez ajouter des éléments de ligne à l'intérieur des éléments de bloc et ceux-ci affectent la façon dont ces éléments intérieurs sont réellement affichés. Alors c'est tout. Merci beaucoup de fortune. Je te verrai dans le prochain cours. 19. L'étiquette tête: permettez -moi de vous présenter l'une des balises les plus importantes pour HTML. Et ça va être le Hedda Tag. Il s'agit d'une balise avec laquelle vous pouvez utiliser pour afficher des informations très importantes sur votre site , y compris sa description de titre. Vous pouvez même cibler des mots-clés pour S E O en utilisant l'attaque de tête. Et vous pourriez même inclure un style CSS aussi bien. Alors faisons ça. Je vais te montrer comment tu peux t'en servir d'abord. Et bien que nous allons créer un nouveau dans Dent et dans opium sur le HTML directement sur le taux que nous allons ajouter la balise head. Ce n'est pas Hedda Butthead, accord ? Maintenant, il tombe généralement sur la balise HTML. Donc, d'abord, je vais faire ici, c'est qu'on va changer le titre de notre site web en ce moment. Comme il est, regardez comme lui. Tout ce qu'il dit est de diriger le point html et cela n'a absolument aucun sens. Si nous avons téléchargé cette page en ce moment sur Internet, tout ce qu'il dirait c'est diriger vers l'extérieur. Mais cela signifie-t-il pour donner à tous les contrariés un titre descriptif ? On va retourner dans notre tête une étiquette il y a pour utiliser une nouvelle étiquette appelée la balise de titre . Et puis nous pouvons maintenant dire des tutoriels HTML pour les débutants. Mais allons-y et fermons ça. Ne venons pas ici pour sauvegarder le document. Va à Broza. Maintenant, faites attention à l'onglet. Allons-y, jamais frais. Et voilà. Maintenant, il reste. Html tutoriels pour les débutants Beaucoup plus descriptif. Maintenant, en plus, pour entrer avec la balise title, nous pourrions ajouter un autre type de balise et me laisser juste faire ceci. Je vais coller les balises déjà copiées précédemment. Et ça va être la méta tag. très, très, Tag très, très,très important et très utile. Fondamentalement, l'attaque Met peut être utilisé pour afficher les types de réglage hors informations très importantes telles que le caractère définir notre description hors du site. Les mots-clés ciblaient un PDG et ainsi de suite. Maintenant, le 1er 1 lui ici est le jeu de méta et vous envisagez de valider notre tableau de bord 8. Qu' est-ce que c'est exactement ? Eh bien, si vous commencez à inclure des symboles sur votre site tels que le symbole at, les choses de symbole de pourcentage comme ça. Il y a des façons qu'il ait réellement du code HTML. Unités utilisées pour afficher ces types de caractères. Maintenant, dans d'autres, pour votre navigateur, pour être en mesure d'interpréter ces symboles HTML, vous devez inclure le jeu de caractères avec lequel vous marchez. UTF 8 est généralement l'option préférée car elle est universelle et elle contient la majorité écrasante des symboles et des caractères. Le seul autre cas où vous ne pouvez pas utiliser utf huit et utiliser une valeur différente serait si vous créiez le site Web en utilisant une langue différente, peut-être l' espagnol ou le grec ou quelque chose comme ça. Mais d'habitude, ça va être mangé. C' est pour ça que ça sert. Maintenant, vous avez une description. Meta name est égal à description, puis le contenu est essentiellement des tutoriels web gratuits. Dans ce cas, moment, nous décrivons tout le contenu du site Web. Maintenant, ici le méta nom est égal à mots-clés et dans le contenu html CSS. Ce sont les mots-clés ciblés pour S e O. Donc, si vous voulez optimiser vos pages pour S e O, c'est exactement comme vous le feriez. Et enfin, vous avez aussi le méta nom égal auteur. Ceci est si vous souhaitez inclure le nom de l'auteur hors du site Web ou de la publication de la page. Et puis, vous savez, c'est exactement comme ça que vous pourriez faire ça. Encore une chose à mentionner, ce serait le style. Et vous pouvez réellement inclure un style CSS à l'intérieur de votre attaque de tête. Comment on fait ça ? Ok, disons, par exemple, nous voulions changer la couleur d'arrière-plan de tout notre site Web. Non, par ici. Nous avons déjà le style de corps sont égaux à l'arrière, et Qallab serait vraiment. Le fait est que cette balise corporelle ne va affecter que la page d'accueil ou quelle que soit la page sur laquelle se trouve cette cour . Cela n'affectera pas toutes les pages d'un site Web. Cependant, si nous voulions cibler toutes les pages sur nous à toutes les balises de corps de notre côté à la fois, nous pourrions utiliser CSS, alors laissez-moi juste voir de quoi je parle. Je vais enlever tout ce que nous avons ici et laisser l'attaque du bateau tel qu'il est . Vérifie ça. D' accord. Je vais inclure le nouveau style de tag off, puis à l'intérieur de la balise de style que nous allons maintenant ajouter. L' élément que nous voulons cibler dans ce cas va être l'élément corporel, non ? Donc ça va être du corps, puis des accolades. D' accord, ouvre une nouvelle ligne. Et maintenant, ajoutons la propriété. Et c'est ce que j'allais être. Couleur de fond et, disons, Aqua en fait remonter. Bon, allons-y avec le bleu comme exemple et en semi-colon maintenant, nous disons, OK, OK, tout le monde élément sur un site Web change son dos sur la couleur en bleu. D' accord, ajoutons un de plus. Jetons un coup d'oeil à D L I. Ellen que nous avons ici comme Apple Challenge, disons, voulait leur donner une seule couleur off. Disons vert comme ça pour faire ça. Très simple à base de plantes. Il suffit de dire L I que ce sont les cibles de l'élément et White Kali accolades. Désolé pour ça. Cola accolades, puis dans une nouvelle ligne, on va dire couleur et ensuite on dira demi-côlon vert. Maintenant, fondamentalement, nous disons que chaque élément allié sur un site Web change de couleur en vert. Allons-y maintenant et fermons la tête une étiquette. N' oubliez pas de fermer votre étiquette de tête. Très, très important. Allons-y maintenant et sauvegardons ça. Allons-y. Sur quoi ? Vous êtes Broza ? Eh bien, d'abord la page et vous y allez. Alors les premières choses d'abord. Nos pages ont maintenant le dos culo off blue. Mais en bas ici, vous pouvez voir que les éléments Alliés sont en vert et son ok, vert et bleu n'est pas une bonne combinaison. Alors faisons ça très vite. Changeons la couleur de fond du bleu à notre disons gris à la place. D' accord, revenons ici. Sauver Retourner. navigateur Teoh fait référence à la page et vous y allez. Donc, maintenant, vous pouvez voir que chaque élément allié a été défini sur vert. Et puis, bien sûr, notre couleur de fond est bien définie. Nous avons défini une couleur Bergen spécifique pour le Dave ici. C' est pourquoi il a encore sa couleur orange. Ainsi, l'oncle du sac d'une page n'écrasera pas la couleur de fond d'un jour de l'intérieur de celui-ci. Donc, c'est exactement comment faire usage de la tête. Je voulais dire et croyez-le ou non. Ce que vous voyez ici Ce style, c'est votre première introduction à voir Évaluer. C' est ce à quoi nous sommes adaptés en tant que CSS interne. Parce qu'il est contenu à l'intérieur. Souvent, chaque saison régulière de document général serait un fichier distinct à part entière. Et puis vous devrez lier votre document HTML à ce document cesse. On en parlera un peu plus tard. Mais pour l'instant, c'est votre introduction à l'attaque de tête. Très, très important. Étiquette très vitale pour les malades extrêmes. Merci d'avoir regardé. Je te verrai dans le prochain cours. 20. HTML 5 Éléments Semantic: que vous commencez à finir cette section sur HTML Elect pour jeter un oeil aux cinq éléments sémantiques H similaires . Alors, quels sont exactement ces éléments sémantiques ? Eh bien, ils sont principalement utilisés pour fournir des structures à votre contenu. Et il y a un important plus large est parce que, en donnant votre contenu, les moteurs de recherche structurels seraient mieux en mesure de comprendre ce qu'est votre contenu. Et par conséquent, vous êtes en mesure d'optimiser votre contenu beaucoup mieux pour les moteurs de recherche. Et en plus de cela, il rend votre contenu tellement plus facile et tellement plus propre à lire et à comprendre. Jetons un coup d'oeil à un peu. Ensuite, vous avez, comme l'article à part, vous avez le pied de page que vous pouvez diriger vers le haut. Tu as le clave. Maintenant, avant que je continue ces têtes, une étiquette ici est différente de celle dont nous avons parlé précédemment. Quelle est la différence ? Voir, la balise head est utilisée pour contenir des informations que vous ne verrez généralement pas sur l' extrémité frontale. Informations sur la clé était votre cible dans le titre de votre site Web est la description, le caractère dit, et ainsi de suite sur les scripts ce sont les types d'informations contenues à l'intérieur de votre tag tête . Votre attaque à la tête, en revanche, contiendrait généralement des informations telles que le logo de votre site Web, le menu principal et ainsi de suite. À titre d'exemple, Jetons un coup d'oeil à mon bloc ici. Si j'allais briser ça, tu vois quoi ? Où ont le logo, puis le menu principal. Ça serait à l'intérieur de ma tête. Une étiquette. Et aussi parce que si je vais à n'importe quel poste ou n'importe quelle page sur mon site, les informations contenues dans l'attaque de tête sont généralement cohérentes. en va de même pour la balise Fouda, qui contient des informations dans la section pied de page de mon site. Et ça va maintenant, vous pouvez voir qu'on a une section à propos, des enfants assis et des médias sociaux. Cela serait contenu à l'intérieur de l'étiquette alimentaire, qui est celle que vous voyez ici. Donc, ces éléments sémantiques contiennent des informations sur la structure et aussi le contenu de notre site Web. Maintenant, vous avez l'élément maintenant juste ici. Cela serait utilisé pour contenir votre menu de navigation principal. Et puis vous en avez d'autres comme votre article de section principale, il pourrait généralement changer. Ah, ceux-là parce qu'ils sont essentiellement utilisés pour contenir Ah, le contenu réel de votre site Web et ici en ce moment, vous pouvez voir un peu comme une panne. A droite La ventilation de la façon dont ces éléments thématiques sont utilisés. Donc, en haut, vous avez, genre, l'étiquette Hedda en bas. Vous avez la nourriture, et puis vous avez le knave contenant le menu de navigation principal et puis le contenu réel , vous pouvez utiliser vos éléments comme la section. Vous pourriez utiliser l'article. Tu pourrais même utiliser des dibs. On a déjà parlé de donne. Vous n'avez pas forcément à le faire. Votre article sectionnel puis attribué est généralement utilisé pour contenir des informations qui seraient de décider de votre page dans ce cas en ce moment. Peut-être comme une barre latérale. Je ne fais qu'un exemple. Donc, nous allons marcher beaucoup plus loin avec ces éléments lorsque nous commençons à construire notre site Web réel . Mais pour l'instant, je voulais juste vous présenter parce qu'il est important que vous sachiez qu'ils existent et ce qu'ils font réellement. Alors n'hésitez pas à aller sur ce site, sont libérés caméra de la cour ogg, et puis vous pouvez rechercher HTML cinq éléments sémantiques. C' est un article très, très descriptif. Ils vous décriront ce que sont ces éléments et comment ils sont utilisés. Mais comme je l'ai dit, Alia sera regardée de plus près quand nous commencerons à construire notre site Web. Merci d'avoir regardé. Je te verrai dans le prochain cours. 21. Conclusion HTML 5: Eh bien, vous l'avez là. Nous sommes arrivés à la fin de cette section couvrant HTML 5, et vous avez beaucoup appris. Maintenant, vous avez appris sur les balises XML, les attributs, la propriété étalon est leurs valeurs, éléments et bien plus encore. nous n'avons Bien sûr, tout couvert sur une victime de 5 personnes. Nous n'avons pas parlé de huit formes similaires. On n'a pas parlé de tables non plus. Nous les examinerons dès que vous commencerez à construire nos sites. Ça ne t'inquiète pas. En attendant, si vous voulez en savoir un peu plus sur HTML sur leur propre temps libre, cependant loué, allez à W trois écoles qui viennent et puis consultez l'onglet pour HTML. Ici, vous pouvez voir toutes les informations nécessaires et a continué toutes sortes d'informations sur les différents types hors éléments et balises et attributs et tout ce qui est. Donc, si vous êtes intéressé, je vous recommande de vérifier W trois écoles Ne venez pas, mais c'est tout pour l'instant. Pour Sistema 5, vous avez appris les bases. Passons maintenant aux enfants sur les bases de CSS 22. Aperçu de CSS: D' accord. Donc, bienvenue officiellement dans la section CSS et nous avons fini avec HTML pour l'instant. Aller de l'avant. Tout est question de soeurs. À partir de maintenant, jusqu'à ce que nous arrivions à la section trois, où va maintenant combiner XML et CSS pour construire ce site Web particulier que vous regardez  ? Donc, dans cette section, je vais vous présenter les bases de CSS et aussi parler des types de designs les plus courants que vous pouvez appliquer avec CSS. Maintenant, CSS est un sujet très, très, très large. Je pourrais faire un cours de 10 heures juste en parlant de CSS, mais nous n'avons pas 10 heures. Donc, ce que je vais faire dans cette section, c'est que je vais vous présenter les types les plus populaires de dessins avec lesquels vous ne pouvez pas jouer, dit CS. Et puis dans la troisième section, quand nous construirons ce site particulier, je vous présenterai encore plus. Arcia dit des compétences. Alors asseyez-vous, détendez-vous et j'espère que vous apprécierez cette section. Commençons 23. Qu'est-: tout cela est un bienvenu dans cette toute nouvelle section où nous allons parler de C. S. Et la première question évidente ici sera ce qui est exactement C S s, stents CSS pour les feuilles de style en cascade. Maintenant, je sais que cela n'a aucun sens, mais avec le temps, il se souviendra maintenant aussi quand nous parlons de HTML et nous avons utilisé l'analogie d'un site Web étant un corps humain et html bean le squelette Eh bien, CSS serait fondamentalement n'importe quel code qui rend HTML look mieux. C' est essentiellement ce que CSS serait. Donc, si nous devions utiliser l'analogie du corps humain, saisit serait comme les muscles de la peau, les cheveux, tout ce qui rend le corps humain meilleur look. Donc CSS forme le style et le cadre de base de chaque plage Web sur Internet. Ce n'est pas pour voir que vous pouvez avoir du style sans C dit que vous pouvez. Je veux dire, nous vous avons montré comment faire des changements de style à votre c'est Tim L. Notre document abusant juste du HTML pur. Mais CSS, idéalement, devrait être le facteur allemand parce qu'il rend la queue sont tellement plus facile et beaucoup mieux si Carlos arrière-plans, effets de vol stationnaire, animations de style, n'importe quoi qui peuvent rendre un site Web plus attrayant. C' est généralement fait avec C. S. Donc, c'est une brève introduction à CSS allemand même oeufs vidéo, où nous allons maintenant commencer pied avec CSS. 24. Téléchargez les fichiers: d' accord. Avant de passer au reste du cours CSS, je veux que vous fassiez quelque chose pour moi attaché à cette vidéo. Vous trouverez un fichier zip, et lorsque vous téléchargez et sur zip ce fichier, vous devriez avoir ces trois fichiers. Fondamentalement, vous aurez un, ah, un index de fichier html un style qui nous définit fichier. Et aussi vous auriez un dossier contenant, ah, trois images différentes. Donc, en fonction de la plate-forme sur laquelle vous regardez ce cours ou que vous suivez ce cours, vous le trouverez soit attaché à cette vidéo, soit vous pouvez même le trouver dans vos projets. Sectionnel, s'il vous plaît allez-y. Téléchargez le fichier ZIP sur zip it et confirmez que vous avez accès à ces documents avant de continuer avec l'Ouest hors du parcours. 25. Syntaxe CSS: Eh bien, j'espère que vous n'avez pas eu de problèmes. Construire dans n obtenir l'accès aux fichiers. Et si vous ne l'avez pas fait, s'il vous plaît allez-y maintenant et ouvrez le fichier CSS point de style en utilisant les crochets, TextUtil ou tout autre texte un peu que vous utilisez. Alors laissez-moi vous montrer exactement comment la syntaxe de CS dit est. Fondamentalement, vous allez choisir un élément dans lequel vous voulez appliquer votre style. Donc, si nous allons à notre index dot html, nous avons la balise h one juste ici. Essayons donc d'appliquer un peu de style à notre H. On va venir ici tout de suite et dire H 1 C'est les avions élémentaires qui disent à, puis Kohli crochets et ensuite à côté de la calibrée. On va jeter un coup d'œil à une propriété de cet élément. Il voudra jouer ce style, aussi. Dans ce cas, disons, voulait changer la taille de la police et il faudrait la rendre un peu plus grand. Allons donc avec 50 pixels, puis point-virgule. C' est ici la syntaxe de base de tout code CSS. abord, vous avez l'élément que vous appliquez cette indication aussi vous aurez vos accolades de collègue , puis à l'intérieur de l'étalonnage aurait la propriété. Dans ce cas, il est amusant taille deux-points, puis la valeur de la propriété, puis un demi-deux-points. Ajoutons un de plus. Allons avec le texte. Ah, ligne et allons-y avec le centre. Donc, mon côlon et vous y allez. Allons-y maintenant et sauvegardons ça. Maintenant, si nous essayons de passer à un navigateur et se réfère à Page, vous remarquez qu'il n'y a pas eu de changement La cible H un obtenir CSS sélectionné. Il est toujours à gauche et la taille de la police n'a pas encore changé. C' est parce que même si nous avons ce style ce fichier situs, il n'est pas lié à notre fichier html point d'index. Nous devons donc les relier tous les deux. Comment faites-vous ça ? Je vais partager la toute prochaine vidéo. Je te verrai alors 26. Relier HTML et CSS: Bienvenue maintenant. Auparavant, nous avons ajouté avec succès du code à notre style DOT dit son fichier, Mais malheureusement, parce que nous n'avons pas lié le style que les villes sont tombées à notre index dot fichier html les changements , on n'a pas appliqué. Donc, la grande question en ce moment est de savoir comment lier notre fichier de style avec notre fichier HTML ? Eh bien, pour ce faire, fraisage vers index point html, puis à l'intérieur de la balise head, consultez cette nouvelle action. Mais ça s'appelle Link. Bon, donc fondamentalement, ce mot est Hey, nous ajoutons un lien et la première vallée va être rail égal et ça dans la feuille de style manteaux . Donc fondamentalement, la baleine est une façon de dire Ok, quel genre de lien est-il qu'il y aura dans ce cas en ce moment. C' est un fichier de feuille de style, puis la prochaine vallée sera pour la référence H. La source réelle. Le lien vers ce fichier, le lien vers ce fichier talentueux et tout comme avec les images, parce que le style qui définit fichier et index dot fichier html dans exactement le même dossier, il va juste être très simple. Style point CSS. Si, bien sûr, cela si la cellule que les sœurs sont tombées était à l'intérieur d'autres styles plus froids, par exemple, alors l'Atria Fear , par exemple, serait des styles Ford slash puis des sœurs stylisées, tout comme avec des images. Bon, donc voilà. Nous avons réussi à ne pas le Lincoln. Allons-y et fermons ça. Je vais venir ici tout de suite. Sauvegardez mon dossier. Et maintenant, allons-y. Teoh Boza, actualise la page. Et voilà. Maintenant, vous pouvez voir que le H est maintenant aligné sur le centre. De plus, la taille de la police a également été réglée sur 30 pixels. Alors félicitations. Nous avons maintenant lié avec succès notre fichier de style dot CSS avec notre fichier index dot html. 27. La puissance du CSS: Eh bien, comebacks dans une vidéo précédente est lié avec succès notre document HTML avec notre feuille de style CSS . Mais la grande question en ce moment est de savoir ce qui est si spécial au sujet de CSS ? Je veux dire, très bien. Nous avons pu l'ajouter. Taille amusante et aussi une ligne sont 81 attachés au centre. Mais nous aurions pu le faire avec HTML Isabel, est-ce pas ? Alors pourquoi CSS ? Pourquoi même embêter le style avec CSS ? Eh bien, vous voyez, la vraie puissance de CS dit réside dans sa capacité à apporter des changements de style à plusieurs éléments partir d'une seule ligne de code. C' est maintenant un exemple. Si je suis retourné à mon index html point ici, vous pouvez voir que nous avons plusieurs balises de trois ans. Attendez, par exemple, nous avons la politique entre parenthèses est un H 3. Ted. Nous n'avons pas toutes les étiquettes ici aussi. On a une autre étiquette H 3 ici, une autre ici. Si nous voulions donner à nos H trois tags une couleur particulière avec HTML, nous devrions aller à chacun individuellement et ensuite dire OK, c'est trois ici, équivaut aux follicules de texte bleu, puis passer à la couleur de texte suivante bleu et ainsi de suite et ainsi de suite Avec CSS, nous pouvons changer le cool off chaque étiquette h trois de juste écrire. Ah, très petit morceau de code. Comme ce qu'on a ici. Par exemple, si je suis venu ici en ce moment et que je l'ai dit trois, puis donnons-lui une couleur et nous allons dire que la couleur ici est bleue. Voyons ce qui va se passer. Je vais venir ici tout de suite. Dossier. Allons Ah, en sécurité. Et maintenant, allons-y. Ce que vous Rosa venir ici fait référence à la page et maintenant vous pouvez voir que chaque étiquette d'âge de trois ans est maintenant en bleu comme ça. Donc, ce juste ici est la vraie puissance hors CSS. Vous pouvez apporter des modifications à tous les types d'éléments à partir d'un code de ligne unique. C' est un simple comme ça. Mais si alors voici ceci Ok, vous pouvez affecter plusieurs types d'éléments en même temps. Quoi ? Je veux dire, voilà ça. Ok, donc on a un Chuan, on a h 2 b si on le voulait. Pour une raison quelconque, si vous vouliez l'ajouter exactement le même style dans ces deux types d'éléments, nous pouvons également les faire. Donc tout ce que je ferai dans ce cas, c'est de venir ici après 81, j'ajouterai un coma et puis trois heures. Maintenant fondamentalement, je dis pour tous H un et H trois remorqueurs, leur donner un téléphone, dit de 30 pixels et les alignés au centre. Vérifions ça. Revenir ici, Save. Retourne à ma Boza. Eh bien, abord la page et juste comme ça, vous pouvez voir en ce moment que les discussions H 1 et A 3 sont tous alignés au centre et ils ont tous une science de 30 pixels juste comme ça. Donc, voici la vraie puissance CSS ayant la possibilité de faire plusieurs changements de style à plusieurs éléments tous en même temps exactement. Et la meilleure chose, c'est que si à l'avenir je voulais changer d'avis et dire, Tu sais quoi ? Plutôt que de donner à ces gars une taille amusante de 50 pixels, je veux le changer à 24 pixels. Tout ce que nous avons à faire, c'est de venir ici. Partager développé 50 à 24 et c'est tout. J' enregistre mes modifications et tous les H et les tags HB sont affectés exactement avec exactement la même valeur. Je n'ai pas à aller à chaque individu h un Taegu, chaque individu pour attaquer et faire le changement là-bas. Donc là dans les mensonges, la vraie mise hors tension CS est la possibilité d'apporter plusieurs modifications à plusieurs éléments, tout à partir d'une seule ligne de code hors ligne. 28. La propriété Famille: Parlons de l'une des propriétés les plus importantes que vous pouvez jamais définir sur votre site Web , et ce sera la propriété de famille de polices extrêmement importante. Et ce n'est pas suffisant pour vous de fixer une valeur et de dire, Ok, oui, c'est la famille des fonds de développement. Je vais passer à autre chose. Non, tu dois être très prudent. Et il ya certaines règles qui s'appliquent Chaque fois que vous avez essayé de définir une famille amoureuse. La famille avant essentiellement, est la propriété. Ils dicteront le genre de front que vos œuvres utiliseraient maintenant, idéalement, un nouveau document HTML. Il existe trois types principaux de balises que vous pouvez parler et que vous pouvez cibler votre tête. Zéro chacun veut 86 Vous pouvez le prendre à un balises P, qui serait le texte normal, et vous pouvez également prendre vos huit balises ainsi. Hors cours. Il y avait certains cas où vous pouvez également obtenir comme vos moindres éléments et ainsi de suite. Mais les trois grands sont généralement vos en-têtes, votre texte normal et vos liens Heiple. Maintenant, voilà la bonne chose. Il existe différents types de familles amusantes, des milliers et des milliers d'entre eux, mais il existe aussi différents types de navigateurs. Vous avez Chrome Firefox safari dans quelqu'un. Tous les navigateurs ne sont pas en mesure d'interpréter tous les types ou les familles de fonds. En fait, il n'y a pas un seul navigateur capable d'interpréter chaque type de famille frontale. Ce que cela signifie est que vous pourriez choisir une famille de fonds particulière qui aurait l'air très bien sur les effets les plus à gauche. Les perles le sont, mais sur Coombe, ça peut sembler différent. C' est parce que l'équipage peut avoir des difficultés à lire ou cet avion, ce genre de famille amusante. Rappelez-vous que vos frères sont comme des interprètes. Ils vous interprètent, XML et Sisters code, puis ils affichent ce qu'ils ont interprété. Mais cela étant dit, il y a mis en face des familles de la constante d'être en sécurité Web. Ce que cela signifie, c'est que ce sont des familles amusantes que tous les navigateurs peuvent interpréter. Maintenant, si vous passez à W trois écoles point com et vous cherchez les ensembles de documents de formulaires sécurisés Web . Ici, vous pouvez voir les familles de téléphone qui sont en sécurité. Vous avez les sept fonds, vous avez les fonds sensoriels. Vous pouvez voir les exemples juste là. Vous avez vos téléphones de l'espace modèle ainsi donc ce sont les familles de téléphones que chaque type hors navigateur serait en mesure d'interpréter. Ceci est important parce que vous voulez généralement définir une famille de fonds de secours chaque fois que vous avez choisi votre famille de fonds principale. Ce que je veux dire, c'est, si vous choisissez une famille de front personnalisée, vous voulez qu'il revienne de sorte que dans le cas d'un navigateur particulier, je ne peux pas interpréter votre faux choix pour la famille avant. Il interprétera les deuxièmes métiers, ce qui sera votre faute de retour. Et vous voulez toujours définir l'une de ces familles amusantes ici comme option de secours. Une chose à mentionner est que pour votre texte régulier, vous avez sept fonds et vous en avez. Donc, si vous voulez généralement aller avec ces chansons, monsieur, nous avons Ce sont les téléphones qui n'ont pas, comme le style, par exemple, ici où vous avez vos fonds désolés. Jetez un oeil aux tees, par exemple, et au G. Vous pouvez voir comment il est stylé lorsque vous avez du texte et que vous avez beaucoup de texte. Cela pourrait devenir un peu plus difficile à conduire, mais avec Sunseri, si vous pouvez voir le thé est la scission normalement le Jésus jouait normalement. Texte de Sophia. Vous voulez généralement aller avec l'une des chansons Serif polices. C' est comme ça que vous voulez aller pour vos titres. Vous pourriez utiliser un des téléphones Seri. Je pense que ce sera tout ira bien. Vous n'aurez pas trop de problème là-bas. Donc une autre chose à mentionner est que chaque fois que vous établissez vos familles de fonds, vous ne voulez pas y aller. Vous n'utilisez pas plus d'un maximum de trois types différents de familles de téléphones sur votre site Web. En règle générale, vous définiriez une famille pour vos titres pour vos titres, une autre famille amusante pour votre texte normal, puis peut-être une autre famille d'amis pour votre hyperlien vos balises A. Mais vieux après vous recommander d'aller avec pour financer les familles un pour vos titres, puis un pour vos hyperliens annuels de texte régulier. C' est généralement la façon dont vous voulez aller, donc pas plus de deux ou trois familles de fonds sur votre site Web. Ok, revenons à notre document HTML. D' accord. Quand je veux faire ici, c'est ça. Je vais vous montrer comment vous pouvez définir la famille avant pour vos balises P que votre texte normal allait commencer. Voyez, évaluez. Ce que je vais faire, c'est dire P et puis ouvrons notre style. Une option. Maintenant, regarde ça. Je vais dire, Fund Family, accord, et je vais dire des chansons. Sarif sera la famille des fonds. C' est ça. Quelqu' un appelle ce qui arrive ici. Sauvons. Passons à votre navigateur Maintenant, notez que la famille de téléphone par défaut est généralement fois New Woman. C' est généralement la famille amusante par défaut pour les pros. Comme donc, nous allons faire référence à la hauteur maintenant et comment vous pouvez voir qu'il est changé pour les chansons. Sirleaf. Ok, parfait. Sun Surf est l'un des coffre-fort Web. Fonsi concède ici, fils Sarif. Mais nous allons utiliser une famille de forme différente maintenant comme notre famille de fonds primaire pour les balises P. Maintenant, Google a presque 1000 différents fonds Google, et l'un de mes téléphones préférés est le Mont Plusieurs front. J' aime utiliser ce front pour mon texte normal. C' est celui qui me laisse te montrer. C' est juste là. C' est ça. Plus de Sarah, non ? Allons-y et essayons ça. Je vais retourner à mon document HTML et si c'est dire un peu de Sarif. Nous allons maintenant venir ici et dire Mont Serve À la bonne nouvelle sur Mont Seventh est le fait que presque chaque navigation je peux l'interpréter aussi bien. Même si c'est une coutume, Google a téléphoné. C' est toujours en sécurité. Alors je vais dire Monserrat, sauvegardons ça. Revenons à un navigateur courageux en se réfère à la page, et maintenant vous pouvez voir le téléphone a changé en mois. Sarah. Impressionnant. Cependant, même si Monster, qu'est-ce qu'une police Google ? Et vous avez tous les téléphones Google ici, pas tous peuvent être interprétés facilement par les navigateurs. À titre d'exemple, venons ici. Tu vois, il y a un autre front ici appelé Sophia. Très bien, Justice un exemple. Maintenant, venons ici. Donc, voici, c'est là. Sophia. C' est une terrible famille amusante pour ton texte régulier, mais je vais l'utiliser juste pour montrer de quoi je veux parler. Droit ? Changeons la valeur hors famille de téléphone d'un ensemble pour semer la peur. Au lieu de cela, Sophia, reviens ici en sécurité. Passons à notre brave navigateur. Fait référence à la page. Vous remarquez une différence C'est le changement. Ce n'est plus un monstre. Mais ce n'est pas Sophia. Regarde comment Sophia a l'air de voir que c'est une laisse très, très viciée. Mais ce que vous avez ici, c'est fois nouvelle femme parce que le brave frère ne peut pas interpréter la famille amusante de Sofia. Si je passe à 5 Fox et que je me rafraîchis, tu peux voir que c'est exactement la même chose. Aucune différence n'est toujours la même fois. Nouvelle femme. C' est parce que nous de Bell ont généralement du mal à être en mesure d'interpréter la famille de fonds E Sophia . Donc, dans ce genre d'instance, vous voulez définir une option de secours par défaut. Donc dans ce cas, maintenant, je vais ajouter mon coma et dire les fils Sarif comme l'option de retour complet. Retournons ici. Sauvez Coach. Vous êtes Broza. Eh bien, abord la page et maintenant vous pouvez voir San Serif est maintenant en action parce que le brave navigateur ne peut pas interpréter Sofia. Donc, c'est exactement pourquoi vous voulez définir une option de secours. Mais si vous vouliez vraiment utiliser cette famille Sophia souvent ? Eh bien, il y a un moyen de faire ça. Ce que vous voulez faire, c'est que vous voulez aller sur votre document HTML et ensuite où vous avez votre tag tête, je vais coller du code ici et ici c'est. Fondamentalement, je fournit le lien vers la famille de téléphone de Sophia et c'est juste ici. C' est un P s et puis les téléphones que Google ap istock Com Force l'année dernière dit, Et puis les appels familiaux. Sophia, n'y allons pas et ne gardons pas ça et voyons ce qui se passe. On va retourner à mon brave Broza, qui se réfère à la page, et maintenant vous pouvez voir que c'est la famille Sofia qui est sur la famille en action ? C' est parce que nous avons dit dans le document HTML où nos balles je peux trouver la famille de téléphone . Donc, dans les cas où vous définissez un fonds Google régulier pour votre texte et qu'il ne semble pas fonctionner, vous voulez aller à votre tag tête et ensuite joindre ce genre de lien. Donc vous remplacez Sophia par le nom de l'autre de la famille que vous voulez vraiment utiliser. Mais cela a été dit, laissez-moi vous dire que plus tard dans ce cours, je vous montrerai une meilleure façon de vous en sortir. Lincoln Ah, coutume. Formulaires Google à votre document html. Cela fonctionne parfaitement bien. C' est juste que cela pourrait avoir un impact sur la vitesse de votre site Web lorsqu'il se charge. Parce que maintenant votre site Web, il devra tout d'abord lié à Google, puis trouver la famille amusante que vous avez spécifié hérite généralement beaucoup mieux d'avoir cette famille amusante commencer localement sur votre serveur Web . Je te montrerai comment tu peux faire ça plus tard. Alors ne vous inquiétez pas. Je vais retourner ici et changer Sofia. Teoh Monserrat ne servira pas ça. Retournons ici. Sauvons. Retournez à un Broza étaient d'abord une page et là vous allez. OK, donc c'est typiquement ça pour les familles amusantes à nouveau. Juste un résumé rapide. Vous disposez de vos fonds sécurisés Web et vous souhaitez définir l'un d'entre eux pour votre option de secours pour votre texte. Vous voulez généralement aller avec les fonds sensoriels pour votre tête que vous pouvez aller avec un fonds Serie et aussi pour les téléphones Google. Beaucoup d'entre eux marcheraient normalement avec vos navigateurs. Cependant, dans certains cas où il ne semble pas marcher, alors vous voudriez aller à votre balise HTML head, puis ajouter ce lien ici. Ensuite, ajoutez le nom de la famille de téléphones que vous souhaitez lier à votre site Web. Donc c'est tout pour le plaisir. Famille. Merci d'avoir regardé. Je te verrai dans le prochain cours. 29. Autres propriétés de police: déjà. Nous avons donc traité avec succès la famille de fonds dans la vidéo précédente. Mais maintenant, jetons un oeil à quelques propriétés de texte supplémentaires avec CSS. Et comme vous pouvez le voir, j'ai déjà ajouté pour des propriétés supplémentaires. Nous avons la taille de la police, qui, bien sûr, indique la taille d'un texte. Cela peut aller de n'importe où d'un pixel à 10 000 pixels, et cela dépend vraiment de la taille ou de la taille que vous voulez que vos lettres apparaissent. Et puis le poids avant vous a essentiellement rafraîchi. Quelle est l'audace ou la lumière du texte. Maintenant, la valeur ici que vous voyez est 600. Mais vous avez d'autres valeurs, comme gras, plus léger. Donc je suis juste enlever ce 600 nous allons voir développer que nous avons. On a donc un rocher plus léger, plus gras et normal. Normal est, bien sûr, la valeur par défaut, mais comme je l'ai dit, mieux que d'aller avec un bloc plus léger, vous pouvez le spécifier en nombres que vous pouvez aller avec, comme 300 par exemple, 405 100. Donc, titre d'exemple, allons-y maintenant et sauvons Thistle. C' est la différence. Donc c'est 300, ce qui est très, très léger. Revenons à l'on va le garder frais. Donc maintenant, vous pouvez voir que c'est la valeur de 300. Mais si on y retourne et que j'ai dit, tu sais quoi ? Je vais en faire 700. Maintenant, ça va être beaucoup plus audacieux. Retournons ici. Rafraîchir. Maintenant, vous considérez le Texas. Ah, beaucoup a bouleversé. Gardez à l'esprit, cependant, que les valeurs ici dépendront de la famille de fonds. Toutes les familles amusantes n'auront pas de valeurs pour 607 100 ou même 800. Tout dépend de la famille avant. Plusieurs fois, vous découvrirez que la plupart des familles amusantes au moins auraient une variation légère, qui est généralement 304 100. Ils auront la version normale, qui est généralement 500 puis une variation en gras, qui est généralement 700 ou 800. Donc, vous pouvez simplement jouer avec les développeurs et voir à ce que pour 5$ sont disponibles avec le plaisir spécifié pour moi que vous avez choisi maintenant hauteur de ligne. Bien sûr, cela indique le ah, la distance entre nos bois sur une ligne ah différente. Donc en ce moment, c'est 16 pixels, mais démontrez, allons de l'avant maintenant et change la valeur jusqu'à, disons, 24 pixels. Donc, vous pouvez vraiment comprendre ce que j'essaie de dire ici. Eh bien, allons-y et sauvegardons ça. Revenons à vous sur se réfère à la page Donc maintenant vous pouvez voir ce est 24 choix. De plus, il n'y a plus de distance entre les lignes de texte que nous avons. Vous pouvez voir que c'est ce que font essentiellement les hauteurs de ligne. Et puis nous avons aussi un espace lettre et l'espace entre les lettres deux pixels est ce que nous avons actuellement. Faisons cela huit pixels pour que vous puissiez voir la différence très évidente. Retournons ici. Donc, c'est deux pixels, et maintenant c'est huit pixels, qui est, bien sûr, juste ce qui est juste terrible. Idéalement, vous ne voulez pas utiliser la laitue patient. Dans la plupart des cas, vous avez d'autres propriétés dont nous parlerons dans un instant. Mais il y en a une de plus dont nous devons vraiment parler, et ce sera la propriété de couleur maintenant. Jusqu' à présent, nous avons été habitués à donner des valeurs comme le bleu, rouge vert, mais avec CSS et même avec l'extrême el, vous avez effectivement accès à des milliers et des milliers de différents types de couleurs. Maintenant, si vous allez à html kalakota dot com ici, vous verrez cette barre, et juste ici vous pouvez choisir le genre de cola que vous voulez aller avec. Littéralement. Les millions, bien sûr disponibles, sont ici. Donc, ce que vous voulez faire est une fois que vous avez choisi une fois, vous aimez une variante particulière de la couleur. Ici, vous avez ce qu'on appelle les valeurs hexadécimales. Il suffit de copier développé ici. Et puis vous pouvez simplement appliquer cela à votre valeur de texte dans Coal Valley par cela. Alors faisons ça. Je vais aller de l'avant et sauver ça. Donc ça va ressembler à tous les blessés. Revenons à une actualisation de la commande de texture. Et maintenant, vous pouvez voir tout maintenant est comme une orange. Encore une fois, vous pouvez l'utiliser pour choisir des colliers très spécifiques que vous souhaitez appliquer à votre texte. Donc, c'est à peu près 81 chose de plus à mentionner si vous allez à la w trois écoles dot com CSS et ensuite chercher le texte CSS arriver ici tout le chemin en bas ici, vous verrez quelques propriétés supplémentaires, telles que le texte de direction décoration. C' est là que vous pouvez spécifier si vous voulez que vous soyez sur la ligne. Ton texto. Peut-être ajouter un tiret. Des choses comme ça, vous avez un débordement de texte, dont nous parlerons un peu plus tard. Vous avez un espace de paroisse dans lequel est comme Let nous Basin. Mais maintenant, cela traite de la distance entre les mots dans votre texte et, bien sûr, alignés verticaux, dont nous en parlerons plus tard aujourd'hui. Quelques autres propriétés, dont nous discuterons au fur et à mesure que nous continuons dans le cours. Mais pour l'instant, ce sont généralement les propriétés les plus populaires que vous appliqueriez à votre texte. Un mois d'intervention avant que je ramasse, c'est la police ? Gardez à l'esprit que tous ces éléments sont également applicables à vos titres, vos H. C' est quelqu'un d'étudiant et aussi, pour la plupart, vos huit étiquettes aussi. Fondamentalement, tout type hors texte inclut également nos listes. Donc je pense à regarder. Je te verrai à la prochaine classe 30. Cours et ID CSS: Continuons avec notre voyage dans le monde hors CSS. Et regardons quelque chose de très important, dont vous ne pouvez pas vous passer. Quand il s'agit de code CSS dans. Je veux vous poser une question. D' accord, revenons vers vous. Ah, éditeur Juste ici index point html fichier. Maintenant, vous remarqueriez que nous avons plusieurs dibs, non ? Nous en avons un ici, qui est le premier jour qui contient ce texte. On a un Dave vide juste ici. On a un autre Dave ici aussi. C' est un autre Dave. Il y en a un autre ici aussi. Cela contient les images et quelques paragraphes. Ok, maintenant, on pourrait facilement venir ici et dire, tu sais quoi ? Nous voulons donner à nos dibs une couleur de fond. Ah, loin. Disons que le rouge est un exemple, non ? Je vais aller de l'avant et enlever la couleur de notre texte. Les États reviennent au noir. Alors faisons ça sur du charbon de rouge. Maintenant, si je vais à mon Broza et un rafraîchissement maintenant, vous pouvez voir tous nos Dave ont le sac rouge sur couleur. Impressionnant. Mais si vous vouliez donner à Dave le sac sur Culo au large de Red et que d'autres les laissent tels qu'ils sont. Comment ferais-tu ça ? Et si tu voulais donner un sac ? Oncle de Blue à Onley Un Dev particulier, comment ferais-tu ça ? C' est vraiment le concept de classes et je ds entre en jeu, dis, avec les classes, vous pouvez affecter une classe à un groupe d'éléments, puis appliquer exactement le même style dans chacun d'entre eux en même temps. Mais alors, avec un I d, vous pouvez cibler un élément spécifique et appliquer son propre style unique à l' élément particulier . Revenons donc à notre fichier html point d'index juste ici. Alors c'est tout. Par exemple. Je voulais donner la première vie ici. On va lui donner la couleur de fond de Red Cape. Je vais dire, Dave, Dave, classe égale. Et maintenant, ici rouge, j'ai donné ce jour de la classe de rouge Calme-nous jusqu'au dernier jour, qui est celui que nous avons ici. Donnons-lui aussi la même classe en rouge. Ok, mais je vais faire autre chose. Je vais aller à la mort au milieu. En fait, celui qui contient les images ici. Allons-y et donnons celui-ci et je lui donnerai une carte d'identité. Un autre cours, mais je suis bleu. Donc ce que je vais faire, c'est que je vais donner à Dave la couleur de fond bleu et les deux autres qu'ils ont la classe de Read it back et cool off, rouge. Donc pour faire ça, je vais y aller. Il suffit de sauvegarder mon sont dans le fichier d'estimation exacte. abord, allons à notre style ce CSS Donc ce que je vais faire ici ? Est-ce que ça va ? Je vais d'abord dire que les points ne lisent pas le médecin ce qu'il représente la classe. Donc fondamentalement, je dis tout élément qui a une classe de rouge donner le sac et culo off rouge. Et puis toute classe qui a un i d hors des idées bleues, vous avez utilisé le hashtag pour représenter un I. D. D'accord, donc tout élément qui a le i d off blue Eh bien, donnez-lui un sac. Couleur marron, couleur de fond bleu off. Très bien, alors mettons-le en pratique. Je vais y aller maintenant. et économisez. Allons à Broza se réfère à la page et regarde le chapeau. Donc le premier live ici est au lit. Le dernier est envahi alors que celui-ci est en bleu. Donc, c'est exactement comment vous pouvez faire usage des ID et des classes. Mais ça devient encore plus intéressant. Vous pouvez effectivement appliquer plusieurs classes à un seul élément. Revenons à notre index avec chaque Samuel, non ? Disons, par exemple, Donc, si ce jour, si vous vouliez vous allier dans le texte au centre ce que je vais faire ici est le premier jour de celui qui a une fin de rouge. Je vais ajouter une autre classe de l'espace, puis dire centre Ok, et maintenant jetons un coup d'oeil à un autre Dave juste ici. Ah, celui à qui on peut appliquer ça ? Ok, on a en fait, je suppose que quoi ? Je vais appliquer cette classe hors centre non seulement à un Dave, mais à un autre élément. Et ça va maintenant je vais lui donner tiu la balise P sur l'âge pour être le titre que Cesar prédit dans la pratique OK, donc ça je vais dire que la classe P est égale et puis, bien sûr, lire. Alors, sachez ce que j'ai fait ici. J' ai donné le je suis désolé, pas lu. Mettez au centre. Je m'excuse. Au centre. Ok, Donc nous allons le premier jour de la classe de centre et aussi donné ces élément p droit dans la classe du centre aussi bien. Allons-y maintenant et économisons. C' est bien. Déplacez un remorquage. Un style qui CSS. Je vais ajouter un autre cours maintenant. Ça va être au centre. D' accord. Et maintenant, ce que vous voulez faire ici, c'est que nous voulons aligner nos textes sur la phrase. Je vais voir un texto. Le centre de la ligne. Bon, allons-y maintenant et économisons. Retournez à un navigateur. Fait référence à la page et voyons ce que nous avons. Ok, eh bien, regarde ça. Donc, le premier jour de juste ici a le texte au centre, puis la balise P ici a son propre texte au centre. Vous pouvez voir que c'est celui juste en dessous des projets entre parenthèses. Si nous revenons à notre prochain document e-mail afin que vous puissiez voir les prédictions et les paquets ici , puis la classe p de centre. est exactement pourquoi le texte ici est envoyé à chaud afin que vous puissiez voir comment vous pouvez appliquer des classes ainsi que des idées. Les idées sont spécifiquement pour un seul élément. Vous ne pouvez pas, vous ne devriez pas postuler, et je d à plus d'un élément. Les idées sont uniques. Ils sont conçus pour être spécifiques pour un seul élément. Mais avec les classes, vous pouvez utiliser des classes pour affecter le style à plusieurs types d'éléments différents, et il ne doit pas nécessairement être le même élément que vous pouvez voir ici. Pour retourner à l'auberge, c'est CSS. Nous avons appliqué la classe de centre à la balise deux AP ici et aussi à l'additif. Et nous sommes également en mesure de le faire parce que le style ou la propriété particulière voulait s'appliquer, qui est du texte. La ligne va à la fois pour les dibs et le texte vers le haut. n'y a aucun moyen de construire pour appliquer une ligne textile hors centre à, disons, une image, par exemple, par exemple, parce que vous ne pouvez pas prendre cette ligne sur un élément d'image n'est pas juste qu'il ne va pas arrive maintenant. Vous pouvez également obtenir très spécifique en utilisant la classe. ce moment. En l'état, nous sommes le centre de points ST essentiellement avec les cibles et chaque élément qui a la classe hors centre. Mais si même je viens ici et dis p point center maintenant, ces changements parce que maintenant nous disons que chaque balise P qui a une classe hors centre rend son texte aligné au centre. C' est très différent de Joe, disant ne sont pas envoyés vers le haut. Mettons-le dans un test. Sauvons, allons-y. Mais tu es Broza. Rafraîchissons la page et maintenant vous pouvez voir le premier texte bossoirs est Non. Une fille au centre tandis que la classe P E juste ici au centre. C' est le Texas aligné au centre, donc je sais la différence entre inclure juste la classe et ensuite, y compris un élément d'attaque avant la classe. Il y a une grande différence entre ces deux-là maintenant. Vous pouvez également cibler plusieurs classes et je ds exactement en même temps. Pour le démontrer, je vais vous donner un exemple. Laisse-moi aller de l'avant et enlever le devant. Attendez ici au large de 700. Bon, allons-y maintenant et gardons ça d'abord et voyons juste la différence. Rafraîchissons. Ok, donc tout le texte en ce moment est en gros Bigelow. Et en poids. Rien n'est trop audacieux. Ok, revenons ici. Faisons ça. D' accord ? Je vais venir ici et dire toutes les classes de centre et ensuite j'étais dans le coma . Il et moi dirons chaque classe hors rouge aussi, une autre virgule. Et puis je dirai que j'ai dévié bleu. Et maintenant, nous pouvons ajouter la propriété et le dire à l'avance. Poids de 700. Ce que j'ai fait ici, c'est que j'ai dit que chaque élément qui a une classe de centre tout a une classe Harvard tout a une idée de bleu. Faire son contenu, avoir un poids de fonds sur 700. Sachez qu'on a utilisé un coma pour séparer les classes. Et je vais ici en ce moment et sauver Retournez à nos filles sont rafraîchir la page et maintenant vous pouvez voir que le premier divisé il a une classe de rouge. C' est amusant à ce qu'il soit 807 100 à celui-ci aussi. Est 700 aussi parce qu'il a une classe hors centre. Alors que le texte normal ici est toujours Legler. Parce que ce Dave n'a pas de cours de rouge ou de santo sur l'idée de bleu et ainsi de suite et ainsi de suite. Donc, c'est comme ça que vous pourriez faire usage de I e ds et de classes. La ligne de fond ici est que les classes peuvent être utilisées pour cibler plusieurs éléments en même temps. Alors que les idées sont utilisées pour cibler un élément très spécifique qui est la différence fondamentale entre les classes et les idées. Et, bien sûr, vous serez exposé à Walker avec des cours. Et 80, c'est beaucoup plus que nous progressons dans ce cours. Merci d'avoir regardé. Je te verrai dans le prochain cours. 31. La propriété d'arrière-plan: Bienvenue de retour. J' espère que vous appréciez ce cours CSS depuis maintenant. Jusqu' à présent, si bon avec exploser. Une façon majeure d'ajouter un fond Teoh éléments. Et cela a été l'utilisation de la propriété de couleur d'arrière-plan, qui, bien sûr, ajoute un sac sur la couleur. Mais que se passe-t-il si vous vouliez ajouter une image au lieu de vouloir utiliser une image comme arrière-plan ? Comment va faire ça maintenant ? Je veux revenir au dossier qui contient chacun des fichiers similaires dans les images pleines là-bas ? Ce sont les trois images que nous avons, non ? Prends très attention, Tiu. La deuxième image. Celle-là, juste là. C' est 300 pixels par 168 Ça va devenir un vrai événement très, très bientôt. Mais je veux que nous utilisions cette image ici comme arrière-plan. Bon, donc pour ce faire, je vais retourner aux parenthèses et passons à notre fichier html de point d'index. Et je vais appliquer ces images le sac sur ce Dave vide qu'on a ici. Celui juste au-dessus de la r obtient étude avec vos fichiers sont commentaire. Bon, donc ce que je vais faire, c'est que je vais donner ça, Dave et moi, et je vais appeler cette section de tableau de bord d'image. D' accord, donc c'est comme ça que vous utiliseriez plus d'un si vous appelez votre I D donc c'est comme ça que vous utiliseriez plus d'un si vous appelez votre I D, vos cours avec plus d'un utiliseraient un tiret. Teoh, séparez ces mots. Ok, donc la section image je vais aller de l'avant maintenant et enregistrer le fichier. Passons à un point de style CSS. Maintenant je vais dire Dev, je suis désolé. Balise de hachage, puis section image. Bon, maintenant, maintenant, tout d' abord, je vais ajouter une couleur de fond. Tout d'abord, alors faisons-le. Ah, l' appelant en arrière-plan. Et ça devient noir. Bon, voyons ce qui va se passer en sécurité. Va plus. Teoh Broza fait référence à la page et Ah, eh bien, comme vous pouvez le voir en ce moment, nous ne voyons pas de div avec un fond noir. C' est parce que le Dave en ce moment tel qu'il est Mt. Il n'y a rien à l'intérieur. n'y a pas de taxe, pas d'image, absolument rien. Donc, une façon de montrer réellement un sac noir une couleur serait d'ajouter du contenu ou nous pouvons définir une hauteur. Et avec pour les sourds, et je vais vous présenter maintenant de nouvelles propriétés hors hauteurs et parce que je vais dire 1000 pixels, puis avec, disons, disons, 1250 pixels afin que vous puissiez le définir définitivement cacher. Et pour vos conteneurs, Dave, vos sections et ainsi de suite et ainsi de suite. Alors allons-y. Maintenant, sauvegardez ça. Revenons à vos factures sont rafraîchies la page et d'accord, donc voici. En ce moment, c'est celui qui attend ici pour que vous puissiez voir bien que nous avons maintenant notre section vide . Je suis trop Dave avec 1000 pixels et cache 1250 pixels et avec la couleur de fond off noir. Impressionnant. Ok, maintenant, revenons. Appliquons maintenant l'image d'arrière-plan. Pour ce faire, je vais dire image de tableau de bord de fond. Maintenant, vous devrez spécifier l'u. R L. Où les sœurs trouveront ce fichier cette image que nous voulons nous utiliser un fond afin que nous allons voir votre de L, puis dans les parenthèses manteaux. Rappelez-vous le chemin d'accès au fichier que nous avons appris en HTML ? Je vais dire des images parce que c'est dans un dossier appelé Images et Images et il va y avoir CSS. C' est deux p et G. C'est la source de notre dos sur l'image. Allons-y maintenant en sécurité. Revenez d'abord pour une page et jetez un oeil à cela maintenant vous pouvez le voir. Ok, l'image a maintenant pris sur toute la largeur et la hauteur de notre section. Mais vous remarquerez aussi l'attente une minute. Ça répète quoi ? Rappelez-vous que cette image est seulement 300 par nos 168 pixels, je crois, mais nous définissons la hauteur et la largeur de cette section pour être beaucoup, beaucoup plus grande. Par conséquent, par défaut, CSS répétera l'image d'arrière-plan afin qu'ils puissent occuper à la fois avec et masquer son conteneur. Mais faisons autre chose. Je vais ajouter une nouvelle propriété et ça va s'appeler les soupirs de fond. Très, très, très important. Maintenant, regarde ça. Auto est généralement la valeur par défaut. Ce genre de l'option sûre. Laisse-moi sauver. Retournez ici deux barils toujours frais et vous pouvez voir qu'il n'y a vraiment pas de changement à tel. Fondamentalement tout ce qu'il y a une façon de dire Laissez les cloches déterminer le meilleur moyen afficher le dos sur l'image. Ok, pas de changement. Mais si je retourne ici et je dis que tu sais quoi ? Je ne vais plus répéter l'arrière-plan. Un nouvel arrière-plan de propriété ne se répète pas. C' est vrai. Maintenant, je dis ne pas être choisi l'image de fond. Ok, voyons ce qui se passe. Retourne. Save Venir ici. On est frais maintenant ? Tu vois ça ? Avec auto CSS affichera seulement l'image le mieux possible. Ça ne va pas s'étirer. L' image va juste s'afficher aussi bien qu'ils le peuvent. Et puis pour le reste du conteneur, il affichera la couleur de fond. Tu peux voir ça, non ? Ok, revenons maintenant. Nous allons changer le sac sur la taille de l'auto à quelque chose connu sous le nom de couverture. Quelle est la différence ? Jetez un oeil. Je vais aller de l'avant et sauver le combat maintenant. Retourne, Serbe Elza et regarde ça. Je vais rafraîchir et Blalock regarder ça. Fondamentalement avec l'anse Alu pour la taille de fond étaient dire Hey CSS, Je veux que vous vous assuriez que le sac sur l'image occupera toujours le plein avec et la hauteur son conteneur. Je me fiche que l'image Baghlan soit plus petite que le conteneur. Si vous devez étirer cette image de sorte qu'elle sera toujours occupée avec et masquer son contenu. Et c'est pourquoi vous pouvez voir en ce moment que l'image a été étirée, pas clair. C' est floue et vous pouvez même voir qu'une partie de l'image a été coupée parce que, dans le désespoir dit qu'il y a une tension et dire, Hey , ok, je vais juste m'assurer que cette image occupera toujours son la matière continentale. Quoi ? C' est exactement ce que fait la valeur hors couverture. Il y en a un autre. Une autre valeur dans celui-ci est appelée contient. Similaire mais différent. Allons-y maintenant, sauvegardez ça. Retourne à notre Boza. Nous sommes frais et l'apparence de ça il y a une différence, non ? moment, vous pouvez voir que même si l'image est encore floue, elle est encore floue. Vous pouvez toujours voir l'image entière, et vous pouvez même voir le sac et la couleur off noir vendredi. Maintenant, ce qui les contenait, c'est que c'est un Z. Peu importe ce qui se passe, je vais toujours m'assurer que le sac entier sur l'image est toujours visible. Ce n'est pas comme si la priorité était. Le conteneur, essentiellement le bagman. Images étirées. Le conteneur entier est recouvert de contenir. C' est l'image Baghlan elle-même. C' est la priorité. Nous allons nous assurer que l'image d'arrière-plan est toujours affichée. Il est entièrement montré en tout temps. Même si vous devez laisser un peu d'espace. C' est très bien. Dans ce cas en ce moment, l'espace étant la couleur d'arrière-plan. C' est très bien. La priorité est de s'assurer que l'image Baghlan est toujours visible, même si et aussi bien sûr, parfois le sac une image sera du sang, tout comme avec la couverture. Mais encore une fois, au moins, toute l'image d'arrière-plan sera toujours montrée. C' est la principale différence entre couvrir et contenir. Retournons ici maintenant. En plus de contenir une couverture auto, vous pouvez définir des valeurs Lexus, par exemple, Disons 75 pixels endémiques et aussi, 50 pixels. Donc fondamentalement jamais dire OK, nous allons donner le sac sur les sites et alimenter les pixels avec et les bébés pixels en hauteur. Voyons comment cela ressemblerait à Sauvegardons, revenons ici fait référence à la page, et là vous allez. Donc maintenant, nous avons donné cette image de fond, vous savez, avec nous et pour pick-up vendu et tête de 50 pixels pour que vous puissiez voir qu'elle est très, très petite. Vous pouvez ajouter toutes les valeurs comme, disons, par exemple, sur d'autres et en utilisant deux types différents, Disons 400 pixels. Donc, fondamentalement, ce que cela fait ici, c'est que nous disons, Définir un avec des pixels de fond off, puis la hauteur réglée sur auto. C' est ce que c'est. Alors allons-y. Sauvegardez. Retournez à Balza, rafraîchi la page, et ils vont bien avec un fonds de pixels et une hauteur réglée pour revenir en arrière automatique. Nous avons également des valeurs différentes pour l'arrière-plan. Répétez. Vous pouvez aller avec des valeurs comme, disons , par exemple, sont répéter X. D'accord, alors regardons ceci. Allons avec la répétition X. Fondamentalement, nous disons que nous mettons le sac sur l'image, mais Onley horizontalement. C' est sur la sortie X. Donc, pour le démontrer, revenons à la taille d'arrière-plan définie sur auto. OK, allons-y, économisez. Retournez à un navigateur ou d'abord une page afin que vous puissiez voir en ce moment sur Lee rempli l' axe horizontal plein au sac sur l'image. droite. Mais si je retourne ici et je dis plutôt que de répéter X but avec la répétition, pourquoi cela ici va être vertical à la place. Alors sauvegardons. Retournez à la navigation. Notre fait référence à la page et là vous allez. Maintenant, vous pouvez voir qu'il sent la hauteur de son conteneur mieux que le avec hors du contenu . Donc, c'est fondamentalement le sac sol Répéter les valeurs en action. Maintenant, il y a une autre propriété d'arrière-plan que je veux que nous regardions, et ce sera la propriété de position d'arrière-plan. Donc, dans ce cas, moment, il va être de nouveau en position. Maintenant ce qui est ceux-là est avec le dos et le présent. Vous pouvez indiquer CSS sur la partie de l'image sur laquelle vous voulez vous concentrer. Donc pour le démontrer, ce que je vais faire, c'est enlever. D' accord, revenons juste sur la taille de l'auto à la couverture, et on peut même juste enlever qui a repris. Répétez, puisque la taille de Carvel couvre à peu près tout le continent pour commencer, donc il n'y a pas besoin de répéter Alors faisons ça. Je vais aller de l'avant et sauver Non. Je n'ai pas encore ajouté de valeurs pour le retour en position. Retournons à notre Broza. Rafraîchissez la page et ok, donc maintenant vous pouvez voir ceci. C' est la faute ? Cet état affichera l'image Baghlan. Quand il est dit que dit pour couvrir, Vous pouvez voir une partie du CSS ici a été coupé. Mais si je venais ici et que je disais pour la position, concentrons-nous sur le centre à partir d'un axe vertical et aussi dissident de la sortie droite, donc nous allons nous concentrer au centre de l'image. Au lieu de cela, sauvegardons Retourner à notre navigateur, fait référence à la page, et maintenant vous pouvez voir que CSS a maintenant déplacé son focus de sorte que l'image est maintenant correctement au centre est une scission, probablement à son propre centre. Maintenant, vous pouvez voir tout son e-mail et vous pouvez voir tout hors CSS. Mais il y a d'autres affaiblis de Vela assis en lui aussi. On peut y aller, mais disons à gauche. Et puis nous pourrions aussi dire en bas juste ici. C' est une façon d'aller de l'avant maintenant, économisez. Retournez, Teoh, parcourez notre rafraîchissement, et maintenant vous pouvez voir que la concentration est sur le côté gauche, puis en bas. C' est là que se trouve la concentration ici. Mais si je retourne ici et je suis passé à, disons que les droits en bas à la place sûr, Retournez à un broza, fait référence à la page et comment vous pouvez voir le focus a maintenant déplacé à la place vers la droite de l' image, puis le en bas. Donc, vous pouvez voir que c'est toujours comment vous pouvez changer la façon ou à l'angle avec lequel vous voulez dit est d'afficher votre image à et généralement pour les premières valeurs ici. Vous allez généralement avec la gauche ou la droite, ou peut-être même le centre, et puis pour la deuxième valeur, ce serait pour l'axe vertical sera soit supérieur centre ou inférieur, donc c'est la position d'arrière-plan en action. Bien sûr, nous allons jeter un coup d'oeil à cela un peu tard une fois que nous commencerons à construire notre site Web. Mais ce sont les plus communs avaient les propriétés d'arrière-plan les plus Cornell, surtout quand il s'agit de traiter avec l'image d'arrière-plan que vous auriez affaire, vous savez, vous savez, taille Baghran retour sur la position de Baghlan répétitive sur, bien sûr, l'image de fond elle-même. Vous pouvez définir plus que plus de burger une image si vous le souhaitez. C' est possible, mais on y regardera beaucoup plus tard. Souhaite commencer à construire notre site, mais pour l'instant cela a été comment mettre votre sac sur l'image. Mais après cette Image s votre arrière-plan averti là, moins d'intimation est que toujours assurer que les images que vous allez utiliser comme arrière-plans, à tout le moins sont de taille égale au conteneur avec lequel vous avez l'intention de les appliquer à . Donc, idéalement, si nous allons appliquer une image d'arrière-plan pour cette section, avec la hauteur des 1000 pixels sur le avec off notre 12 50 build idéalement sont allés avec cette image. Celle-là, la plus grande. Les sœurs qui ont erré PNG. Ce serait une meilleure image à utiliser comme sac, et parce qu'elle est très, très grande, très grande, elle est assez grande pour compiler la largeur et la hauteur de notre section. Donc, pour rappel, assurez-vous toujours que vos images d'arrière-plan, l'image elle-même, sont assez grandes pour occuper toute la largeur et la hauteur du continent. Vous avez l'intention de les mettre de cette façon. Ils ne seront jamais étirés de cette façon. Il sera toujours affiché aussi proprement que possible. C' est tout pour les images d'arrière-plan. Je te vois dans la prochaine vidéo. 32. Propriété: Parlons maintenant d'une propriété particulière, que vous trouverez très utile, et qui va être la propriété d'affichage Maintenant. Nous avons vraiment discuté de cela un peu brièvement quand nous parlons de HTML et en particulier les différences entre les éléments de ligne et les éléments de niveau bloc. Maintenant, tout comme un niveau de bloc de recyclage éléments sont votre tête dans une église a gagné excuses vos étiquettes P , vos Debs et ils sont généralement seuls sur une ligne qu'ils ne tiennent pas ou ne sont pas assis côte à côte une ligne. Les éléments peuvent en fait rester côte à côte, et cela a tendance à être votre hyperlien, balises de voie de circulation, images et ainsi de suite. Maintenant, avec la propriété display, vous pouvez modifier la façon dont les éléments de niveau bloc sont affichés, et vous pouvez également modifier la façon dont les éléments de ligne sont tous affichés à titre d'exemple. Ici, nous avons notre H, qui dit est d'obtenir des célébrités CSS. Et puis nous avons hte à qui dit que c'est votre guide maintenant par défaut, bien sûr, ils sont maintenant sur des lignes séparées, comme vous pouvez le voir. Mais si je suis retourné à mon style que CSS et j'ai dit, je vais ajouter une nouvelle déclaration et dire h un h deux Allons ouvrir. Notre collègue Brace est maintenant la propriété hors affichage. Je vais lui donner une valeur en ligne. Très bien, c'est sûr. Allez dans le navigateur, actualisez. Et maintenant vous pouvez voir que le H un et H pour annoncer rester côte à côte. On pourrait faire quelque chose en face avec les images ici, vous pouvez voir que les images deux et trois sont côte à côte. Si nous leur donnons une propriété disparate hors bloc, alors ils seront sur leur propre ligne séparée. Alors c'est comme ça que c'est les gens. Mais cela fonctionne, mais c'est en fait une autre valeur, dont je veux que nous parlions. Et il va être appelé la valeur de bloc en ligne. Comment cela fonctionne-t-il exactement ? Vous voyez, par défaut, vous ne pouvez pas ajouter une hauteur ou avec à l'élément de ligne ou un élément de niveau bloc Vous ne pouvez pas. Mais si vous leur donnez un affichage hors bloc de ligne, vous serez alors en mesure de leur fournir un ensemble avec Let's do this. Je vais supprimer notre déclaration qui reste en ligne pour H une h deux. Je vais venir ici et je vais dire image. D' accord, donc c'est que j'entre dans trois images dans le document original. Je vais venir ici et dire « Display ». Maintenant, regarde ça. Je vais dire dans le bloc de ligne, accord. Et maintenant je vais vous dire avec 33 % de réduction. Donc, fondamentalement, je dis bien, chaque image dans notre document HTML les affiche comme un bloc en ligne, puis leur donner un avec off 33%. Ceux-ci que 33% signifie simplement que c'est par rapport à leur conteneur. Dans ce cas en ce moment, si vous venez ici, vous remarquerez que les trois images sont à l'intérieur d'une mort avec un i d off blue. Donc, fondamentalement, la première image occupera 1/3 de la largeur de l'ensemble du conteneur Deve. Ensuite, une deuxième ligne de la troisième, puis la dernière occupera 1/3 aussi. C' est ce que cela signifie simplement. Allons-y. Document sûr. Allons voir ce qui va se passer maintenant. Notez que la première image, bien sûr, est très, très grande. Voyons ce qui se passe. Je vais me rafraîchir, et maintenant vous pouvez voir tout d'un coup les trois images et maintenant côte à côte, parce que nous leur avons donné un set avec 33% de réduction. Mais avant que nous puissions leur donner leur avec un 33%, nous devions les définir ou je leur donne la valeur d'affichage hors bloc de ligne. Donc, c'est là que dans Lyon Block sera utile lorsque vous voulez définir ou fournir une hauteur, ou avec soit un élément de niveau de sang ou un élément de compagnie aérienne que vous voulez leur donner pour afficher la valeur hors bloc Angleterre d'abord. Maintenant, il y a une autre propriété ou valeur, quelle est la valeur hors ? Aucune fondamentalement. Donc oui, et vous savez ce qui n'affiche pas l'élément. Donc, s'ils enregistrent cela, revenons à naviguer sont à venir ici. Actualiser. Eh bien, voilà. Plus d'images maintenant. La question, bien sûr, est de savoir quand utiliseriez-vous ce type particulier hors valeur pour l'affichage ? Ceci est généralement très populaire avec les écrans réactifs. Menu conception de votre site Web pour bien paraître sur un appareil mobile. Il y a certains éléments ou du contenu, comme peut-être des animations, des curseurs qui ne seront pas si bons sur un téléphone mobile. Donc tu pourrais dire ça. Hé, si quelqu'un regarde ce site sur un téléphone mobile, n'affiche pas cette lumière. Je n'ai pas affiché cette image ou quelque chose comme ça. C' est donc là que vous pouvez utiliser la valeur off. Aucun pour la propriété hors de cette pièce. Laissez-moi y aller. Nous bougeons que Écoutez pour afficher dans le bloc de ligne, gamin. Alors c'est tout. Merci beaucoup d'avoir regardé. Je te verrai dans le prochain cours. 33. Cossais et bordures CSS: Bienvenue de retour. Parlons maintenant d'autres propriétés de mise en route qui sont très, très importantes. Et nous parlons de marges, modèles et de bordures, et ceux-ci sont très essentiels pour la façon dont est votre contenu. Ça a joué. Mais qu'est-ce que ces trois ? Qu' est-ce qui est en marge ? Qu' est-ce que le rembourrage ? Qu' est-ce qu'une frontière ? Eh bien, pour le démontrer, nous allons faire des choses. Tout d'abord, nous avons pensé document html. Je vais aller de l'avant et enlever ces idées de bleu pour le Dave qui détient nos images. Et puis ici, le tout premier Pitak à la fête des mères. Je vais donner un coup d'envoi, et je dois m'excuser, un je de ah, disons orange. D' accord. Et puis le prochain sera tag, je vais lui donner un je vais dire gris. Ok, sauvegardons passer à un style que CSS Maintenant vérifier ceci. Ok, je vais donner le 1er 1 qui est orange. C' est un P tout intéressé par l'ouverture d'un accolades Kelly très spécifique. Donnons-lui une couleur de fond orange, évidemment, et ensuite nous allons lui donner un avec, disons, 475 pixels et puis je vais lui donner une hauteur de 100 pixels. D' accord, je vais y aller et je vais tout copier. Et puis je vais coller, et puis je changerai simplement le i d off orange ici en gris. Et puis, bien sûr, Jenny va aller cola ici d'orange à Glee aussi. Sauvons. Allez à notre Boza, rafraîchissez la page et voyons ce que nous avons. Et voilà. Très bien, les deux prétextes. Avec cela de retour sur Kahlo et avec une hauteur de 100 pixels avec tous les 475 pixels Maintenant, vous pouvez remarquer que le texte est juste au bord de son conteneur. Regardez à gauche et il se tournera vers la droite de l'AHL. Inge Pitak, Vous pouvez voir pourquoi ce D pour la fin ? C' est juste à côté du conseil. C' est juste à côté du bord. Comment créer de l'espace avant de vous montrer comment faire cela ? Ajoutons des frontières, non ? Je vais venir ici et je vais dire frontière. Deux pixels. Rouge solide. Qu' est-ce que je n'ai pas entendu exactement ont ajouté une bordure autour de la balise P et j'ai dit, rendre épais deux pixels. Donc, pour choisir deux pixels représente l'épaisseur de la bordure. Sollied signifie le type de corps parce que vous pouvez avoir solide, vous pouvez avoir une fille pointillée et ainsi de suite, puis le rouge représente la couleur hors de la bordure. Je vais aller de l'avant et sauver. Retourne ici. Nous sommes frais, et maintenant vous pouvez voir la frontière juste là. Mais encore, le texte est juste à côté de la frontière et ici aussi le Texas juste à côté du bord son conteneur. Donc, si nous voulions créer un espace entre le texte et qu'il est acheté tous les conteneurs, nous allons devoir utiliser des modèles qui sont des modèles hors pour créer l'espace entre contenu. Mais c'est une image. Ah, le texte ou tout type d'élément crée essentiellement un espace entre cet élément et sa bordure ou conteneur. Donc, si je retourne aux parenthèses et que je dis pour le premier P orange, venons ici et disons, rembourrage 20 pixels. Ok, économisons. Retournez ici pour d'abord la page, et maintenant vous pouvez voir qu'il y a beaucoup plus d'espace autour de 20 pixels des 10 premiers pixels des deux côtés . Le fond. Ce n'est pas pertinent parce qu'il y en avait. Il y a toujours de l'espace entre le texte en bas pour commencer, parce que nous avons donné le conteneur de hauteur de 100 pixels si nous n'avons pas fourni de hauteur. En fait, faisons ça. Enlève complètement les hauteurs. Donc plus de hauteur de 100 pixels ici aussi. Plus de hauteur de 100 pixels. Sauvons. Retournez aux factures, rafraîchissez et maintenant vous pouvez voir la différence. La première étiquette p semble beaucoup plus propre et plus propre parce qu'il y a tapotement tandis que la seconde semble très, très rugueuse parce qu'il n'y a pas de rembourrage. Mais changeons ça. Ok, je vais revenir aux parenthèses et pas pour la deuxième balise p, qui est celle avec l'idée de grand. Je vais venir ici et dire, Padden, regarde ça. Je vais dire 10 pixels, puis 20 pixels. Vous remarquerez la différence que dans le 1er 1 ici nous avons donné le modèle 20 pixels. Ici, c'est 10 pixels. 0 10 pixels, pas 10 x désolé. 10 pixels, puis 20 pixels. La différence ici est que dans ce cas, c'est le scénario où vous avez deux Vela différentes pour votre modèle. Les amis Vela seront pour le haut et le bas. Le second sera pour les côtés gauche et large. Alors sauvegardons ça. Go Bachir Barils sont d'abord une page et ils vous allez maintenant P Tech numéro deux a 10 pixels du haut et du bas 20 pixels vers la gauche et la lumière. Il y a une autre façon de faire des motifs blancs ici. Tu peux donner une valeur 1/3 et ce gars a raison maintenant ça va faire 50 pixels. Ce que cela fera est de 10 pixels en haut, 20 pixels pour les deux côtés, 50 50 pixels du coffre inférieur. Bons barils boxer sont rafraîchis la page et là vous allez. Maintenant, le fond a 50 pixels, non ? Il y a même 1/4 de chemin à droite dans nos modèles. Et comme en fournissant 1/4 de valeur dans ce cas en ce moment, je vais dire 100 pixels. Si vous pouvez deviner ce que cela signifie ici est que 10 pixels sur le dessus 20 de divise farouchement du bas 100 de la gauche Enregistrer Retournez à ses arcs, rafraîchissez et comment vous pouvez voir que la gauche a le plus parce qu'il est 100 pixels et le les autres modèles restent les mêmes. Donc, ce sont les quatre différentes façons dont vous pouvez écrire se développe. Votre modèle peut donner une valide développe trois valeurs ou quatre valeurs. Ok, génial, magnifique. Nous avons vu ce que les frontières sont quelque peu des modèles. Qu' en est-il des marges ? Qu' est-ce qu'une marge ? Les marges sont utilisées pour créer un espace, une distance entre un élément dans un autre. Il est différent des bordures qui créent de l'espace entre un élément et son conteneur ou ses motifs de bordure sont plus internes. Les marges sont des marges externes est maintenant correct, Noël entre un élément dans un autre. Si je viens ici, j'ai très P orange et j'ai dit, Ma Jing, regarde ça. 100 pixels du bas. Je vais sauver. Retournez à Ambrose On remarque la distance entre le premier Pitak et le deuxième juste ici. Ce n'est pas tellement correct, mais si je me rafraîchis maintenant, vous pouvez voir que c'est beaucoup plus parce que nous lui avons donné une marge. Valeur inférieure de 100 pixels. Fondamentalement, nous avons dit du bas du pitak avec l'idée. Orange a donné une distance de 100 pixels à l'élément suivant, qui se trouve être la balise p avec le i d off gris, nous pourrions créer ce même effet en faisant exactement le contraire venant ici en ce moment et dire OK, ah p Gris. Donnons une marge à partir du haut 100 pixels coffre-fort. Revenez à la Broza renvoie la page, et il n'y a pas de différence parce que nous avons simplement quitté le même tableau d'affichage en changeant les valeurs de la manière opposée. Donc, les incidents qui étant donné le bas de la marge orange P de 100 pixels avec BNP grand imaginer la valeur supérieure de 100 pixels, sorte que vous pouvez également large marge gauche. Pourquoi vous pouvez avoir ceux pour ceux qui ont fini de la même façon. Vous pourriez même écrire des motifs de la même manière. Donc la violence en disant, tapotant 10 pixels du haut, vous pouvez dire tapotant haut, puis 10 pixels. Il s'agit essentiellement d'une façon abrégée d'écrire les dévoile de l'Op Ed pour les quatre côtés. Si vous voulez ajouter du rembourrage pour un seul côté, nous allons le faire inviter. Tu dirais pardon les feux de tableau de bord. OK, alors gardez ça à l'esprit. Une autre chose à mentionner avant que je autour de cela est un modèle ne peut jamais avoir des valeurs négatives . C' est impossible. Marge est, d'autre part, peut avoir des valeurs négatives. Vérifie ça. D' accord. Je vais retourner à la place. Ça a l'air bien, non ? Le genre d'idée semble décent. Mais si je venais ici et que je disais, tu sais quoi ? Retirons le haut de la marge, mais je ne le vois pas. 100 pixels. Très bien, je vais venir ici et je dirai 25 pixels négatifs. Que va-t-il se passer ? C' est sûr ? Retourne ici, Refresh. Et maintenant, vous pouvez voir que la deuxième balise p a essentiellement sauté dans la première balise p ici. Tu peux voir ça, non ? Si je reviens, augmentons la valeur ici à 50 pixels. Doublons ça. Reviens ici. Actualiser. Et maintenant, vous pouvez voir qu'il est maintenant levé encore plus, donc c'est l'effet off. Ajout d'une valeur négative pour vos marges. Il est défini dans des situations où vous pouvez vouloir utiliser quelque chose comme celui-ci. Vous pourriez généralement vous impliquer en essayant de dire peut-être comme une vidéo de fond pour conteneur, et il a remarqué que vous voulez également le sac autour de notre vidéo pour occuper un autre conteneur ainsi . Voici le genre de scénarios où vous devrez peut-être utiliser comme une marge négative. Ce n'est pas très commun, mais il y a des utilisations pour cela que vous commencez à construire des côtés avec CSS HTML. Vous voudrez peut-être utiliser des marges négatives traditionnelles, mais pour la plupart, mais pour la plupart, vous n'aurez pas besoin de les utiliser en tant que telles. Donc, je suis juste changé ce 50 pixels de retour à ne juste enregistrer un verre 50 pixel enregistrer. Retourne maintenant, rafraîchissons et voilà. Donc c'est essentiellement pour Mougins. Les modèles et le conseil d'administration aussi, bien sûr, les traiter beaucoup plus au fur et à mesure que nous progressons dans ce cours. Merci d'avoir regardé. Je te verrai dans la classe suivante 34. Modèle de boîte CSS: avant que nous ne progressons dans le cours. Je veux parler du modèle de boîte CSS car il est important que vous compreniez exactement attribution. En fait, ça l'est. Alors. Le modèle de boîte est utilisé pour calculer la hauteur totale et avec souvent l'élément donc à titre d'exemple , si vous allez calculer le total avec l'élément four, , ce serait le de comme vous auriez le avec, disent-ils, avec des éléments pour commencer. Et puis vous aurez plus le pad gauche et le pad blanc dans la bordure gauche blanche s' il y en a. Et puis, bien sûr, la marge gauche, puis la marche droite. Et ce sera la formule pour calculer le total avec souvent élément de la même manière. Vous pouvez tout d'abord calculer la hauteur totale d'un élément, en ajoutant les hauteurs définies, puis le motif inférieur Adam supérieur, la bordure inférieure supérieure, puis la marge supérieure et la marge inférieure. Ce serait la façon de calculer la hauteur totale d'un élément. C' est donc la formule à l'esprit. Essayons de calculer cela ne va pas bien avec et masquer les balises R P. Commençons par P orange. Tout d'abord, calculons le total avec qui ne vit pas ici va être l'ensemble avec tout d'abord , qui est pour 75 et puis remarquez que nous avons deux pixels de bordure à gauche et blanc à pixel, donc ce sera quatre pixels. Ça va être forcé sur les cinq plus quatre, puis sur les pixels Internet de tous les côtés . Donc à gauche ce soir, il aura un motif désactivé pour les pixels combinés. Donc il va être forcé à cinq plus quatre plus 40 ce qui devrait vous donner 519. Donc, il est peu avec le Peter avec l'idée d'orange est 519. Mais qu'en est-il de la hauteur ? n'y a pas de hauteur définie, donc nous allons juste aller avec un brevet, tout d' abord, mais vous serez pour les pixels parce que nous avons un animal de compagnie dans 20 du top 20 du bas et puis quatre autres, parce que nous avons a deux pixels de bordure du haut et du bas, donc ça va être 40 plus quatre, ce qui vous donnerait 44 pixels de hauteur. Et le deuxième Peter Regulated avec un I d off. Super. Vous pouvez mettre en pause cette vidéo et essayer de calculer le total avec une hauteur totale de cet élément vidéo Composer en ce moment. Et je vais aller de l'avant et résoudre le Donc qu'en est-il du total avec tout d'abord, nous avons qu'ils sont définis avec ou 475 Et puis ici les patrons sont écrits différemment. Mais nous savons que la deuxième valeur ici est pour le droit. La troisième valeur ici est pour la gauche. y avait pas de frontières. C' est très bien. Donc nous allons juste aller avec 4 75 plus 20 plus 100 ce qui devrait vous donner 585 pour peu avec et puis pour la hauteur totale, il n'y a pas ladite hauteur. Mais nous savons qu'il tapotant ici 10 pixels est du haut. Le troisième homme ici est pour les pixels du bas. Alors que six pixels et imaginer haut. Et dans quelques-uns des pixels, ce qui vous donne ah, 110 pixels en hauteur totale. C' est essentiellement comment calculer la hauteur totale et avec un élément en utilisant le modèle de boîte CSS . Merci d'avoir regardé. Je te verrai dans la classe suivante 35. Propriété de largeur: élastique sur une autre propriété, que vous trouverez très utile et que cette propriété va être le max avec la propriété. Quelle est exactement cette propriété ? Eh bien, il est généralement utilisé pour créer des designs réactifs de votre site Web. Et qu'est-ce qu'un design réactif ? Eh bien, design réactif est quand votre site Web aurait l'air très bien, indépendamment de la taille de l'écran. Donc, que quelqu'un consulte votre site Web sur son ordinateur, sa tablette ou peut-être même un téléphone mobile, votre site sera toujours présentable et soigné. Maintenant, le max avec la propriété est très vital pour créer un tel effet. Maintenant, pour le démontrer, je vais revenir à notre document HTML et jetons un coup d'oeil à ce que nous avons ici. Nous avons la section Dave ici avec l'idée de la section Image. Ce que je vais faire est d'aller commencer à CSS, et je vais en fait cacher tout ce def. Alors venons ici et disons l'affichage et disons, euh, cette pièce est réglée sur zéro. D' accord ? Ok, allez-y et économisez. Maintenant, il y a une autre chose que nous allons faire, et c'est que je vais supprimer l'ensemble avec pour le P marqué avec le Grand avec l'idée de Grey. Supprimons ce jeu avec Enregistrer. Revenons à nos perles. Je vais nous renvoyer à Page, et c'est exactement ce que nous avons. ce moment. Vous pouvez voir la différence évidente entre les deux éléments p. Le 1er 1 a un set avec off 475 pixels. Le 2ème 1 n'a plus d'ensemble avec et par conséquent, étant un élément de niveau bloc car il s'agit d'une balise P. Ce n'est pas une occupation de tromper avec de notre écran A, comme vous pouvez le voir. Ok, mais laissez-moi vous dire quelque chose maintenant, je Et si nous devions rendre cet écran plus petit ? Maintenant, à ce stade, vous pouvez voir que tout semble encore assez bon. Et si jamais va réduire la taille de l'écran, qui est la taille de l'écran, vous pouvez voir que même les images sont de plus en plus petites. Le texte est en train d'obtenir est un peu comme se briser en plusieurs lignes. À ce stade, vous pouvez voir en ce moment, c' est-à-dire qu' il est toujours réactif. Et une façon dont vous pouvez savoir quand une page réactive est quand vous ne voyez pas de boîte scolaire horizontale à ce stade en ce moment. ce moment, juste là. Vous pouvez également nous avons maintenant une barre de défilement Chaque fois que vous voyez cela, cela signifie que le site Web n'est pas réactif. Et cela se produit quand il y a du contenu qui est plus large ou plus grand que la taille de l'écran de pièce de monnaie. Et j'étais en conséquence, vous avez maintenant un peu comme un débordement. Maintenant, je vais faire ça aussi petit que possible et vous pouvez voir Oui, nous avons certainement un peu de débordement quelque part. Maintenant, si je commence par le haut, vous pouvez voir tout de suite que le jour de avec un fond rouge ne semble pas être débordant , parce que si je me suis déplacée ici, vous ne pouvez rien voir. Mais si une scolarisation cubaine vers le bas, tout est encore aligné, un encore aligné. Mais maintenant vous pouvez voir que la balise P avec l'idée d'orange est celle qui provoque le débordement . Vous pouvez voir avec cette partie particulière ici est en dehors de la taille réelle de l'écran, et c'est là que nous avons maintenant ce débordement. Mais si je continue à descendre, assurez-vous que c'est le seul, vous puissiez voir qu'il y a le seul. Le dernier fond rouge différent est réactif. Mais c'est ce principal Peter grand ici. Ce n'est pas réactif. Et la raison en est tout simplement parce que nous lui avons donné un ensemble avec 407 5 pixels. Mais c'est vert. La taille de l'écran est actuellement probablement d'environ 400 pixels. Ok, alors quelle est la solution ici ? La solution est de changer l'avec à Max avec coffre-fort. Retourne vers lui. Mais j'y étais. Actualisez la page. Et maintenant, vous pouvez voir qu'il n'y a plus de surflux. La page entière en ce moment est réactive. C' est la grande différence entre avec et Max avec fondamentalement, avec Max avec nous dire ok, ne jamais aller au-delà de cette particule dehors. Ah, avec cet ensemble particulier avec si vous avez besoin de faire le avec plus petit pour qu'il soit réactif , alors faites-le aussi bien. C' est exactement ce que le max avec la propriété est tout au sujet. Alors c'est tout. Avant que je parte , je vais dire quelque chose de très rapide et ce sera un peu comme une question, en fait. Et si nous voulions centraliser la balise RP ici. Les éléments P voulaient centraliser. Faites le mettre juste là au centre de notre écran. Comment ferais-tu ça ? Nous ne pouvons pas utiliser le textile. Et parce que les propriétaires fonciers du Texas marchent avec du texte réel. Mais nous avons affaire à un élément fondamentalement juste ici pour centraliser cela. Ce que vous voulez faire est d'aller à l'élément. Dans ce cas en ce moment, c'est le P orange. Ce que je vais faire, c'est dire marge, puis zéro et une auto. OK, allons-y en sécurité. Reviens ici. Eh bien, abord la page, et maintenant vous pouvez voir que Ah, élément orange est maintenant juste là au centre de demander. Donc, c'est l'une des astuces CSS que vous devez être conscient. Fondamentalement, pour centraliser n'importe quel élément de niveau de bloc, vous devez lui donner un ensemble avec et ensuite dit les marges à zéro et auto, tout comme nous l'avons fait ici. Nous lui donnons un ensemble avec Maintenant, vous pouvez également faire l'irrégulier avec et faire marge zéro auto. Il centralisera également l'élément de niveau bloc. Mais rappelez-vous, ça ne va pas être réactif, mais vous le faites au maximum. Et puis tu dis que Jim a des marges à zéro. Une auto qui centralisera automatiquement vos éléments de niveau bloc. C' est ça pour les Maxwells. Mais qu'en pensez-vous ? Une fortune. Je te verrai dans le prochain cours. 36. La propriété de position: Regardons une propriété finale, et ça va être la propriété position maintenant. Comme vous l'avez peut-être déjà deviné à partir du nom, il est essentiellement utilisé pour définir la position sur l'élément sur notre page Web. Maintenant, par défaut, chaque fois que vous créez du contenu avec HTML et que vous utilisez cesse de le styliser aussi, Vanda tel contenu. Naturellement, vous pouvez voir en ce moment que le contenu va de gauche à droite, les éléments collés les uns sur les autres et ainsi de suite, et même ici avec la balise P avec l'idée d'orange étaient dans la vidéo précédente. Nous définissons la valeur ici au centre exact, en utilisant les marges. Votre auto, tout cela est naturel par. Mais si on le voulait ? Disons, par exemple, décalez la position de cette balise P juste ici, légèrement plus vers la lumière, ou peut-être un peu plus vers le haut. Comment ferais-tu ça ? C' est là que la propriété hors position entre en jeu. Maintenant, par défaut, nous avons une valeur désactivée statique pour chaque élément unique. Donc si je suis venu ici en ce moment et que j'ai dit position, et ensuite j'ai dit, Ah, statique, c'est que je suis désolé. Position. C' est une erreur d'orthographe. Bon, donc si je suis entré et que j'ai dit la position statique, cela ne fait vraiment rien parce que tous les éléments ont une position statique par défaut, est-ce pas ? Mais si je venais ici en ce moment et que je disais, je vais changer ça ? Non. Trop rarement atteindre. Et je vais donner une valeur sur les 400 pixels supérieurs. Maintenant, faites attention. Qu' est-ce que cette valeur relative pour la position ? Ce que ça fait, c'est qu'il reste. Considérez la position naturelle de cet élément. abord, Tout d'abord, utilisez sa position comme un oncle, puis de cette position, déplacez sa position par toutes les valeurs remplacées pour peut-être une école supérieure gauche, légère ou inférieure. Donc, ici, nous avons dit du haut maintenant 400 pixels. droite. Voyons cet effet en action. Je vais passer aux pouvoirs, prêter attention à la position naturelle de cet élément en ce moment. Comme si c'était la position naturelle au centre. Si je rafraîchis, vous pouvez voir en ce moment qu'il l'a heurté vers le bas de 400 pixels à partir de sa position naturelle. C' est ainsi que le rapport fonctionne. Alors tu penses peut-être toi-même. Attendez une minute. On n'a pas dit que c'était censé être du haut ? Oui, vous réfléchissez peut-être parce qu'on est ici. C' est censé faire sauter le contenu vers le haut, non ? Bono est le contraire. C' est comme ça que ça marche. Si je suis venu ici en ce moment et que j'ai dit, Ok, laissons 200 pixels à gauche, vous pourriez penser , OK, ça va changer. La balise de pic va déplacer son contenu vers la gauche, mais sous pixel, mais elle va en fait être vers la droite. Allons de l'avant et en sécurité. Retournez aux rebelles maintenant, rafraîchissez. Et maintenant, vous pouvez voir qu'il saute maintenant au blanc par 200 pixels supplémentaires. C' est exactement ainsi que fonctionne la valeur off relative. Et tout comme avec le haut et la gauche, vous pouvez également Advil utile à droite et en bas ainsi. Gardez simplement à l'esprit que les valeurs ici ont tendance à agir dans la direction opposée, donc si vous donnez un valide au bas, il expédiera le contenu vers le haut. Vous donnez votre valeur à droite, il déplacera le contenu vers la gauche. C' est exactement comme ça que ça marche. Ok, génial. Je vais aller de l'avant et enlever ça. Ok, économisons. avons laissé à propos de la deuxième valeur pour notre position. Propriété. Et ça va être la valeur de AB. Alors, Lute, passons à notre index de fichier HTML. Maintenant, fais attention ici, non ? Nous avons un div, et au lieu de ce live, nous avons la balise H deux b. Nous avons aussi une pizza avec la classe hors centre. Au cas où je ne l'aurais pas encore mentionné. Tous ces éléments sont fondamentalement Enfants hors de ces Div. Ce Dave qui occupe chaque chose est qu'il y a essentiellement l'ancêtre ou le parent de chaque élément à l'intérieur ici. Maintenant, c'est important à comprendre parce que nous allons parler de la position absolue ce moment. La position absolue ignore essentiellement la position naturelle de l'élément sur comme, relatif qui dit, OK, à partir de la position, la position naturelle de ces éléments, maintenant le déplacer par social. Donc et donc avec l'absolu, il ne considère pas la position naturelle tout pour l'élément. Au contraire, il concède que la position de l'immédiat et du sens a arraché cet élément. Et s'il n'y a pas d'ancêtre immédiat hors de cet élément. Il utilisera simplement le port de vue comme une cheville. De quoi je parle ? Allons ici. Va juste au démarrage. CSS. Et je vais cibler ce cours ici, au centre. D' accord. Le dernier centre vidéo de pointe. Allons ciblés. Je vais venir ici et dire position, Position ? Absolu. Et je vais dire « top off ». Disons que 20 pixels vont au Broza. Maintenant, c'est l'élément du ciblage, non ? C' est le texte juste ici. Ne jamais aller de l'avant et rafraîchir. Maintenant, vous pouvez voir qu'il a été cogné ici. Comment ça s'est passé ? Vous voyez, la position absolue a une loi. Il a une règle et ils seront essentiellement ici est ce Tout d'abord, il va jeter un oeil à l'élément Nous avons actuellement appliqué la valeur absolue à pour sa position dans ce cas. En ce moment, c'est la lumière centrale de la classe P. Ce qui va faire est qu'il va dire OK, quel est l'ancestral immédiat de cet élément particulier dans ce cas en ce moment, c'est le Dev fait le droit ici maintenant parce que nous n'avons pas donné cela, DIV un homme dit pour le poste. Il va regarder le prochain possible et sensé, qui dans ce cas, si nous devons aller jusqu'au bout, ce sera cette étiquette de section juste ici parce que ce Dave est à l'intérieur de cette section. Il vérifiera pour cette section pour voir. Ok, cette section ? A-t-il une position dite d'autres aliments ? Si ce n'est pas le cas, il va jeter un oeil sur le prochain ancêtre possible, qui serait le corps et ils finalement. Mais il n'y a pas de mieux si le dernier ancêtre n'en a pas, dit le gars pour le poste. Il utilisera simplement le View Port, qui est le navigateur, car c'est un Cole. C' est exactement comme ça que ça marche. Donc, pour démontrer cela, allons le voir et dire OK pour cela, Dave, Dave, Utilisons ce Dave, Comme les points de cheville diront, le style Dev est égal et ensuite nous allons lui donner une position off relative. Bon, allons-y maintenant et économisons maintenant si nous revenons au navigateur et nous rafraîchissons maintenant, il a sauté ici parce que maintenant il utilise son Dave. C' est un ancêtre immédiat, qui est un Dave comme point de charbon et. Essayons autre chose. Je vais attraper ce qu'on a fait ici. Ce style. Je vais couper ça pour que ce Dave ne soit plus l'ancêtre immédiat. Nous allons aller à tout le rythme de la section des opiacés qui nous permet d'économiser. Et si nous revenons au navigateur et nous actualisons maintenant, vous pouvez voir qu'il est maintenant ici parce qu'il utilise environ. Il est ici parce qu'il utilise maintenant cette étiquette de section comme son et du charbon. C' est exactement comme ça que fonctionne la position absolue. Il ignore la position naturelle de l'élément auquel la valeur de l'absolu a été appliquée. Mais est-ce pour regarder le prochain un orteil sensé pour voir s'il y a un dit Bella pour elle ? Et s'il n'y en a pas, il utilisera simplement le port View comme sa propre cheville. C' est exactement comme cela que la position de salut APP fonctionne maintenant. Pour être honnête, vous ne trouverez probablement pas trop d'utilisations pour l'absolu. En fait, il a tendance à briser un peu la mise en page des sites Web, mais il a ses utilisations, et nous allons jeter un oeil à ceux Are it beat plus tard ? Mais pour l'instant, je vais aller de l'avant et supprimer la valeur parce qu'on n'en a plus besoin. Sauvons. Sortons à l'index du HTML et je supprimerai également le style de la section. Ok, c'est jeter un oeil à avertir, plus de valeur pour le poste, et ça va juste maintenant ce sera la valeur hors fixe. Très bien, c'est très, très intéressant. Un fixe, Essentiellement dire que c'est ça. Hey, quoi qu'il arrive, ne bouge pas la position de cet élément. Même si l'utilisateur navigue vers le bas ou navigue dans les aéroports. Gardez cet élément exactement où il est censé être. Par exemple, revenons à nos cloches, hein ? Donc, dans votre esprit, vous pouvez voir que nous faisons défiler vers le bas les écoles de contenu essentiellement à droite. Vous pouvez voir ça en gros, comment ça marche. Mais disons hé, vouloir faire des forces d'édition rapides et JavaScript que vous voulez que cela apparaisse toujours ne fera pas corriger que quand nous école vers le bas, il n'école pas vers le haut. Faisons ça. Je vais passer en revue l'index du HTML et c'est ah, celui où est-ce ? OK, c'est celui juste ici. Édition rapide pour CSS et JavaScript, à droite. Donc, nous allons juste que je vais très, très rapidement donner ceci et je d Donc nous pouvons utiliser notre début de CSS. Je démange juste et on va dire Fixe Non, ok, ok, Sauvegarder le style d'électeur que CSS Et puis juste ah, ici. Je dirai juste réparé. Et je vais dire que la position ici est fondamentalement fixe. Ok, sauvegardons Retournez au navigateur. Rafraîchissons la page. Et maintenant, vous pouvez voir qu'il est ici en tout temps, même si son objectif dans votre école vers le bas, il va toujours apparaître si essentiellement, il est collant. Donc, chaque fois que vous voyez ces menus de navigation, le haut des sites Web qui sont toujours jour, même quand vous scolaire là-bas essentiellement en utilisant ces valeurs juste ici hors fixe pour la position hors des éléments de navigation de ceci est l'un des les meilleures utilisations pour cette valeur particulière. Vous pouvez l'utiliser pour définir des menus collants en haut de votre navigateur et hors cours. Si vous vouliez mettre cet âge à reprendre à tout le haut ou juste venir ici et dire top off zéro, mais c'est demi-deux-points, sauvegardons revenir à un navigateur. Et maintenant, si on se rafraîchit, il sera toujours au sommet juste ici. Peu importe quoi, et utiliser aller vers le bas. Il sera toujours au sommet, peu importe ce que vous faites. De plus, cela ignorerait l'ensemble dans le textile, mentir au centre ou des trucs comme ça. Donc, par exemple, si nous venons ici et que nous avons dit Ok, faisons de ce texte cette ligne. Ah, au centre de sauver. Retourne ici. Rafraîchir. Vous pouvez voir maintenant que ça ne va pas au centre. C' est toujours à l'endroit exact juste là. Donc, si vous voulez pousser cela au centre, c'est là que vous n'auriez pas besoin d'utiliser. Tends, comme venir ici et dire à gauche, Disons peut-être 400 pixels. Et en fait, allons-y. Plus comme 700 pixels, je suppose. Donc nous avons sauvé ce collectionneur Broza frais. Donc maintenant c'est Ouais, peut-être sept était un B 200 de plus comme 600 mais maintenant c'est plus vers le centre. Donc, c'est essentiellement comme ça que la vanne hors fixe fonctionne pour la propriété de position. Une dernière position dont il faut parler avant nous. Cela va être la valeur hors collant. Maintenant, je sais que nous venons de parler de la position fixe et de la façon dont elle est utilisée pour coller les menus, mais en réalité, la valeur collante est en fait un peu plus utile. Et c'est un peu mieux à utiliser que la position fixe. De quoi je parle en ce moment ? Vous pouvez voir que l'édition rapide complète CSS et JavaScript. C' est toujours réparé. Il ne bouge jamais. Il n'est jamais à l'école. Ça n'a jamais été à l'école. Droit ? Si vous revenez pour nous aider à classer, ce que je vais faire, c'est que je vais changer fixe ici trop collant. Et retirons la gauche. 700 pixels. Sauvons. Retournez aux cloches sont maintenant. Si je renvoie la page maintenant, vous pouvez voir le texte ici. C' est depuis la position naturelle normale. droite. Et comme nous commençons à l'école, c'est aussi la scolarisation. Normalement, rien ne s'est passé jusqu'à présent. Mais alors que nous continuons à scolariser le couple appelle maintenant vous pouvez voir qu'il a atteint. Je suis désolé. Maintenant, vous pouvez voir ici. Il a atteint le sommet du port de vue. C' est le genre de frères en ce moment, si je continue à faire défiler vers le bas. Ce n'est plus l'école dans tout le contenu. Bénéfice va maintenant commencer l'école dans le haut, scolarisation, scolarisation sur la sarcelle pour arriver à ce point où il maintenant aussi les écoles vers le haut, mais à une certaine plage ici, il n'a pas défilé vers le haut. Maintenant pourquoi, c'est parce qu'il y a une restriction avec élément collant. Fondamentalement, un élément continuera à être collant tant que son parent est visible dans le port de vue. Si nous revenons à notre index point html et que nous venons ici, le parent ici est ce Dev particulier. Donc, tant que nous pouvons voir le contenu de ce Dev entier, l'élément ici, qui a la personne hors collante, continuera à coller en haut du navigateur. C' est comme ça que ça marche. Donc, pour démontrer cela, faisons-le. Ok, je vais les enlever ici. Je vais l'emmener jusqu'au sommet par ici ? Et en fait, faisons ça. Je vais créer une nouvelle balise ici et appeler ceci Appelons ceci une autre balise Hone. On va vous donner l'idéal réparé, et on dira juste, euh, je suis collante, vous savez, comme chacun d'eux. Ok, je vais aller de l'avant et enlever ces étiquettes h un juste ici parce qu'on ne veut pas avoir plus d' une étiquette h un sur une page. Sauvegardez ça. Retourne à une Boza. Allons par ici. Actualisez la page. D' accord. Vous pouvez voir que je suis collante en haut juste là. Et c'est ce que l'on appelle là-bas commence à l'école. Mais maintenant, il va toujours être au sommet parce que ce sont les parents est essentiellement le tag body qui occupe fondamentalement, qui est fondamentalement le parent de tout le contenu sur la page Web. Démontrons encore un peu plus. Je vais retourner à la fixe ici et je vais dire, Ma Jin top off, disons 100 pixels, droite que sauver ça, retourner à la navigation vers le haut, nous allons rafraîchir et OK, donc vous peut voir en ce moment c'est la position soudaine parce que nous avons donné Imagine de 100 pixels en haut Maintenant, chaque école vers le bas, vous pouvez voir qu'il se refroidit. Il appelle jusqu'à ce qu'il se lève, et ensuite il sera toujours là haut. Donc, en réalité, si vous voulez créer vous-même un menu collant, utiliser la position off sticky peut en fait être mieux que d'utiliser ce off fixe. Donc je sais que cette vidéo a été très, très longue, mais j'espère que vous avez maintenant appris les différentes valeurs pour votre poste. Propriété relative, figues absolues. Et, bien sûr, collant. Merci beaucoup d'avoir regardé la vidéo. Je te verrai dans le prochain cours. 37. La propriété d'index Z: Jetons un coup d'oeil à une dernière propriété. Je sais. J' ai dit dans la vidéo précédente que la position serait la dernière propriété, mais je promets que ce sera la dernière propriété dont on parlera. Et cela va être la propriété Z Index. Assez utile. Maintenant, pour expliquer ce que cette propriété particulière qu'il fait. J' ai fait ah quelques petits changements à notre document HTML. Fondamentalement, ce que j'ai fait ici, c'est que j'ai donné la position de la balise orange P des absolutes, puis la position supérieure moins quatre pixels, puis la grande balise P. Je lui ai donné la position absolue, puis la position supérieure moins 10 pixels. Mais j'ai aussi fait le Dave ici qui les tient. Je lui donne la position de parent afin qu'ils utilisent ce Dave particulier comme leurs points de cheville. Et bien sûr, c'est le résultat ici. Vous pouvez voir en ce moment que le deuxième jour de avec le i d off grey chevauche la première balise API avec le i d off orange. C' est là que la propriété d'index Z entre en jeu. Et si nous voulions que le Pitak orange soit réellement affiché en premier, puis affichera la balise P grise derrière elle. Qui utiliserait ça ? L' indice de ce genre de situation. Donc, le velours par défaut tombe, l'indice est zéro. Donc, tout ce que vous devez faire dans ce cas en ce moment pour pousser le Pitak Ford orange serait fondamentalement de venir ici et ensuite aller au P sur le moteur et lui donner un indice Z tout ce qui est au-dessus de zéro. Donc nous pouvons juste dire vouloir, par exemple Allons-y, sauvegardez ceci. Retournez ici, actualisez la page. Et maintenant vous pouvez voir que l'élément P avec l'idée d'orange est maintenant en avant. Il s'agit de l'utilisation de l'index Z. De même, on pourrait retourner ici et dire, OK, eh bien, on va donner ah grise tag maintenant. L' indice est de quatre ? Non, je sauve. Et comme vous le devinez déjà, ça va retourner devant la pizza avec le I D off. Toujours. C' est essentiellement ce que nous utilisons l'indice quatre de Dizzy. Merci d'avoir regardé. Je te verrai dans la classe suivante 38. Spécialité CSS: une partie de cette section sur CSS. Parlons de CSS Spacey C T. Maintenant, c'est un concept extrêmement important de CSS, et c'est un que vous devriez connaître car, comme je l'ai dit, c'est très, très important. Qu' est-ce que c'est exactement la spécificité ? Eh bien, disons, par exemple, il y avait deux ou plusieurs règles CSS contradictoires qui pointaient exactement le même élément. Votre frère dans ce cas suivra quelques règles pour déterminer lequel est le plus spécifique et sera donc appliqué aux éléments. Maintenant, pensez à la spécificité comme un peu comme une école ou un grade. Ils détermineront quelle déclaration de style est finalement appliquée à un élément. Maintenant, juste pour que vous sachiez , la spécificité , la spécificité est généralement une raison pour laquelle certaines de vos règles CSS ne s'appliquent pas à certains éléments. Même quand vous pensez qu'ils tirent, c'est généralement parce qu'il y a une autre règle qui est un peu plus spécifique que celle avec laquelle vous marchez actuellement. Alors, quelle est exactement cette spécificité, hiérarchie ? Toutes ces règles bien, il y a essentiellement quatre catégories qui définiront le niveau de spécificité d'un sélecteur . Vous avez les styles de ligne, qui, bien sûr, nous avons fourchu avec c'est essentiellement celui où vous appliquez un style directement à un élément, généralement dans un document HTML. Ensuite, vous avez les idées avec, bien sûr, le symbole de la balise de hachage. Ensuite, vous avez vos classes, attributs et classes de cèdre. Nous avons parlé de classes et d'attributs. Les cours en parleront plus tard. Et enfin, au niveau 4, vous avez vos éléments et vos pseudo-éléments, dont, bien sûr, nous ne parlons pas. Pourtant, les éléments en parleront un peu plus tard. Ce sont les quatre catégories principales avec la ligne vend les quatre plus puissants par DS et classes, puis vos éléments. Alors, comment calculez-vous exactement cette spécificité ? Jetons un coup d'oeil à quelques exemples ici. Maintenant nous avons votre étiquette Regula chacun juste sur son propre, mais ensuite vous avez la classe H, et ensuite vous avez le I.D. I.D. H. One aussi. Et enfin, vous avez le style en ligne plein de celui H. Tous ont des couleurs différentes s'appliquent à eux, mais en fin de compte, c'est l'option D, qui a l'étalon Ellen dit Wind out parce que, eh bien, c'est le plus puissant maintenant, si nous avions seulement trois options avec les éléments I D et classe. Eh bien, c'est l' I.D. I.D. dans ce cas qui l'emporterait parce que les idées sont plus spécifiques. Ils sont plus puissants que les cours. Et enfin, bien sûr, si vous aviez seulement deux options entre l'élément et dans la classe, la classe gagnerait. Parce que la classe est plus spécifique. C' est plus puissant que l'élément qui se tient seul. Maintenant, dans un cas rare où la même règle est écrite deux fois dans un truc de style externe, alors c'est généralement la règle Lowell qui sera appliquée. Donc, dans ce cas, par exemple, si vous aviez deux couleurs d'arrière-plan différentes pour exactement le même élément dans ce cas en ce moment , le jaune est appliqué d'abord, puis lu , qui est deuxième, sera celui qui sera finalement appliquée car elle est inférieure à la Déclaration jaune dans la feuille de style. Jetons maintenant un coup d'oeil à la spécificité CSS en action. En utilisant des exemples de vie et on va le faire, on va cibler cette structure ici . La bombe avec l'étiquette de corps tout le chemin par ici. Donc, fondamentalement, nous avons l'élément de corps, qui est l'élément le plus extérieur. Nous allons avoir la section, la suivante, la viande, c'est ah, élément intérieur. Et puis à l'intérieur de cette section sans avoir Dev et puis au lieu de la journée si nous avons le Pitak ici et alors vous pouvez voir aussi avoir la taxe m d'un bien que nous allons cibler l'attaque parce que c'est l'élément le plus intérieur sera l'utiliser comme un cochon . Dans cette expérience, permettez-moi, tout d' abord, d' aller de l'avant et de supprimer ces h un parce que nous n'en avons plus besoin. Sauvons. Je vais passer à mon style ce CSS et je vais également supprimer la couleur de fond pour ce Dev particulier avec la classe de rouge. C' est juste là, donc je vais enlever ça. Supprimons ce fond d'écran. Kahlo. Sauvons. Retourne, Teoh Broza et d'accord, donc ça a l'air bien qu'il devrait trouver. revenons pas aux parenthèses, et la première que je vais faire c'est que nous allons donner à l'étiquette de corps l'élément de corps. Donnons-lui une couleur, et ça va être mon préféré de tous les temps. salope de Kahlo paie. Je plaisante. Ce n'est pas ma couleur préférée. Retournons en arrière, Teoh. Comment c'est ? Rafraîchissez la page et ok, donc rose a pris le contrôle. OK, revenons en arrière. Et maintenant ce que je vais faire ici, c'est ça. Ok, donnons cette section. Donnons-lui une classe de section 8, accord ? Et puis pendant que nous y sommes, venons aussi ici et donnons cette classe d'élément p particulière de disons, classe, classe, pas une armée de classe. Donnons-lui un cours. Tu sais, Dash P, on va aussi le donner sur I d Oh, hors Dash P. Je ne suis pas créatif avec mes idées et mes cours, mais hé, peu importe. Faisons-le juste. Allons juste passer à autre chose. Je vais sauver ça. Retournons à Estella. CSS. Ce que je vais faire maintenant, c'est que je vais donner la classe de la section 8. C' était la section 8 ? Je confirme que c'était la section. Je m'assure juste que je ne perds pas la tête ici. Aides de section. Et puis donnons à ça une couleur à Aquaman. D' accord, Akwa est en sécurité. Retournez à la navigation. Ah, rafraîchissez la page. Akwa a pris le relais. Ok, très bien. On sait tout ça. OK, continuons. Celle-là se passe juste ici. Maintenant juste pour que vous soyez conscient, la classe est évidemment plus puissante que les éléments réguliers, donc la classe sera plus déconcertée et juste sanglante Nous en avons déjà parlé, mais revenons à l'index de chaque courrier de jour. Sauf s'il y a autre chose en lui. Nous avons ciblé cette classe, non. Section huit. Nous allons ajouter une couleur pour le Dave en ce moment, qui a également une classe de rouge et donnera également à ces classes P ici une autre couleur différente aussi. Alors faisons ça. Je vais venir ici maintenant, et je vais dire « OK pour Red ». Vous avez déjà la collection ici. On va lui donner sa propre couleur rouge, mais regarde ça. Je vais venir ici maintenant, et je vais dire, quel est le cours P ? Ce n'est pas P. Alors je vais venir ici et voir dans un tableau de bord. P a sa propre couleur et allons-y avec Ah, voyons, lequel allons-nous ? Allons-y avec du corail. Très bien, c'est sûr. Ok, donc maintenant qui va gagner ce concours ? Parce que nous avons des cours. Maintenant, nous avons donné section huit sa propre couleur. Nous avons donné à la classe rouge son propre Qala. Nous avons également donné à la classe NRP son propre appelant. Alors, lequel va gagner ? Revenons à nos arcs sur préfère la page et maintenant vous pouvez voir que ça va être curl. Essentiellement, cela en a une. Mais l'endroit où la couleur a également gagné d'une certaine manière. Pourquoi, Si nous revenons à notre document, jetez un oeil à cela. Même si ce Dave contient cette classe P ici dans un p et que nous avons donné cette couleur de dans un morceau de corail par, nous avons donné ce Dave juste ici de rouge parce que la classe P ici est plus proche de ces balises m juste ici avec le texte. Ça va s'appliquer au M. Le M va avoir l'appel de corail. Si nous revenons à un navigateur ici, vous pouvez voir que les crochets sont un type différent de celui-ci. Il aura la couleur corail parce qu'il est à l'intérieur. Il est à l'intérieur d'un élément p qui a une classe hors dans un P. Donc, même si le Dave juste ici qui détient aussi d'une certaine manière ces balises m. Même s'il avait son oncle de Rouge, le M irait avec les ancêtres les plus immédiats Notre style. Dans ce cas en ce moment, la classe P a eu l'appel P. C'est pour ça que le M est allé avec. Mais faisons un peu de torsion ici. Revenons au style que CSS cette même classe P exactement ici qui a une proche d'une API, nous allons donner son propre I d une couleur différente. Il est sorti. R p je vais copier ceci. Revenons ici. Approchez ça. Allons nous changer. Apparaissent maintenant aussi. En dehors p Et puis pour la couleur. Voyons voir. Mais allons-y avec Blue. Simples. Retourne ici à Broza. Actualisez la page. Oh, attends une minute. Oh, je pense que ça peut être fait une erreur et Oh, oui, bien sûr. On a fait une erreur. Oui, je n'ai pas changé la classe en I D je suis un idiot. Pardonnez-moi. Bon, alors à Pete. C' est le I d. Retournez au Broza. On est frais et maintenant tu y vas. La couleur est maintenant passée au bleu parce que n'oubliez pas que les idées sont plus spécifiques que les classes. Mais nous n'avons pas fini. Revenons à l'index du HTML et sortons pour le M ici. On va lui donner son propre style, c'est égal à l'appelant. Et allons-y avec ah ah, Azzurri. Et je suis sûr que vous savez déjà quel sera le résultat ici. Vous pouvez voir que c'est maintenant la couleur Azzurri en action parce que nous l'avons donné. Et dans le style de ligne, qui est, qui est,bien sûr, les plus puissants sont la fermeture que vous pouvez donner à un élément particulier. Donc c'est tout pour CSS. La spécificité sera marcher avec cela beaucoup plus dans la toute prochaine section. Mais c'est tout. Merci beaucoup d'avoir regardé. Je vous verrai dans la section suivante. 39. Aperçu de la section du projet: d' accord. Le moment est venu, et j'espère que vous êtes prêt parce qu'ensemble nous allons construire ce site web complet intitulé Web Impact. Maintenant où l'impact est, une entreprise d'affaires fictive a construit son entreprise. Ils se spécialisent dans les services Web. Services Internet. Fondamentalement, si l'offre. Des choses comme les services de cybersécurité. Ah, design Web. Quelle application de l'homme consacrer ? Instance d'application comme ça. Donc celui-ci, Pedro Upside, c'est tout pour promouvoir l'entreprise et décrire ce qu'elle est . Donc, comme vous pouvez le voir à la tête de nous avons, ah, logo, nous avons ah menu de navigation Mei. Nous avons également cette section où vous avez, comme le titre principal, découvert qui ils sont. Vous pouvez voir l'image d'arrière-plan se fond essentiellement dans l'arrière-plan parce que le logo et dans le menu de navigation sont au-dessus de l'image Baghlan. Alors je vais vous montrer comment vous pouvez y arriver. Vous avez l'idée de deux boutons, et environ une section sept est également fournie section. Pourquoi marcher avec ces très, très important un mythe ? L' équipe Il y avait huit d'entre eux section Témoignage une section client, bien sûr. Et puis enfin, un contact ou une section avec un formulaire. Et bien sûr, il y aura un pied de page avec d'autres liens, des similitudes sur les réseaux sociaux et, bien sûr, le texte réservé à tous droits. Donc, comme vous pouvez le voir, c'est un complet. Page ont été bouleversés, mais il ne s'agit pas seulement du contenu et des sections sur les colonnes. Il y aura aussi une animation que vous pouvez voir. moment, vous voyez ce bouton juste ici à la lumière. La plupart de toutes ces sections ont ce particulier sont apportés dans ces deux flèches. Lorsque vous cliquez sur cette flèche, elle vous ramène tout le chemin vers le haut, ce qui est utile, très utile pour les sites Web d'une page, donc je vais vous montrer comment vous pouvez y parvenir. L' hôte du logo a également un peu. Animation contre quand vous survolez sur le cercle commence à tourner sont continuellement de sorte que ces autres petites compétences supplémentaires que vous pouvez appliquer pour vraiment faire un site Web se démarquer et le rendre faveur excité. Donc, jusqu'à présent, si bon. Vous avez appris sur html même voir évaluer. Mais c'est une autre chose de pouvoir combiner les deux pour construire un site web complet. C' est donc exactement ce que vous allez apprendre dans cette section. Vous allez dans un peu plus HTML Et bien sûr, vous apprendrez beaucoup plus. CS l'est aussi. J' espère que vous aussi excité que je suis, parce que maintenant c'est la vraie affaire maintenant, mais obtient dans un mal vraiment, vraiment la dette. vois, on construit quelque chose de réel. Alors asseyez-vous, détendez-vous et j'espère que vous apprécierez la section Commençons. 40. Téléchargez la section projet des fichiers: tout droit donc jamais de commencer le produit. Mais avant de le faire, j'ai besoin de vous pour télécharger des fichiers. Vous les trouverez dans la section Protéger ou dans les pièces jointes de cette vidéo, selon l'endroit où vous suivez ce cours. Mais vous trouverez son de fichiers Final code et protéger kit de démarrage. On va travailler avec les projets. Sujet. Tout d'abord, vous trouverez un fichier d'index. Il dit fichier, c'est le code va étudier, le mettre avec. Et puis le code final est le code complet pour tout le cours. Vous pouvez l'utiliser comme référence chaque fois que vous êtes coincé et enfin il y a un guide de systèmes externes de crédit pour vous. Il va vous fournir quelques conseils très rapides sur CSS XML et aussi quelques liens vers d'autres sites Web. Nous pouvons en apprendre plus sur HTML et CSS. J' espère donc que vous trouverez ce fichier très, très utile. Alors c'est tout. Allez-y avec les dossiers et je vous verrai au début du projet. 41. Le code de démarrage: Donc j'espère que vous avez pu extraire les documents et les fichiers, et c'est ce que vous devriez rester avec. Une fois que vous avez terminé, vous aurez le fichier html point d'index, ce qui est bien, comme vous pouvez le voir en ce moment, il n'y a pas encore de contenu et le fichier, Mais alors, dans votre dossier Assets, vous devriez avoir à tous les dossiers que vous aurez le CSS, puis images images. C' est assez simple ici. Vous auriez votre logo d'icône de fave. Le héros, qui sera un sac sur l'image, jettera un coup d'oeil et vous aurez ensuite des images pour les membres de votre équipe pour les clients aussi . Et puis, bien sûr, pour les tours de sac, qui utiliseront, puis pour le dossier CSS menant ici, vous devrez fichiers le point principal CSS, qui aura déjà du code dedans. Tout ce Cordy est déjà familier avec pourquoi tu as le tag ? Vous avez le fonds, la taille de la police familiale, le sac et la couleur et ainsi de suite. J' ai l'attaque ici pour fort, ce qui rendra le texte gras au poids avant de 700, puis pour la tête comme hors éditer un style pour H deux h trois et dans le paragraphe ont également ajouté trois propriétés pour le plaisir hauteur de la ligne de taille, puis une certaine marge. Alors bien sûr, fur et à mesure que nous progressons dans le cours, nous pourrions faire quelques petits ajustements ici et là. Mais c'est le froid que vous devriez rester avec pour le point principal CSS, puis pour le point d'index html, nous avons le code similaire que vous avez vu auparavant. Chaque langue humaine, quelques attaques à la tête aussi. Ici, nous avons le titre sera impact construire des sites Web étonnants et juste ici, nous avons lié les deux feuilles de style normalisées jusqu'à CSS, dont je vais parler en un instant principal de CSS, puis aussi les cinq icônes. Vous le trouverez ici aussi. C' est l'icône cinq pour le site et maintenant il ressemble à un regard sur le CSS normalisé . Alors, qu'est-ce que c'est ? Fondamentalement. Laisse-moi venir ici. Le normalisé de CSS est un fichier écrit par un individu particulier qui aime CSS. Mais ce qu'il fait est qu'ils fichiers sont des hommes pour stabiliser la façon dont votre contenu ressemble à tous les différents navigateurs. Donc, l'idée ici est que par défaut les différents types de navigateurs Firefox, Internet, Explorer, chrome. Ils ont des façons légèrement différentes d'interpréter le contenu. Donc, titre d'exemple, si vous essayez d'afficher dans un H une balise avec, Disons Firefox, Firefox pourrait ajouter, nous aimerions 0,5 pixels marge à un H avant komm, komm pourrait ajouter un point à stagiaire Explore peut ne pas ajouter de marges et ainsi de suite et ainsi de suite. Donc, fondamentalement, l'idée ici est de rendre votre quantum exactement le même dans tous les navigateurs. Maintenant, si nous regardons de plus près le code lui-même. Mais, je veux dire, j'ai ouvert ça ici, il y en a beaucoup. Il y a beaucoup de cordage ici, beaucoup de visuellement familier avec, par exemple, donc ici, vous pouvez voir que les commentaires ici, droite, par exemple, comme lourds disons supprimer le marge dans tous les pouvoirs en tant que tel. Comme je l'ai dit, certains frères pourraient ajouter une marge supplémentaire à la définition de types de balises. Donc ici, nous avons dit que la marge est fixée à zéro pour le corps. Le principal affiche que pour bloquer une houle ici, vous avez quelques propriétés supplémentaires et quelques valeurs. Alors faites défiler vers le bas. Vous commencez à tout voir. Mon mort de l'espace modèle familial plein les étiquettes K B D. Sam et ainsi de suite. Vous venez jusqu'ici et vous voyez d'autres informations. Ne vous inquiétez pas. Je connais certaines d'entre elles que vous ne connaissez pas encore, mais à la fin de ce cours, vous serez en mesure de comprendre exactement ce que sont toutes ces propriétés et ce que les valeurs signifient également. C' est donc à peu près le code que nous allons commencer. Donc, l'Allemagne, très prochain verre disponible maintenant commencer à construire l'en-tête pour notre site Web. 42. L'outil Inspect: Ok, Donc avant de commencer la section projet, je voulais passer quelques minutes pour vous présenter un outil que nous allons utiliser dans cette section . Et c'est un outil dont vous ne pouvez pas vous passer en tant que développeur Web. Et il y aura l'outil d'inspection. Maintenant. Ce que vous regardez ici, c'est le produit fini qui a été bouleversé, nous allons construire d'ici la fin de cette section. Mais non, il est que lorsque je fais un clic droit n'importe où sur le site Web, vous verrez cette ligne ici froid Inspecter. Maintenant, laissez-moi souligner que j'utilise le navigateur Brave, mais c'est à peu près le même concept sur tout autre type de vues de navigateur. Dans Firefox, vous utilisez Chrome à l'aide de Safari Internet Explorer d'Apple. C' est à peu près la même chose. Vous allez voir, inspecter, inspecter les éléments ou inspecter l'un ou l'autre de ces trois outils. Quand ils cliquent dessus, c' est essentiellement Oh, désolé à ce sujet. Je n'avais pas l'intention que ça se produise. Euh, d'accord. Tu dis que c'est toujours bizarre quand ils enregistrent des choses étranges commencent à se produire. C' est comme, Ah, tu penses que ça tourne. Ils ont leur propre esprit. Ils savent quand j'enregistre et ils commencent à se comporter mal. Alors que s'est-il passé ? Il a fait ressortir cette fenêtre particulière. Et ici, c'est ce qu'on appelle l'outil d'inspection. Il nous permet de jeter un oeil au code html sur la ligne ainsi que le code CSS composant le site web. Donc, ici à gauche, nous avons le code externe ici à la lumière. Nous avons le code CSS. Cependant, si c'est la première fois que vous ouvrez cet outil, vous pouvez découvrir qu'il n'est pas détaché du navigateur. Vous pouvez voir le mien est déjà des détails. Je peux le déplacer. Donc, ce que vous voulez faire pour détacher ce serait tout simplement trop un citron. Tout d'abord, nous l'attachons. Donc, ici, j'ai ces trois boutons. Je vais l'ancrer vers le bas pour que vous trouviez que le tien soit quelque chose comme ça . Comme vous pouvez le voir, il n'est plus détaché, il est connecté, il est fixé à la page. Donc, vous voulez chercher trois boutons en haut juste ici. Et cela dépend de votre navigateur. vous pourriez dire quelque chose comme détacher. C' est généralement dans la première ou la deuxième option. Donc le mien dans ce cas parce que j'utilise les pouvoirs courageux. Je suis similaire va cliquer sur le verrou ici et maintenant il est gratuit. Donc, si vous utilisez brut, vous pourriez dire quelque chose comme détacher ou libérer ou quelque chose comme ça. Tout dépend, mais c'est généralement la première de la deuxième option. Ok, donc le mien a été attaché. Et regardons de plus près ce que nous avons exactement ici. Comme je l'ai dit, Alia, ici à gauche, nous avons le code HTML à droite. Nous avons le code CSS, Mais remarquez que lorsque je mets ma souris autour des éléments du côté HTML différentes parties de ma page d'être mis en surbrillance C'est de vous dire que Hey, où vous êtes en ce moment. Mais vous vous concentrez sur Est cette remarque de zone particulière que j'ai ma bouche en ce moment sur cette classe de marque, et vous pouvez voir ce qui a été mis en évidence tête la voie de l'impact et le logo n'est pas mis en évidence. Ça devrait vous dire ça. Ok, moment, ce moment,c'est l'élément tenant ou contrôlant ce site Web tout le monde dans la tête, j'ai le logo et le texte. Si je fais défiler vers le bas. Si je suis passé à la classe des hommes de la Naff, vous tous d'un coup maintenant vous pouvez voir le menu devient mis en évidence. Donc, si je veux marcher sur le menu, je peux venir ici, puis simplement ouvrir le menu et commencer à marcher à l'intérieur. Il remarquera également que nous avons des pommes pointant vers la droite qui indiqueront qu' à l'intérieur de cet élément particulier, il y a d'autres éléments. C' est pourquoi quand je clique sur le bien sûr de cliquer sur la marque, leur avis que nous avons maintenant un DIV ou la classe de logo dash rap et puis il y a aussi un nom froid de classe SPAN. Les deux ont aussi assez d'éléments pour que je puisse cliquer sur la fin du rap local en cliquant là, et maintenant j'ai une balise A, mais ils sont encore étroits. Je cuisine sur le nouveau, et ici vous pouvez voir que nous avons maintenant l'image, un avis que lorsque je survole la classe d'image, il peut voir l'aspect du logo. Cela n'a pas été mis en évidence spécifiquement le logo circulaire et notez qu'il n'y a plus . J' étais juste nous dit que l'image cause ici c'est l'énorme enfant hors de ce jour particulier. Si la même chose s'applique à la classe espagnole de nom, je peux l'étendre au lieu d'avoir une tactique et la dépenser à nouveau et invitant et dire, nous avons à Espagne classes un pour le texte Web pour légèrement le Web, quatre texte barre oblique et puis l'ordre d'impact. Et c'est là. Donc ce que je vais faire en ce moment, c'est que je vais essentiellement étendre tous les éléments et ici vous pouvez voir que c'est fondamentalement les trop grands grands-pères des grandes momies de cette page particulière que nous avons eu. Et puis nous avons corps corps corps est l'étiquette tenir dans tout. Mais même à cette note que les deux sont toujours à l'intérieur du HTML la balise html tout-puissant , la balise tête, essentiellement rituel a pris un bateau a juste les liens vers cinq icônes. Deux scripts et ainsi de suite en parleront plus tard. C' est en fait la balise body dans ce cas qui contient tout le contenu de la page entière. Et quand j'élargis l'étiquette du corps, vous pouvez tous voir que c'est comme le lieutenant David ou les sections de lieutenant ou les généraux de toute la section principale. Donc, nous avons la tête en haut. Notez, au fait, que quand j'ai sur Hedda, il semble que c'est la page entière. C' est Bean mis en évidence, mais ce n'est pas vrai. Si je fais juste défiler ici et je retourne à la tête, j'ai remarqué que la tête sur les arrêts juste au-dessus du texte de Bagram Bethea Potter blanc qui nous dit que Ok, c'est la zone que la tête d'un tag occupe. Il occupe le sac, une image de voir le logo et puis, bien sûr, le menu. Et si je commence à faire défiler ici, les membres appelés avec les cloches, vous pouvez voir que nous avons mis en évidence la section à propos. Nous avons la limite. Céramique Cela peut être un peu plus petit. Allons plus loin. Vous pouvez voir que nous avons la section à propos de nous sert une section. Nous avons la ah, Pourquoi nous section juste ici été mis en évidence. Comme vous pouvez le voir, il va de même pour l'équipe. Vous avez des témoignages et ainsi de suite. Et ainsi de suite. Ok, laisse-moi agrandir ça. Vous pouvez également remarquer que lorsque nous survolons dans toutes ces sections, vous pouvez commencer à voir différents types de couleurs, en particulier le Kahlo vert. Tu vois cette couleur verte ici ? Juste en bas à droite. Laisse-moi peut-être me droguer un peu. Donc vous avez dit que cette couleur verte juste là qui dit que c'est Padden Green dans ce cas indique un brevet. Cela peut également dépendre de votre navigateur. J' utilise Brave. Comme je l'ai dit. Et avec Brave Green signifie notre Padden. Et s'il note, c'est si je clique sur la section I d. Laisse-moi venir ici. Je vais décocher cet enregistrement de boîte qui reste des pixels brevetés. Si je ne vérifie pas cela, je supprime le modèle. Maintenant, vous pouvez voir qu'il y a un rembourrage normal. Eman Eindhoven services. La couleur verte n'existe plus. Donc une fois de plus, ah, vert habituel représente Padden. Et puis pour la marge, vous pourriez avoir un autre type de couleur off, qui est généralement peut-être orange. Donc, cela va en ce moment notes est que quand je plane sur la mort, fermer le contenu, beaucoup de notes larges est que nous avons maintenant orange sur la science à gauche sur les lumières Cela signifie que montre moniteur qui montre les marges ont été appliqué. Donc encore une fois cela dépend de votre navigateur Orange mes hommes motifs dans vos propres sourcils sur le mien. Dans ce cas, orange est de la nôtre pour les marges et en vert, qui peut également voir l'idée verte est ou les motifs. Parlons des aspects CSS. Maintenant, ici à la lumière. Comme je l'ai dit, vous avez les sections CSS. OK, donc tout dépend de l'aspect de la zone de votre site Web que vous décidez d'inspecter. Si je suis venu ici et je fais un clic droit sur le bouton d'envoi et je vais vous inspecter, nous voyons maintenant qu'en fait, l'outil nous a emmenés directement dans la zone HTML où le fond a été sorti Mettez, vous pouvez voir qu'il est juste ici. Vous pouvez le voir. Il appartient à la diff fermer le champ de tiret de charbon, et il a une classe de boutons de viande et en vert a trois classes différentes. Mais il est intéressant regarder ici à gauche, et je suis sûr à droite et à droite ici vous pouvez voir que le CS a été appliqué à ce bas . Vous pouvez voir que c'est là que nous avons le bagbagbagman. Coehlo. Donc je suis venu ici maintenant et ils ont cliqué sur la valeur. Et j'ai dit : Tu sais quoi ? Je vais changer pour lire. Maintenant, vous pouvez voir tout d'un coup la couleur est maintenant passée du vert au rouge. Note. Cependant, ne soyez pas trop excité. Ces changements, je voulais dire la vie. Ce n'est pas comme quand tu fais un changement ici. Il est automatiquement sauvegardé. Non, c'est juste plein. Notre front et les tests fondamentalement viable. Actualisez la page. Le changement reviendra à la normale. Pour revenir à l'initiale sont la couleur citron. L' utilisation de l'inspecteur est juste pour vous permettre de voir vos changements de vie au fur et à mesure que vous les appliquez, de sorte qu'au lieu de devoir aller au revers, appliquez votre code. Dites, si vous revenez pour parcourir toutes les nouvelles, vous pouvez simplement appliquer ces modifications. Blanc se battre là au get go et voir à quoi ils ressemblent de la même façon que je pourrais changer la taille du téléphone, qui est de 15 pixels en ce moment. Je pourrais aller avec quelque chose de plus gros. C' est la façon d'or à 30 pixels sur ma journée peut voir ceci est à quoi ressembleraient les pixels. Cependant, je veux aussi que vous vouliez aussi votre attention à quelque chose que certains boutons pourraient avoir, comme un effet de vol stationnaire. Ou certains élèves peuvent avoir un effet de vol stationnaire. qui signifie que quand vous passez la souris sur eux comme je le fais en ce moment, quand vous planez et que quelque chose se passe, comme vous pouvez le voir en ce moment, quand je passe en bas chacun et est quelque part au vert. Donc, si vous voulez vérifier le CSS pour tel, ce que vous aurez besoin de faire est un peu délicat un peu. Mais ne vous inquiétez pas. Je vais te montrer ici, je le dis. Mais vous avez les sont fondamentalement la barre d'outils que vous pouvez voir. Vous avez l'état des éléments à bascule Hoff d'un clic là. En ce moment, vous pouvez voir les différents types d'états que le cannabis qui peut être appliqué au bas nous recherchons hover droit ? Donc, si je clique sur survol juste là, remarquez que maintenant Avez-vous maintenant Le CSS a été appliqué quand nous ho sur le fond. C' est bon. Il ne peut pas le voir, dit Button. Que soumettre et puis deux-points survolent et que vous considérez, cependant l'effet juste là étant appliqué. Donc la raison pour laquelle j'ai dit que c'était mon truc de bébé, c'est parce que différents frères ont différentes façons de déclencher les états de vol stationnaire. Mais tout le monde l'a. Vous le trouverez quelque part le long de la barre d'outils. Donc limiteurs sur. Vérifie encore ça. Et comme je l'ai dit, tout le point sur les inspecteurs vous permet de jeter un oeil à la structure html sur la ligne d'une page, puis essayé d'appliquer des changements CSS en direct. Encore une fois, faisons un de plus. Si je suis allé à la disons, laissez-moi venir ici Teoh Services fournis nuit Donc nous avons le service fourni lumière section ici. Si je vais aux services tout le chemin vers le haut ici et je clique là-dedans maintenant vous pouvez voir les services a l'idée de services. C' est l'image Baghlan appliquée. Je pourrais choisir de posséder cochez la case et vous pouvez voir en ce moment nous n'avons plus une image d' arrière-plan a été appliquée parce que nous n'avons pas encore coché la case. Tu peux faire des changements dans la vie. Laisse-moi remettre ça. Permettez-moi d'élargir la section. J' ai une classe de contenu. Ok, je vais l'étendre pour le service H 2 fourni. Donc, si je clique sur l'âge à marquer en ce moment ici à droite, vous pouvez voir tout cela a été appliqué à notre H deux. Nous avons un téléphone dit après deux pixels, une rançon texte de majuscules et ainsi de suite. Donc encore une fois, je peux venir ici et dire, OK, le poids avant est financé. Essayons 800 à la place. Maintenant, vous pouvez voir le Texas beaucoup plus audacieux parce que nous sommes passés de 400 à 800. Vous pouvez développer la balise A ici pour ce lien. Vous pouvez regarder de plus près et voir comment il est construit, faire des changements de vie, etc. C' est donc l'idée derrière l'utilisation de l'outil d'inspection sur n'importe quel site Web. Maintenant, pour terminer cela, je voulais juste vous rappeler que vous pouvez appliquer l'outil d'inspection à n'importe quel site Web sur Internet. Peu importe si le site est pour le FBI, la CIA et la Maison-Blanche . Peu importe. Tant que le site Web est en direct sur Internet, vous pouvez l'inspecter. Alors je l'ai fait. Par exemple, je suis sur le web singe académie dot com je peux décider de faire est juste Cliquez ici, cliquez sur Inspecter et puis commencer à faire Ah, juste quelques changements amusants, non ? Donc, à titre d'exemple, je pourrais même cliquer ici où vous avez le HTML et je pourrais changer le texte juste pour le plaisir de lui et dire Ah, et juste dire, Hey, les gars, vous savez, Regarde-moi ou quelque chose comme ça. Juste quelque chose de bizarre, non ? Appuyez sur Entrée. Et maintenant tout d'un coup, le Texan dit maintenant : Hé, les gars, regardez-moi. Juste le point de la Chine lui faire est que vous pouvez faire tout ce que vous voulez faire sur le site comme nous si vous êtes celui qui possédait réellement ce site Web afin que vous puissiez apporter des changements à la Kahlo, les tailles de téléphone et ainsi de suite et ainsi de suite et juste avoir un peu de plaisir. Mais sur les notes les plus sérieuses, si vous vouliez vraiment jeter un oeil et voir la structure HTML ou peut-être même le sexe a été appliqué à un site Web, vous pouvez le faire avec Inspector juste pour obtenir une inspiration ou juste pour avoir une idée de . Comment quelque chose Ce qui n'a pas été fait comme exemple. J' ai Facebook tiré ici, et j'aime vraiment, vraiment, vraiment le col bleu que Facebook a. Cette nuance particulière de bleu est l'un des vraiment ce probablement ma nuance préférée de bleu . Donc, si je voulais savoir quelle couleur c'est, je peux probablement tout à fait jour sur la barre, cliquez sur inspectes et puis tout simplement commencer à regarder autour ici et voir. Juste commencer à basculer entre les éléments et la Syrie. D' accord ? Vous pouvez voir en ce moment c'est exactement là où nous avons l'arrière-plan appliqué Corbyn et pour confirmer que si je décoche cette case Ok. Toujours la même leçon. Des livres de dames. Ok, donc maintenant vous pouvez voir que la couleur de fond bleu n'est plus là. Donc, cela nous dit certainement que Hey, c'est la couleur été appliquer cette nuance particulière de bleu et c'est la valeur. C' est trois bêtes. Ça doit être 5998 et voilà. Donc, encore une fois, vous pouvez utiliser inspecter les éléments pour en savoir plus sur le site Web Quelles couleurs ils utilisent dans. Même la famille du conseil qu'ils utilisent, est-ce pas ? Donc si j'ai peut-être mis en évidence ce texte ici, clic droit, inspectons. Voyons ce que les familles amusantes sont utilisées ici. Asseyez-vous. Pouvez-vous le trouver ? Ah, on ne voit pas Ok. C' était comme Helvetica Arial. Certains ont survécu, mais c'est annulé, comme vous pouvez le voir. Donc, chaque fois que vous voyez comme un tableau de bord apparaissant sur la propriété et c'est Celadon, une autre valeur hors éclairage de mercredi sont développés que vous regardez actuellement. Donc pour faire ça, on doit aller, donc tu peux voir pourquoi. Aujourd'hui, une autre famille amusante pervertie est déclarée ici. Et ça s'appelle Hériter. Donc hériter signifie juste que la famille du téléphone a été prise d'une mort qui est au-dessus de ce diable particulier regardant. Donc, si nous commençons à cliquer ici, continuez à cliquer ici, vous pouvez voir s'il reste toujours hérité. Ça ne nous a pas changés. Continuez à aller de plus en plus haut. Ok, fermons ça. Élargissons cet héritage héritage ressemble à ce qu'il va jusqu'au corps, puis enfin dans le corps. Maintenant, vous pouvez voir que c'est là que nous avons Helvetica Ariel et sensorielle. Donc, en effet, ils le sont. Le téléphone a été appliqué sur le site, et voilà. Donc, je vais faire selon passer un certain temps, jouer avec l'outil, aller à vos sites Web préférés, clic droit outils inspectés. Essayez de savoir ce que le plaisir dit avoir été appliqué en particulier Barton ou découvrez la couleur de fond appliquée. C' est comme ça et amusez-vous. Plus vous utilisez l'outil, plus vous l'aurez à l'aise à l'utiliser. Donc c'est merci beaucoup de fortune. Si vous avez des questions sur la façon d'utiliser cela pour, par tous les moyens Richard d'être de tendre la main peut être plus qu'heureux de répondre à votre question, parce que c'est une compétence très, très importante à avoir. Merci de regarder, et je verrai dans la prochaine classe. 43. Créer l'entête partie 1: Ok, alors allons construire l'en-tête de notre site. Et j'ai tiré le produit fini ici, et vous pouvez voir que c'est l'objectif. C' est ce que nous visons. Alors regardons de plus près ce que nous avons à gauche. Nous avons le logo, mais vous remarquerez peut-être que ce logo est en fait deux parties. Vous avez l'image que IHS tourne autour quand nous survolons dessus, et puis vous avez le texte réel, qui notre web et un impact. Donc je veux que vous réfléchissiez un instant. Comment croyez-vous que nous pouvons réaliser ce genre de design ? Je parle spécifiquement d'un texte en ce moment. Vous remarquerez que le Web est en blanc et ces quatre traîneaux et ce qui est bien et un impact a une couleur bleu clair. Comment pensez-vous que nous pouvons réaliser ce genre de design pendant que vous y pensez ? Ici, à droite, nous avons nos éléments de menu. Nous en avons sept et ils ont aussi un style qui va jeter un oeil un peu plus tard. Mais pensons à la structure parce que nous parlons de HTML maintenant. Donc la structure ici est que nous allons avoir un conteneur qui tiendra le logo et ensuite les éléments de menu sur la lumière. Mais alors nous pouvons également avoir une colonne spécifiquement pour le logo, ce qui affaiblit la métrique dans le style, puis une autre colonne spécifiquement pour les éléments de menu. Alors faisons ça. Je vais passer à mes parenthèses, et avant de commencer à ajouter le HTML au fichier xml de point d'index, il y a quelque chose que nous devons faire qui est une faveur importante, et j'ai délibérément oublié cela. La chose est, généralement beaucoup de développeurs ont tendance à oublier de fermer leurs balises. Je suis coupable de ça. Je l'ai déjà fait tant de fois auparavant, alors jetez un coup d'oeil au dossier et dites-moi, quelle taxe pensez-vous que nous devons fermer ? C' est assez simple. Ça devrait être assez évident. On doit fermer à l'étiquette du corps, alors allons-y et fermons celle-là. Tout d'abord, venons ici, accord, et enfin, nous devons également fermer la balise HTML. C' est une autre étiquette que nous devons fermer. OK, c'est que je vais créer un peu d'espace maintenant. Alors amenons ça ici et laisse-moi aller de l'avant et on a déplacé l'Inde et Oh. D' accord. D' accord. Donc la première chose à faire ici est que nous allons ajouter la balise Hedda parce que nous marchons dans la tête haute. Alors faisons-le celle-là. Et puis la puissance du lit. Je vais aussi aller de l'avant maintenant et simplement fermer le Hedda Créons un peu d'espace. Bon, alors qu'est-ce qu'on fait maintenant ? Le premier que je vais faire est de créer le conteneur qui contiendra à la fois le logo et les éléments de menu. Alors faisons ça. On va ajouter un div, et on peut appeler ça. Donnons-lui une classe sur notre contenu. On va réutiliser cette classe en particulier encore et encore et tu verras pourquoi. Donc, ce sera le Dev contenant les éléments de menu et le logo. Allons de l'avant et terminons simplement l'affaire maintenant. D' accord ? Je vais créer un peu d'espace et bien. Ok, donc maintenant on a tout le conteneur. Nous n'avons pas besoin d'ajouter une colonne spécifiquement pas pour le logo. Alors créons une autre Div. Et donnons un cours et je vais appeler cette marque de classe parce que le logo est la marque . Donnons-lui une classe de marque. Fermons le Dev Et maintenant à l'intérieur de la marque Dev, commençons à ajouter le contenu du logo. Donc d'abord, sa première année est que je vais ajouter un autre Dev ici et on peut appeler ce jour de cours. Faisons un cours, disons le rap local, OK ? Et maintenant à l'intérieur de ce Dev particulier, nous allons ajouter l'image, le logo lui-même. Alors allons de l'avant maintenant et donnons-lui une image et nous allons juste donner ces classes. Appelons le logo de la classe. Et maintenant, pour la source, il va être que nous l'avons dans les actifs. CSS Non, comme je suis désolé, actifs, images, puis logo le PNG. Ok, ça devrait être correct. Et je vais ajouter quelque chose d'autre appelé le tout texte. Maintenant, si nous n'avons pas parlé de tout le texte et vous ne savez pas ce qu'il est fondamentalement tout Texas très, très utile parce que les gens qui sont aveugles, ils utilisent un logiciel particulier pour diriger le contenu d'un site Web maintenant parce qu'ils ne peuvent pas voir les images. Et comme un tel logiciel ne peut pas décrire les images, ils utiliseraient le texte alternatif de cette image pour décrire ce que cette image est pour la personne aveugle. C' est donc idéal pour les utilisateurs aveugles. Et aussi les moteurs de recherche comme Google vous récompenseront. Si vos images ont un texte alternatif, il est donc très, très, très important. Donc, pour l'ajouter tout le texte était simple. État Ault égal et puis et Coats. Je dirai le logo Web Impact, parce que c'est ce que c'est, n' est-ce pas ? Logo Impact Web. Et je pense que nous sommes bons et ok, je vais juste aller de l'avant maintenant et sauver ça et regardons ce que nous avons ici. Mais d'abord une page et d'accord, si bien. Maintenant, nous avons le logo qui apparaît. Ok, revenons en arrière. Deux noirs. C' est bon. - Quoi ensuite ? On va ajouter le nom du texte de l'impact sur le Web. Encore une fois, nous allons créer un nouveau Dev ou si nous n'en avons même pas besoin. Compte tenu de ce cas, nous pouvons aller avec une durée simple. Leslie, c'est bon. Je vais aller avec cette durée et nous avons appelé est une classe de dépense égale et et a juste été simplement appelé son nom. Et quand une nouvelle ligne, je vais venir ici et dire que la classe de travée est égale. Alors maintenant, on va ajouter le texte de la force raved, qui est web. Donc on va juste donner un cours à ça. Laisse-moi venir dire mon nom. Disons Web, d' accord. Donc ce texte ici va être Web, puis Ford slash parce que rappelez-vous, j'entends ça dans le logo. Retournons ici. Vous voyez Web et ensuite quatre barre oblique n'est pas blanche. Donc, ceux-ci sont ensemble et puis impact cela et a soufflé. Ce sera une classe différente. Retournons en arrière. Donc c'est Web. Arrêtons de fermer cette casserole. Et maintenant on peut ajouter la nouvelle portée pour les impacts de la classe de span égale et ensuite je vais dire nom et impact, ok. Et puis le texte lui-même en ce moment aura un impact. Et maintenant, nous pouvons fermer la travée et ensuite nous pouvons fermer la travée elle-même la travée principale tenant le texte et c'est tout. Alors assurez-vous qu'on va bien. J' enlève tout espace vide et ah, ok. Il y a un peu de problème parce que vous pouvez dire en ce moment que le corps et le HTML sont en rouge. Donc cela nous dit en ce moment qu'il manque quelque chose quelque part. Faisons en sorte que tout soit correct. Donc ce Dave est fermé. Ce Dave a été fermé. Ce Dave a aussi été fermé. Et Oh, juste là. La travée n'a pas été fermée. Allons-y et fermons cette travée. Euh, ok, c'est le genre de problème que vous allez faire face en tant que développeur Web, particulier avec HTML et CSS. Alors commencez à vous habituer à cela. Je vais aller de l'avant et sauvegarder le dossier et revenons à nos coups. Ah, et voyons ce que nous avons. Rafraîchissons et OK, si bien. Nous avons maintenant un impact sur le Web et, bien sûr, n' aurons pas à faire un style pour qu'il ressemble exactement à ceci, ce qui va être assez intéressant. Mais vous devriez penser aux types de propriétés seront appliquées ici, par exemple, Web un impact. Évidemment, la taille avant sera plus grande. Ils auront des classes séparées pour leurs travées et, bien sûr, transformation de texte. Le logo lui-même va être beaucoup plus petit que ce que nous avons actuellement. Et surtout, le texte et le local apparaissent côte à côte. Ce sont des choses auxquelles nous devrions penser. Passons à nos parenthèses et passons à notre principal que CSS. Et puisque nous sommes Stylin spécifiquement la section de la marque, rappelez-vous, nous avons affaire à la zone de la marque en ce moment. Je vais créer des textos ici, donc je vais copier ce blanc ici. Copions ça. Calmez-vous ici et collez qu'Andrew Cold est une marque. Ce sera tout le style et spécifiquement pour la section de la marque. Bon, alors qu'est-ce qu'on gère en premier ? Allons avec le moyen le plus facile. Allons avec le festival des textes. Ok, donc en revenant à notre index de HTML, nous avons le nom de la plage Web, qui est Web, puis l'impact du nom. Alors faisons ça très, très vite. Je vais entrer ici tout de suite, en tapant le nom, impact du tableau de bord. Et la seule chose que les minutes font ici sera de lui donner la couleur. Alors faisons cette couleur et c'est blanc. Donc ça va être f f f f f f f f f f f f f f f f f f f Je vais juste copier ce vieux, viens ici, on colle. Mais maintenant, nous avons affaire à un nom qui serait ah, Web, je crois donc venons ici Changer la portée en Web. Maintenant, pour la couleur, je sais que la couleur ici va être cinq b a D a f f OK, mais si nous revenons à notre structure HTML ici, rappelez-vous, rappelez-vous, nous avons une classe de span de nom tenant les deux et j'ai spécifiquement créé est parce que la note que le texte est majuscule, il est, et aussi la taille du téléphone. Donc, s'ils ne doivent pas appliquer la même taille de téléphone et le même texte transformer un pauvre cas à cette classe d'épargne et puis cette banque moins prêt ici aussi bien nous pouvons juste une plaque sur Lee à cette classe de douleur hors nom. C' est pour ça que j'ai créé ce cours. Alors faisons ça. Ça va être en haut juste là. Celeste est que je vais venir ici et dire, euh nom de point. Ensuite, continuons et ajoutons quelques propriétés. Donc, le 1er 1 ici va être la taille de la police. Ah, allons-y avec 17 pixels. Pour l'instant, nous pourrions avoir besoin de changer cette transformation de texte. Évidemment, c'est une affaire et puis allons avec le téléphone pour attendre aussi. On va faire ça veut 700. Donc, il est un peu audacieux, et je pense que nous devrions aller bien. Allons-y maintenant et sauvegardez simplement ceci. Jetons un coup d'oeil à ce que nous avons rafraîchi. Et d'accord, donc évidemment, vous n'allez pas voir l'impact parce que, eh bien, c'est ça qui se développe et monte. Nous devrons ajouter l'image d'arrière-plan pour que vous puissiez le montrer. Mais oh, on a fait. Je suis désolé. fait une erreur. Le Web est celui en blanc, puis notre impact est celui en bleu. Oh, mon Dieu, je m'excuse pour ça. Faisons rapidement ce changement. Ah, Web, c' est ça. sien devrait être blanc. Ah, je suis un idiot. Allons ici. Rends ce général rapide. Euh, d'accord. F f f f f f f. Ok, maintenant ça devrait l'être, je te le promets. Ça devrait l'être. J' ai démissionné. Maintenant, revenons ici ton frais et ok, donc les armes et l'impact blanc sont en bleu. Ok, revenons en arrière. Et maintenant, jetons un coup d'oeil à ce qu'on peut faire d'autre ici. Essayons d'obtenir le texte à aligner sur le côté de l'image. Donc pour ce faire, nous allons devoir apporter quelques modifications au logo lui-même. Jetons un coup d'oeil à ce que nous avons dans l'index avec HTML. Donc ici, nous avons la classe du rap local qui tient le logo. Donc peut-être que nous pouvons appliquer l'affichage dans Lane bloqué à cette classe de logo rap. Alors faisons ça. Je vais venir ici et allons avec le logo au tout, très haut. Alors créons un peu d'espace. Donc je vais entrer et dire le logo Oh, c'est un peu trop. Laissez-moi ajouter de l'espace ici. Ok, Logo. Et je vais dire, Dash rap, ouvrons nos collègues accolades. Et puis, eh bien, allons avec ça. Jouez dans le bloc de ligne. Ok, alors émetteurs-récepteurs ce qui va se passer ? Je vais aller de l'avant et sauver. Retournons en arrière. C' est du rafraîchissement. Et cela n'a toujours pas fonctionné. OK, pas un problème. Revenons voir ce qu'on peut faire d'autre ici. Ce que je vais faire, c'est que je vais mettre un avec pour le logo lui-même. Jetez un oeil au logo. Vous pouvez voir ici qu'il est beaucoup plus petit. Donc on va ajouter un logo ici. Donc je vais venir ici et on viendra juste ici. Logo foncé. Et je vais donner ça avec off. Allons-y avec 60 pixels pour l'instant. Donc, mon côlon, disons que maintenant regardons ce que nous avons. Reviens ici. Rafraîchissons la page. Et en ce moment, vous pouvez voir que nous avons maintenant la taille exacte hors. 60 sont des pixels, mais vous remarquerez aussi la bordure circulaire, droite, Jake, et vous verrez qu'elle est en bleu. Donc, pour atteindre cette fonctionnalité particulière, nous allons devoir ajouter une frontière puis une radio frontière. Alors essayons celui-là. Je vais retourner ici et on ira à la classe de rap locale elle-même, donc je vais dire bordure de deux pixels. Allons-y avec solide et je sais que le collier est exactement le même. Ça va être 5 b d e a f f , et ensuite faire cerner les frontières. Je me souviens que c'est cette propriété appelée Border Radius et je pense que c'est quatre pixels . C' est ce qu'il faut pour que ça tourne. Sauvegardons, revenons, rafraîchissons la page et voilà. Bien que vous remarquerez que le logo lui-même, il est un peu plus loin vers le haut. Il n'est pas parfaitement aligné au centre de la frontière, donc il y a une propriété que nous pouvons appliquer, et c'est appelé la verticale, notre ligne qui assurera que le logo est placé directement au centre là dans le au milieu de notre frontière. Donc, pour ce faire, je vais sauter ici, retourner à un CSS mental, puis pour le logo juste ici. Je vais postuler à toi et dire Vertical ah, la ligne va être au milieu. Ok, sauvegardons ça. Retournons aux rebelles. Rafraîchissons. Et maintenant, vous pouvez voir que le logo est maintenant parfaitement placé juste là au milieu, et c'est pourquoi je vais m'arrêter pour le pot. Une fois le saut partie deux. Où va continuer à concevoir l'en-tête de notre site Web ? Je te verrai alors 44. Créer l'entête partie 2: Eh bien, les retours. Et si votre vidéo est ajoutée avec succès, ah logo mais a fait un certain design et nous avons également ajouté le texte d'impact web. Mais maintenant, il est temps d'ajouter les éléments de menu tous les sept sur eux. Donc la tête de nous vous parenthèses et dans mon HTML inexact, je vais ajouter la nouvelle balise juste en dessous de la plage. S' il vous plaît payer. Très attention, gamin blanc. Ce div pour celui de la marque ici. Nous allons ajouter une nouvelle balise pour le menu juste en dessous de ces hiérarchies particulières. Donc ici, je vais ajouter un peu d'espace, et puis le tag sera utilisé pour le menu sera le talent. Il s'agit d'une taxe HTML spécifiquement pour vos éléments de menu. Donc, utilisez toujours cette attaque en particulier plutôt que Davy pourrait l'utiliser, Dave, si vous le vouliez. Mais c'est plus gênant d'aller avec l'étiquette du clave. Donc ici, je vais donner un cours à ça, et nous allons simplement appeler son menu très, très, très simple. Avoir le menu de la classe et ok, allons de l'avant et fermons le talent. Oh, je vais créer de l'espace et nous allons ajouter de nombreux articles comme une liste, donc nous allons aller avec la liste de commande de U L. Et puis juste comme ça, nous allons ajouter L je suis désolé. Fermons le festival ul. Et puis à l'intérieur, ajoutons L I Le 1er 1 le tout premier élément de la liste. Et c'est en fait Je ne me souviens pas. Revenons ici. Bon, donc à propos des services, non ? Je vais revenir ici. Donc ce que je vais faire ici, c'est que je vais simplement ajouter tous les éléments de la liste pour le menu et puis toujours, hum, la vidéo, une fois que j'ai fini de bienvenue et est contre le maintenant, j'ai ajouté le tentatives de menu restantes. J' ai également ajouté les balises pour eux. Les étiquettes A, les liens fondamentalement, et ceux-ci seront appelés les étiquettes de cheville. L' idée ici est que lorsque les gens cliquent sur ces liens, cela les amène aux sections où nous avons le contenu de l'élément sur lequel ils ont cliqué . Ne vous inquiétez pas, on en parlera un peu plus tard. Mais pour l'instant, assurez-vous que vous avez vos hashtags, puis le texte représentant l'élément de menu réel. Maintenant, voici ma page. Après frais, Vous pouvez voir juste là, nous avons tous nos éléments de menu, mais nous avons besoin de faire quelques changements CSS sérieux. Alors revenons aux crochets de Teoh et je vais ouvrir le CSS principal. Ce que je vais faire ici, c'est que je vais attraper la marque. Copions ça. Allons tout le chemin ici et ajouter la nouvelle section entre, Bien sûr, être menu. Ok, créons beaucoup d'espace. Revenons ici, accord. Le premier intérêt est la classe de menu elle-même. On va faire quelques changements ici. La famille amusante. Vous avez besoin d'être changé et est généralement une bonne idée d'avoir une famille de forme différente pour vos éléments de menu et dans un autre pour votre technologie donc monstre ce sera pour le corps. Et puis, pour de nombreux articles allaient utiliser un retard. N' hésitez pas à utiliser un autre élément de menu si vous le souhaitez. Nous pourrions aussi ajouter le collier de notre texte, qui sera blanc, mais je ne veux pas le faire parce que le sac est déjà blanc et nous avons besoin de pouvoir voir nos articles de menu achetés. Extras de Certainement à part cas sont que nous allons rendre la position relative aussi bien, pour une bonne mesure, relative et OK, c'est pour la classe de menu va venir ici. Faisons un changement au menu. Vous l Parce que nous voulons supprimer la valeur par défaut, stylisant ces cercles pour les éléments de menu si bien venir en ce moment et dire le type de style de liste . Et bien sûr, nous allons juste donner. Ce n'est pas ça. Nous ne voulons pas de styles de liste. Nous allons lui donner un modèle aussi d'un pixel. Et pour une bonne mesure, la marge sera mise à zéro. Et puis venons ici et faisons la même chose pour les objets Airlie eux-mêmes est venu ici. Je vais faire une marge bizarre de 10 pixels, puis un pixel pour la gauche et la droite ? Et ce serait ça. Allons-y, et c'est juste sauver et voir à quoi ça ressemble maintenant. Rafraîchissons et OK, regardant beaucoup, beaucoup, beaucoup mieux en ce moment tel qu'il est, mais nous pouvons apporter des changements réels au texte eux-mêmes. Nous pouvons peut-être changer la taille du téléphone à un certain poids funk ainsi, mais pouvons également les afficher comme un savon de bloc en ligne. Faisons tout ça. Je vais revenir aux parenthèses et ici aura le menu et ensuite obtenu un si comme maintenant nous allons faire directement des changements à la technologie. Donc, je vais aller à la taille amusante et ah, allons-y avec 16 pixels police. Attendez. Voyons voir. Frontal, attends. Je pense peut-être à quelque chose comme, disons 400 je suppose. Allons-y 400, puis la couleur à nouveau. On pourrait changer la couleur en blanc, mais je ne veux pas faire ça. Mais nous allons changer l'affichage deux dans le bloc de ligne. D' accord. Ah, la position placera celle-ci sur relative aussi. Et ah, pour une bonne mesure, décoration de texte. Disons ça à non. On ne veut pas de décoration. Qu' est-ce que jamais ? Ok, allons-y, sauvegardons et jetons un oeil à ce que nous avons. Frais et ok. Pas de mauvais air. On y arrive maintenant. Évidemment, le grand défi ici est d'essayer de mettre nos menus à la lumière tout en gardant notre logo à gauche. Maintenant, c'est une propriété dont je n'ai pas encore parlé, mais il y a une propriété connue sous le nom de propriété float. L' idée ici, c'est que nous flottons. Vous pouvez pousser des éléments ou du contenu à gauche de votre page ou à droite. Donc ce que je vais faire, c'est que je reviendrai ici pour avoir des parenthèses. Et si nous passons à la structure HTML, rappelez-vous que nous avons deux colonnes principales une contenant le logo, une contenant les éléments de menu. Celui pour le logo est la classe de marque alors qu'ils veulent pour les éléments de menu est, bien sûr, le menu hors classe. Ajoutons nos propriétés float. Je vais aller plus loin pour maintenir CSS et pour la marque juste ici. Je vais ouvrir la marque de classe, et je vais dire flotteur gauche. Donc nous flottons la marque vers la gauche. Je vais aussi lui donner une position sur relative vraiment tive. Et voilà. Et puis en bas pour le menu, je vais flotter le menu sur la droite. Allons de l'avant maintenant et sauvegardons et voyons les changements. Rafraîchissons et voilà ! Maintenant, vous pouvez voir quelque chose de très intéressant qui se passe que les éléments de menu sont maintenant à droite. Le logo est maintenant à gauche, et vous remarquerez également que le texte de l'impact Web est maintenant juste à côté du local parce que nous avons flotté le contenu de notre marque vers la gauche. Mais nos alliés une liste d'éléments sont toujours affichés sous forme de blocs afin que nous puissions changer cela. J' ajoute aussi dans la grippe le flotteur droit ? Je suis désolé. Flotteur à gauche, frère pour nos alliés. Un Leicester. Ce flotteur est laissé en sécurité. Retournons en arrière. Rafraîchissons et voilà. Donc, nous sommes encore assez loin de réaliser ce que nous avons ce que nous avons actuellement ici. Mais on y arrive peu à peu. Donc c'est tout pour ajouter nos éléments de menu et aussi travailler avec la propriété flood. Allemagne, Vendex Variable continuera à marcher sur notre en-tête. 45. Concevoir notre en-tête partie 1: Eh bien, reviens. Alors continuons à développer la tête. Mais avant de le faire, je dois pointer votre intention sur une flèche que j'ai faite ici. Chaque arme dans la structure. Donc, ici, où nous avons la classe Dev de la marque si proche et ils ont ici devrait être en fait dehors parce que ce Dave de marque classique est censé contenir le logo ainsi que le nom de l'impact Web. Donc je vais couper ça ici, et je vais le coller juste à l'extérieur des vêtements et m'étendre comme ça. Et puis je vais faire une invitation ici, et c'est comme ça que ça doit être. Donc, dans le conteneur de la marque, vous avez le logo de la classe rap, et puis vous aurez cette classe de douleur hors nom. Alors, je m'excuse. C' est une erreur de ma part. Mais ce sont quelques-unes des choses qui se sont produites lorsque vous construisez nos sites Web. Vous avez toujours tendance à faire ce genre d'erreurs ou de faire des excuses pour cela. Mais passons maintenant à autre chose. Je vais aller de l'avant et économiser et regardons ce que nous pouvons réellement faire sur notre site. Maintenant. Alors, juste ici. Vous remarquerez que le contenu est plus orienté vers le centre, est-ce pas ? Ce n'est pas comme ce que nous avons actuellement, où le contenu est juste ici sur les bords. Nous devons donc mettre un contenu à côté d'un conteneur, puis essayer d'aligner le contenu au centre. Alors revenons en arrière, document HTML Teoh. Et ici, vous pouvez voir que nous avons le jour du contenu de la classe. C' est le contenu principal tenant l'objectif bas, les éléments de menu et ainsi de suite. Et en fait, cette classe hors contenu est une classe que nous allons continuer à utiliser encore et encore dans cette cour. Alors faisons ça. Je vais aller dans le Maine et je vais prendre le texte de la marque. Je vais ajouter un peu de style orteil une classe de contenu. Laisse-moi ajouter de cette façon, et j'appellerai ce contenu, accord ? Et maintenant, je vais ajouter la classe de contenu elle-même. Sauf s'il y a des trucs. D' accord. Tout d'abord, nous allons déclarer le avec, ce qui serait, bien sûr, 100%. C' est une bonne idée, 100%. Mais maintenant, nous allons définir un maximum avec 402,140 pixels. Donc, ce sera le conteneur avec pour notre contenu. Allons-y maintenant en sécurité. Retournons au Broza Refresh. Et maintenant, vous pouvez voir que le contenu ici est maintenant poussé. Plus sont vers le blanc vers la gauche, comme vous pouvez le voir mieux. Nous devons donc encore essayer de comprendre comment nous pouvons centraliser notre contenu davantage vers le centre. Et parce que nous avons changé la structure XML pour le conteneur de marque, vous pouvez voir en ce moment que notre Texas est maintenant aligné juste à côté du local. Encore une fois, je m'excuse pour ce mélange. J' aurais dû remarquer que Ah, j'ai battu Alia. Mais essayons d'obtenir notre logo et les éléments de menu plus vers le centre. Alors, tu te souviens de ce truc, n'est-ce pas ? Je t'ai montré la marge, puis zéro tour auto. Je vais jouer ça ici, alors faisons-le. Je vais jouer ça ici, C' est sûr. Retournez à un rafraîchissement du navigateur et voilà. Donc, en ce moment, vous pouvez voir le contenu est maintenant plus aligné vers le centre, donc encore très rapidement vous voulez atteindre ce très, très, très rapidement. Vous allez ajouter un max avec pour votre conteneur, puis simplement lesdites marges. Vous aussi ceux que cela vous donnera sont ces genre hors structure. D' accord, quelques autres choses à faire vont retourner à notre CSS et juste ici je vais bizarre un peu rembourrage aussi, donc on peut voir Pat dans 0 20 pixels pour gauche. Et en ce moment, vous souvenez-vous du modèle Decisions Box, où le total avec inclura également la bordure que les motifs imaginent. Eh bien, on va faire ça. Donc ça va être la taille des livres dans va être la taille de la boîte de propriété et ensuite les boîtes de velo hors frontière Ce que nous allons ajouter. Donc, ce juste ici signifiera qu'il va avec inclura nos marges et nos modèles. Et c'est généralement comme ça que tu veux aller. Une fois dans votre position de conteneurs, je vais aller avec un parent comme d'habitude et voilà. D' accord. Je vais descendre et te frapper aussi bien. Et si vous remarquez ici, le logo est toujours bombardé par là en haut. Nous devons donc ajouter une certaine marge. Donc nous allons ajouter des marges à la classe ou que le conteneur contenant le logo, qui est, bien sûr, la marque. Revenons donc à la marque en ce moment et ici je vais dire Marge et je dirai 20 pixels, puis zéro gauche et droite. Allons-y maintenant et en sécurité. Revenons aux cloches sont rafraîchir et voilà. Donc les choses sont vraiment bien, beaucoup mieux maintenant, mais il y a encore du travail que nous devons faire. Nous devons ajouter quelques marges à l'élément de menu, et si vous remarquez ici sur notre produit fini, vous remarquerez que le logo et les nombreux éléments essentiellement la tête vers le haut ils sont un peu plus larges que le reste du contenu réel . Tu ne le vois peut-être pas maintenant, mais crois-moi, c'est là. L' en-tête est juste un peu plus large. Donc, nous allons faire est que nous allons également augmenter le max avec hors de la tête sont spécifiquement ok, Donc faisons cela, par exemple, était, Revenons aux parenthèses et est de passer pour maintenir CSS. Allons-y tout de suite et ajoutez des marges à notre menu, donc je vais venir ici et dire que la marge est de 25 pixels zéro. D' accord. Et maintenant pour notre en-tête. Vérifie ça. Je vais passer à l'index avec HTML. Et ici, nous avons le contenu de la classe de la mort. Je vais ajouter une autre classe au large. Ok, Donc fondamentalement, nous avons deux cours ici, le contenu et large. Et maintenant je suis juste de sauver ça. Laisse-moi enregistrer le fichier. Je vais aller dans le Maine. Ce CSS Emma. Nous avons le contenu ici. Je vais venir ici et dire le contenu des points, puis ne le remarquez pas. Il n'y a pas d'espace car ces deux classes appartiennent aux mêmes éléments. Donc je vais venir ici maintenant et dire Max avec et je vais dire 12. Allons 12 50 pixels. Il est donc juste un peu plus large que les 1140 pixels. Allons-y maintenant et sauvegardons ça. Retournons en arrière. Browser Teoh. Euh, ça arrive ici. Rafraîchissons. Et voilà. D' accord. Beaucoup, beaucoup mieux. Maintenant, par ici, vous pouvez voir à quoi cela ressemble, et nous devons trouver un moyen de trouver comment nous pouvons obtenir cet effet où lorsque nous survolons les éléments de menu , vous pourriez remarquer que le texte initial que vous sérieusement comme à propos, par exemple, il descend et puis un autre à peu près comme, vient sur elle. Donc, fondamentalement, c'est comme si nous avions deux textes ici, un que nous pouvons voir, puis un autre qui prend la place de la précédente quand nous passons la souris sur cet élément de menu et vous pouvez également voir la couleur de fond change aussi en bleu. Alors, comment pouvons-nous y parvenir ? qu'on va faire ici, La première chosequ'on va faire ici,c'est qu'on va changer la structure de nos plats au menu . Fondamentalement, nous allons répéter le texte. Donc, plutôt que d'avoir juste un sur le lien en ce moment, on va devoir le faire pour les services, pourquoi nous ? Et puis nous en masquerons un dans l'état par défaut. Et puis quand nous espérons plus sur le par défaut, il va maintenant se cacher, et ils vont maintenant montrer la version Harvard States fondamentalement, Donc je les aide à donner du sens. Ne vous inquiétez pas. Cela devrait avoir du sens au fur et à mesure que nous continuons à le construire. Donc ce que je vais faire, c'est que je vais retourner à notre index de chaque similaire et nous allons changer la structure de nos éléments de menu, alors regarde ça. Je vais créer de l'espace ici, tout d' abord, et je vais ajouter une nouvelle ligne ici. Fermons celle-là aussi, et d'accord, alors regarde ce que je vais faire ici. Je vais dire qu'un voyage est à propos de Faisons un peu d'espace ici. D' accord, ici. Donc, l'idée ici est que nous allons ajouter le texte environ deux fois, ce qui signifie deux classes de span différentes. Ok, donc je vais ajouter la toute première portée ici, et il a appelé sa classe de stylo égal, Appelons celle-ci par défaut. Ok, donc ce serait l'élément de menu par défaut que nous voyons lorsque nous chargeons la page. Donc, nous allons ajouter du texte juste ici et puis je vais fermer la travée, et puis la prochaine classe de pan ici sera celle qui apparaîtra quand nous Khobar sur l' élément de menu. Ok, alors appelons celui-là. D' accord ? Donc fondamentalement, il vient sur qui me terminent sur l'élément de menu. Je vais répéter le texte et l'appeler aussi. Je vais aller de l'avant ferme Pan. Et là, vous l'avez. Alors, juste ici. Ce sera l'avoir structurel pour nos plats de menu. Comme je l'ai dit à la défense pan classes une qui sera la valeur par défaut. Et puis l'émerveillement apparaîtra quand nous espérons plus sur la valeur par défaut sont nombreux article. Donc ce que je vais faire ici, c'est que je vais faire exactement la même structure pour tous les objets principaux. Je vais mettre la vidéo en pause et reprendre une fois que j'aurai fini. Bienvenue et est à nouveau. Voir, ce moment, j'ai ajouté les classes d'espagnol par défaut et plus pour tous les éléments de menu que j'ai enregistrés. Maintenant, quand vous faites la même chose, c'est exactement ce que vous tirez. vois, quand tu te rafraîchis, tu peux voir En ce moment on a le texte avec la pizza, mais c'est bon. On va faire des changements majeurs maintenant. Je vais retourner chez les courtiers, ne vois pas l'évaluation et la première chose qu'on va faire ici. Est-ce que ça va ? On va modeler les classes de travée elles-mêmes, tout d' abord. Ok, on va ajouter un peu de tout à partir d'eux. Alors faisons ce menu A, puis étendez. Donc, tout le texte sur les éléments de menu aura ces styles ensemble. La première chose, c'est qu'on va mettre une position sur un parent et ça va être très, très important. Très, très bientôt afficher. Nous considérons cela comme un bloc en ligne aussi, et nous allons ajouter un peu de remplissage de 10 pixels. Et aussi faisons le Bouddha. Je suis désolé, la taille du livre dans la propriété aussi. Et bien sûr, nous irons avec la valeur des livres de Bouddha. Allons de l'avant et sauvegardons ça. Revenons au navigateur. C' est du rafraîchissement et ils s'en vont, OK, très bien. Donc, en ce moment, vous pouvez voir qu'il y a plus d'espace en ce moment parce que nous avons ajouté un modèle aussi . Nous avons ajouté l'écran dans Lyon Block, donc il commence à paraître assez soigné. Maintenant, laissez-nous le style. Les états par défaut de nos éléments de menu ici. Vous pouvez voir que l'état par défaut a le fond brunâtre sombre. Il a la frontière. Il a comme, ah, couleur supérieure de bordure bleue la plus claire là-dedans aussi. Alors voyons comment on pourrait ajouter que ce design va revenir ici. Donc, nous allons cibler essentiellement la classe de span hors défaut. C' est pour ça qu'on va le mettre et on va le faire ici. En bas. Je vais dire point Menu espacé ou par défaut. D' accord. Et nous sommes possibles à l'arrière-plan Coehlo. Ok, donc on a le sac et le culo et je l'ai juste ici. C' est 40 40 40. Nous allons également ajouter une bordure, qui est un pixel. Ça va être solide et aussi marron. Donc ça va être parce que je suis désolé. 555, puis la couleur du haut de la balle. Il a la couleur bleue la plus claire, donc je vais dire, mais c'est une couleur et la valeur il va y avoir un 00 b un e quatre. Je crois que c'est exact. Et nous allons aussi faire l'affichage pour le bloc en ligne aussi bien. Et Ah, ok, allons-y. Maintenant en sécurité. Retournons voir ce que nous avons. Et voilà. Ok, on y arrive. Va y entrer. La seule chose maintenant est que nous devons essayer de trouver un moyen de récupérer les éléments de menu vers Div ICT, mais aussi comment nous pouvons cacher l'état supérieur pour les éléments de menu. Donc, tous les éléments de menu sans la couleur d'arrière-plan, nous devons les cacher. Mais comment pouvons-nous faire ça ? Comment pouvons-nous cacher autant d'objets ? Pour gagner du temps, je vais te dire exactement ce qu'on va faire, non ? Pour gagner du temps, je vais te dire exactement ce qu'on va faire, On va revenir ici, et je vais ajouter le menu du cours. Ça va être très intéressé et maintenant je vais venir ici et très tranquillement je vais dire Position. Pouvez-vous deviner le voile de la position juste ici ? Ça va être absolu. Voila. Allons-y. Sauvegardez ça. Retourne à un rafraîchissement de Broza et voilà. L' idée ici est que rappelez-vous, chaque fois que nous traitons de position absolue, un tel élément s'ancre à l'élément parent le plus proche avec la position off relative. C' est juste là, Frank. Environ deux points d'index html. C' est juste là. Vous pouvez voir que nous avons la classe de span environ sur laquelle est absolue. Mais alors la taxe elle-même apparente une taxe à la position relative. C' est ici sur la principale que la CIA dit que vous pouvez voir juste une position Vela tive. C' est ce qui se passe en ce moment. Les éléments absolution s'ancrent désormais aux balises A apparentes. Mais vous remarquerez que le texte est toujours en quelque sorte débordant autour. Donc pour réparer ça, je vais revenir ici tout de suite et pour l'adulte en classe, je vais dire, gauche zéro. Donc, mon côlon et très vite nous allons descendre ici au menu. Ajoutons, je suis tellement sur le menu A. Au lieu de cela, ajoutons la couleur maintenant pour White. Ok, faisons ça. C' est sûr et demi devant ici, et je me rafraîchis. Voilà, tu y vas. Donc, fondamentalement, parce que nous avons dit de gauche à zéro, nous avons fondamentalement poussé les éléments de poussée absolus vers le bord des conteneurs apparents , qui ont les balises A. C' est pourquoi vous pourriez aussi remarquer que c'est le sexe en ce moment est audacieux. Ils ne sont pas comme la lumière prend, vous voyez ici. C' est comme un poids avant de 300, ici. C' est plus comme un poids avant sur 600 Cain obtient pourquoi c'est parce que nous voyons les deux textes en même temps. Vous avez la valeur par défaut à propos du texte droit jour, puis derrière le environ X, vous avez à peu près les deux pour la classe au-dessus, Donc fondamentalement, le texte doublent. C' est pour ça que c'est maintenant Bold. Tu comprends ça ? Donc, fondamentalement, vous avez le premier texte qui apparaît, puis juste derrière. Vous avez maintenant le texte avec la classe hors. C' est pour ça que c'est audacieux. Et nous devons faire quelque chose à ce sujet. Alors, comment pouvons-nous cacher le texte derrière le texte avec une classe hors du dessus ? Comment pouvons-nous Onley montrer la classe hors par défaut, mais en haut la classe hors plus. C' est très, très simple. Je vais retourner ici, et voici exactement ce qu'on va faire. Je vais donner Check this out. D' accord ? Je vais donner une taille aux parents une taxe. Donc je vais venir ici et je vais dire « hauteurs ». Allons-y avec 40 pixels, d' accord ? Et puis pour la fin, je vais m'appeler tout de suite, et je vais dire top moins 40 pixels usés. Donc, en gros, on va jeter les textes avec la classe, mais on va trois sur les huit tags eux-mêmes quand ils viennent ici en ce moment. Retour en sécurité ici. Nous sommes frais et voilà. Maintenant, ce texte a disparu. Je peux vous donner une meilleure compréhension ? logiquement vous montrer quelque chose Si je suis revenu ici et que j'ai dit OK, qu'est-ce que l'amour ? Bannières pour 21 Allons avec les mineurs sont 13 à la place et voyons la différence. Ok, quand je me rafraîchis, pouvez-vous le savoir ? Tu vois, c'est le texte derrière c'est vendredi. Donc nous essayons de le pousser. Opportunité repoussée. Donc, ce que j'ai simplement fait à nouveau était de donner au contenu d'eux-mêmes le menu une portée que nous donnons à leurs têtes pour les pixels, puis simplement de cacher la classe sur les ordres. Donnez-lui moins 41 pixels par la mort. Et si je reviens ici, rafraîchis une fois de plus, tu verras qu'il a disparu. C' est donc une astuce que vous voudrez peut-être appliquer à l'avenir. Dans l'ordre des projets Seasons. Cela a duré trop longtemps. Donc, merci d'avoir regardé l'événement allemand excitable. Continuez notre construction sur la tête haute 46. Concevoir notre tête partie 2: Bienvenue de retour. J' espère que vous appréciez les leçons Ceux-là jusqu'à présent, nous avons été en mesure de tordre une certaine mesure cacher le texte de la travée pour la classe supérieure. heure actuelle, tout ce qui repose sur le menu est le texte de la plage par défaut. Mais le texte pour la durée supérieure est toujours là. C' est juste ici. Nous ne pouvons pas le voir car les éléments de menu sur lesquels le texte a été défini sur blanc. Nous avons un sac blanc sur la couleur. Donc, pour les voir, faisons quelque chose que je vais revenir aux parenthèses et pour la classe supérieure, Allons de l'avant et ajoutons une couleur d'arrière-plan. Bon, alors faisons-le au fond. n'est pas comme ça que vous épelez sac de fond sur la couleur, et je vais lui donner 00 b un e quatre. Et nous allons aussi fournir la frontière aussi. Et j'ai développé de bons idiots, un pixel, une bordure solide. Mais la couleur de cette même colonne 00 b. Je ne vais pas e quatre. Techniquement, vous n'avez même pas besoin d'ajouter la bordure. Mais hé, ajoutons ça. D' accord, je vais y aller et sauver. Retourne. Teoh Broza était frais et voilà. Survécu. Maintenant, vous pouvez voir qu'il est juste là. Mais ça ne devrait pas se produire, parce qu'on a fourni une hauteur. N' oublie pas ça. On est venus ici et on a dit qu'on allait lui donner une hauteur de 40 pixels. Ceci ici est certainement plus élevé que 40 pixels. Alors, qu'est-ce qui pourrait se passer ? Ce que nous devons faire est que nous devons fournir une nouvelle propriété connue sous le nom de propriété overflow et définir pour masquer fondamentalement avec débordement chaque fois que le contenu appartenant à un élément sort de son conteneur. Cela pourrait être parce que vous avez positionné un tel contenu. Absolument. Ce qui arrive beaucoup. Vous pouvez utiliser la propriété overflow pour masquer ce contenu. Donc voici l'exécutable que nous allons faire. Je vais y aller, et je vais passer à l'élément apparent, qui est le menu ? A pas la classe span, mais l'élément réel lui-même. Je vais venir ici, et je vais dire débordement. Caché. D' accord. Donc, fondamentalement, nous disons en ce moment que tout contenu qui dépasse 40 pixels le cache fondamentalement. Donc on retourne ici bien, abord la page et comment ça s'est passé. C' est toujours là, techniquement, mais en ce moment on a dit qu'il ne l'avait pas caché. On ne veut pas voir ça. Donc, idéalement,c' idéalement, est ce que nous voulons voir. Mais comment pouvons-nous obtenir cet effet ici ? De telle sorte que lorsque nous survolons sur les éléments de menu, la classe off par défaut disparaît. Et puis celui de plus apparaît. Vous considérez la couleur de fond bleu qui apparaît. Cela nous dit en ce moment que c'est la classe là-bas ont été vus quand nous ho sur les éléments de menu. Comment parvenir à cet effet ? Je vais vous présenter un nouveau sélecteur connu sous le nom de « hover selectable ». Fondamentalement, avec cette élection, nous pouvons appliquer la mise en place de types de changements chaque fois que nous Khobar sur un élément. Donc, pour ce faire, vérifiez ça. Je vais revenir entre vos parenthèses et je vais créer une nouvelle déclaration. Je vais dire que j'ai pensé menu A et maintenant le deux-points et puis planer. C' est ici le sélecteur de vol stationnaire en action. Donc, vous choisissez l'élément. Vous voulez appliquer le sureffet à vous ajouté Cologne et Inditex Hauver espace. Et maintenant ce que je vais faire, c'est que je vais choisir. Je vais faire sortir la classe. Nous voulons maintenant afficher le texte au-dessus lorsque nous ho sur notre élément de menu. J' espère que ça a du sens. Je vais entrer tout de suite, accolades adéquates et faisons ça. Comment pensez-vous que nous pouvons maintenant afficher le surtexte lorsque nous maintenons l'élément de menu ? Pensez à tout ce que nous avons fait pour le cacher en premier lieu, qui était ce que nous lui avons donné une position de tête sur les mineurs pour 21 pixels. Donc, pour le rattraper ici, nous pouvons simplement venir ici et dire top zero. Et là, vous allez à un demi-côlon sauver. Retournez à un Boza, actualisez la page. Et maintenant, regarde ça. Quand j'espère plus sur les éléments maintenant, vous pouvez voir que le sommet O apparaît maintenant parce que avec le sac sur les changements de couleur maintenant nous savons que c'est le texte de vol stationnaire qui est en fait là, mais nous n'avons pas fini. Si vous jetez un coup d'oeil à notre site de modèle, notez que le changement dans le texte en arrière-plan est un peu fluide, comme ce que nous avons actuellement. ce moment. C' est très, très instantané avec plus sur les éléments de menu et c'est immédiat, comme il n'y a pas de changement. Je veux dire, il n'y a pas de retard, ce n'est pas lisse, c'est juste très, très instantané. Et même si cela fonctionne, n'est pas tout à fait la même chose que ce que nous avons actuellement ici. C' est beaucoup plus chic et beaucoup plus lisse. Alors, comment pouvons-nous obtenir cet effet où il y a un peu de retard quand nous maintenons sur les éléments de menu et ensuite aussi remarquer que le texte par défaut semble passer sous tandis que les dépassements viennent d'en haut, Si vous pouvez voir cet effet droit là. Alors, comment pouvons-nous y parvenir ? Eh bien, je vais vous présenter un nouvel ensemble de propriétés. Transitions CSS connues. Fondamentalement, les transitions CSS permettent d'appliquer des effets à un élément. Typiquement, quand nous espérons barre sur cet élément en ce moment tel qu'il est, si je retourne aux crochets, où appliquons-nous aussi les effets de vol stationnaire ? Ça va être à la classe hors classe qui ne l'ont pas fait ici. Et puis plus tard, nous allons appliquer la même chose à quelque chose de très similaire à la classe par défaut également. Donc, plutôt que de jouer aussi la transition vers la classe over, puis aussi vers la classe par défaut , appliquons-la juste à une classe qui les couvre tous les deux, qui sera le menu. Une travée à nouveau, si je retourne à mes notes de document HTML est juste ici. Nous avons plus, nous avons par défaut. Les deux sont des travées, et les deux tombent dessus. La balise A qui tombe par hasard sur cette classe de menu. C' est pourquoi nous allons spécifiquement cibler cet élément particulier. Menu attendu A passé. Donc, c'est là. Transition. D' accord. Et maintenant dans d'autres pour la transition vers le travail, nous devons appliquer les effets. Donc, un type de propriété de réglage, il pourrait être le avec elle pourrait être la hauteur. Ce pourrait être la position dans ce cas en ce moment. Puisque nous déplaçons les éléments en haut. D' habitude, on va le prendre aux valeurs les plus élevées. Il y aura du haut juste là. Donc, il a essentiellement dit que nous appliquons la transition à la propriété supérieure, et maintenant nous pouvons maintenant appliquer quelque chose connu sous le nom de durée. Combien de temps devriez-vous prendre quatre autres la transition pour commencer et terminer. Dans ce cas, je vais y aller avec 40,2 secondes parce que ça va être assez rapide. Et puis enfin, nous pouvons ajouter l'effet réel lui-même. Comment voulons-nous faire la transition ? Elle a commencé vite et lentement. Devrait-il être si lente et rapide des choses comme ça ? Je vais y aller avec la facilité qu'il est en train de sortir qui serait développé. Donc, fondamentalement, ce que cela signifie est qu'il va stat rapide, mais puis et lentement, c'est ce que la facilité de sortie est. Facilité dans serait le contraire où il commencera lentement mettre fin rapidement. Alors, voilà. C' est une transition. Je vais y aller maintenant, sauve. Revenons à un navigateur. Nous avons d'abord une page, et maintenant pouvez-vous voir l'effet ? Cela prend essentiellement 0,2 seconde pour terminer la transition, mais vous pouvez voir que cela fait une différence ce que nous avions à l'origine. Cependant, si nous revenons ici, remarquez qu'il y a toujours quelque chose qui manque et c'est un fait que le texte par défaut descend , il descend quand nous espérons plus sur l'élément de menu tandis que le texte au-dessus apparaît de ci-dessus, nous avons été en mesure d'atteindre les dépassements de notre paiement parce que nous avons déjà dans nos poches. Nous avons déjà dit que lorsque nous tenons notre sur l'article, l'élément a ajouter top zero pour la classe over. Nous avons donc été en mesure d'atteindre le texte que je peins d'en haut. Mais comment pouvons-nous maintenant le définir de sorte que la classe par défaut descend quand nous ho sur notre élément de menu , il va à peu près être quelque chose de très similaire dans ce cas. Je vais juste copier tout ça ici sous la valeur par défaut. Je vais venir ici coller, Changeons la classe au-dessus par défaut et maintenant ça va être dur. Mais maintenant, nous pouvons aller avec 41 pixels. Cependant, n' étaient pas encore partis. Une chose que vous devez savoir est que chaque fois que vous essayez d'appliquer des transitions aux enfants d'un élément leur propriété, vous ciblez unité pour dire cette propriété à l'élément parent lui-même. Dans ce cas, que faire exactement ? Nous appliquons les effets de transition aux classes off over, ainsi que le droit par défaut et la propriété où le ciblage est la propriété la plus importante. La classe différente a développé pour 21 La classe over a une valeur off zero lorsque nous sommes plantés transition en tant que telle, nous devons aller à l'élément parent, qui est menuet span. Quand c'est une communauté en ce moment et tout simplement un sommet est zéro. Donnez-lui la valeur par défaut. Ceci est important pour que vos transitions fonctionnent. Alors gardez cela à l'esprit à l'avenir. Chaque fois que vous jouez une transition vers des éléments Children et que vous remarquez qu'ils ne fonctionnent pas cette propriété particulière, vos cibles définissent leur propriété sur l'élément apparent et lui donnent sa valeur par défaut sur le potentiel. Votre promenade transférable alors. Alors allons-y maintenant et sauvegardons ça. Retournons à notre Broza. Rafraîchissons, et maintenant vous pouvez voir l'effet marcher correctement. Et voilà. En fait, faisons encore une chose avant l'arrêt. Modifions la durée 23 secondes à la place, sorte que vous pouvez vraiment voir l'effet en action. Retournons ici. Rafraîchissons la page et maintenant vous pouvez le voir correctement ? Mort trois secondes. Et voilà. Plutôt cool, non ? Et en fait, nous pourrions faire quelque chose d'intéressant. Plutôt que d'aller avec les 4 à 1 pixels supérieurs pour la valeur par défaut. Et si on était négatif pour les orteils ? Un pixel ? Sauvons. Retournons ici. Rafraîchissons et maintenant vous pouvez voir la différence, n'est-ce pas ? Vous pouvez en quelque sorte asseoir la défense comme ça fonctionnerait. Donc, il vraiment vieux les douleurs sur votre préférence particulière. Et en ce moment, ça a l'air moche. Mais si on retourne à nos parenthèses et qu'on a fait ça en arrière 2,2 secondes, ça va être beaucoup mieux. Retournons en arrière, inspirez. C' est très frais, et maintenant vous pouvez voir le changement que c'est Il semble un peu mieux, mais il semble un peu bizarre car il semble que les deux éléments de menu côte à côte sautent en même temps, si vous voyez cela. Je voulais juste vous montrer ce que vous pouvez faire avec les effets de transition et, ah, ah, juste vous faire savoir qu'il y a des possibilités. Tu sais, il s'agit de changer les valeurs et donc d'un bidonville. Assurez-vous simplement que cela est dit de retour à la valeur par défaut, qui est de 41 pixels, pas négatif pour 21 enregistrer. Retourne ici. D' abord la page. Et voilà. Donc, qui nous avons finalement été en mesure de finir de construire la tête haute. Et ne vous inquiétez pas des transitions. Nous parlerons des transitions beaucoup plus tard dans ce cours. D' accord, donc ne t'inquiète pas. Nous traiterons les transitions plus en détail. Donc, l'Allemagne pour la prochaine vidéo supportable. Maintenant, allez-y et ajoutez l'image de fond pour notre Hedda. Je te verrai alors. 47. Ajouter l'image de fond d'entête: bienvenue. Continuons donc en essayant d'ajouter l'image d'arrière-plan pour Hedda. Et c'est essentiellement l'image Baghlan que nous essayons d'appliquer à l'arrière-plan. Alors faisons ça. Je vais passer aux parenthèses évidemment. Maintenant, je vais créer une nouvelle section. Salam Ambrose pourrait saisir la tête en tant que texte et nous pouvons coller cette superbe pour Heather juste ici et au lieu de la tête comme je vais les appeler l'en-tête juste tête vers le haut et faisons ça comme je vais aller de l'avant maintenant et ajouter l'arrière-plan. Je suis désolé. Prenons l'attaque à la tête. Tout d'abord, appuyez sur une balise. Ouvrez les accolades de code, et maintenant ajoutons l'image de fond, l'arrière-plan , l'image, et puis vous ouvrez bien les crochets et ah, nous allons ajouter les doubles couches aussi. Alors, comment ciblons-nous l'image que nous voulons utiliser ? Eh bien, si on retourne à notre dossier maintenant, les tendances sont nombreuses à l'intérieur de Main que la CIA dit. Mais l'image que nous essayons de cibler est à l'intérieur d'un autre dossier appelé Images, et voici l'image juste ici, héros doj PG. Donc, fondamentalement, nous devons quitter ce dossier appelé Assets et puis sauter. Je suis désolé, appelé CSS, puis sauter dans le dossier appelé Images, et puis je prends l'image elle-même. Donc, pour y arriver, vérifiez cet Arctique. Je vais aller ici et ajouter à co deux points plutôt pour échapper au dossier CSS. Et maintenant, nous allons sauter dans le dossier Images et ensuite cibler spécifiquement le Guéri ou J. P. DossierP. G. Allons-y maintenant, sauvegardez ça et, ah, voyons ce qui va se passer ici. Rafraîchissons la page et rien. n'y a pas d'image d'arrière-plan, mais c'est parce que notre en-tête n'a pas de hauteur. Nous devons donner à l'en-tête une hauteur d'une sorte. Revenons à nos parenthèses. Disons,par exemple,que par exemple, je peux venir ici et dire bonjour. Ah, passons à 500 pixels. Disons que l'or soutenu er parce que je rafraîchis la page et vous y allez. Donc maintenant, vous pouvez voir avec 500 pixels hors hauteur, vous pouvez voir une partie de l'image de mauvaise arme. Cependant, notez qu'ici l'image de fond sent essentiellement toute la hauteur de notre squint. C' est seulement quand nous commençons à faire défiler vers le bas que vous ne voyez pas, hum, hors de l'image d'arrière-plan. Donc, pour y parvenir, le sac sur l'image occupe la pleine hauteur hors de l'écran. Lorsque vous lancez la page, nous devrons ajouter une valeur très spéciale appelée le View Port Height, le H. Donc, vérifiez ceci. Je vais retourner ici et au lieu de 500 pixels, je vais passer à 100. Donc, il n'a pas supprimé que je vais changer à 100 h envie. Ceci ici est la valeur standard donnée à n'importe quelle hauteur lorsque vous voulez que le sac une image conforme à la pleine hauteur. Et je vais aller de l'avant maintenant sauver. Et maintenant, voyons un peu de magie. Allons ici, rafraîchir la page et là, vous sortez de la chauve-souris. Le sac sur l'image combine la pleine hauteur, et c'est à cause de donner la tête sont une hauteur de 100 ports de vue, donc une autre valeur pourrait trouver intéressant pourrait être le port de vue avec lequel serait VW. Autrement dit, au cas où vous vouliez que votre arrière-plan passe au complet de votre écran. Mais puisque nous utilisons un sac, une image qui est assez grande. On n'a pas besoin de régler ça. Alors rappelez-vous les 100 V h. Cela donnera toujours votre tête, euh, euh, quel que soit l'élément que vous jouez développé pour toujours vous assurer qu'il occupe la hauteur de la nourriture hors de votre écran. D' accord, je vais ajouter des propriétés supplémentaires ici. Allons avec la taille de l'arrière-plan. Tu te souviens, on a parlé de taille ? Nous avons une couverture de conteneurs citoyens couverture. Disons aussi que l'arrière-plan par position au sol, je vais aller avec le centre et ensuite une pièce jointe de fond de propriété, et je vais appeler celui-ci coffre-fort fixe. Maintenant, vous savez ce que fait le sac sur la taille ? Qu' est-ce que la position fait les pièces jointes. Cela rendra l'image d'arrière-plan fixe. C' est la valeur que vous voyez ici. C' est ce que vous voyez ici quand nous essayons de faire défiler les notes est que le sac une image reste juste là. Il n'est pas à l'école comme on fait défiler vers le bas. Donc, pour obtenir cet effet, c'est pourquoi j'ai ajouté la fixation par pistolet fixe. Sobel a dit qu'en effet, veulent commencer à ajouter du texte juste sous notre en-tête. Donc j'ai gardé ça et revenons juste ici et rafraîchissons-nous. Et d'accord, la prochaine fois que vous devez ajouter le serait la capacité remarqué la couche noire juste là . Nous devons être en mesure d'ajouter cela à notre image de fond afin que lorsque nous commençons à ajouter nos textes, comme le niveau de votre entreprise, il soit plus lisible. Donc, pour y parvenir, il y a quelques semaines que nous pouvons faire cela. Mais je vais vous montrer la façon la plus simple de le faire. Bon, revenons aux parenthèses. Maintenant, où vous avez l'image Baghlan, je vais ajouter juste un peu d'espace, et ensuite je vais fournir une nouvelle une délimitation froide Grady int. Et maintenant à l'intérieur de Li Lina. Super. Et je vais ajouter un modèle de couleur appelé le RVB A. Vous avez peut-être entendu parler. C' est essentiellement pour rouge, vert, bleu et, um, al Fahm. Donc, avec cela, nous pouvons réellement ajouter le noir trop, alors regardez ceci. D' accord. Je vais ouvrir de nouveaux crochets. Je vais aller avec zéro pour le rouge, zéro pour le bleu, un autre zéro pour le vert, et puis je suis désolé, Kaiser pour le zéro rouge pour les verts ici pour le bleu. Et enfin, passons avec 0,7 pour l'Alfa. Mais alors nous devons répéter cet Oliver contre toute copie RGB A jusqu'à la 0.7. Je vais ajouter un coma ici, payer ça à nouveau. Et puis en dehors du support de fermeture, je vais ajouter un coup pour le U et ah, ça devrait aller. Laisse-moi aller de l'avant et sauver. Retournons à l'intérieur. Ici fait référence à la page et à la façon dont vous allez. Donc, fondamentalement, le 0,7 est ce qui dicte juste à quel point le sac est sombre et va essentiellement être . Donc, si vous revenez ici, par exemple et qu'on vous dit : Eh bien, Eh bien, faisons ça 12 au lieu de venir ici, faites-le aussi. Retournons en arrière. Vous remarquerez une différence immédiate Rafraîchir. Et là, vous pouvez voir que ce n'est pas tout à fait aussi impuretés qu'avant. C' est beaucoup plus de brûlure, essentiellement. Donc, les valeurs que nous avons à la fin dicteront à quel point il va être sombre. Si nous sommes allés jusqu'à 0,9, par exemple. Ok, retourne ici et je suis retourné à mes sourcils la première fois. Maintenant, il fait très, très, très sombre. Donc 0.7 est un endroit agréable pour être. Donc je vais juste changer tout ça en arrière 2.7. Et voilà. Ok, revenons juste ici. Les cloches, rafraîchissez-vous. Et on y est presque. Presque juste quelques choses parce qu'il avait besoin de changer. Évidemment, le texte de l'impact Web ici est beaucoup plus petit que ce que nous avons ici. Alors essayons de réparer ça. Je vais venir ici et utiliser mon dans spectral et voyons juste si je viens là-bas au nom de classe espagnol et j'ai changé la taille du téléphone de 17 et je suis en âge plus avancé, 26 pixels, par exemple. Je pense que ça a l'air plutôt sympa. Essayons également d'ajouter une ligne verticale au milieu. Ok, Et puis peut-être que vous pouvez aussi ajouter, comme marge sur la gauche pour apprécier loin du local ou juste un peu. Allons avec, euh, cinq pixels et voyons, je pense que cela ressemble à ce que nous avons ici, même si c'est encore un peu plus grand. Retournons ici et Ah, allons-y avec peut-être 20 8 pixels, peut-être. Et Ah, OK, ça devrait être assez proche. Je pense que c'est parfaitement bien. D' accord, je vais retourner ici et ajouter ces valeurs. Donc je cible la classe des noms. C' est en bas. Bon, alors qu'est-ce qu'on a exactement ? Nous avons aligné vertical au milieu et dans la marge à gauche pour cinq pixels. Et n'oublions pas quelle est la taille du téléphone de 17. Et je crois que nous sommes allés jusqu'à 28 pixels qui ont sauvé ça. Retournez à vos factures sont se réfère à la page et là vous allez. Donc pas mal du tout étaient très, très presque la En fait, nous avons effectivement ajouté avec succès tout ce dont nous avons besoin pour l'en-tête à l'exception du texte juste ici et les boutons qui ajoutent généralement dans la toute prochaine vidéo. Alors que je pense, est beaucoup pour la fortune. Si vous avez des questions, comme toujours, assurez-vous de tendre la main et je verrai dans la prochaine classe 48. Ajouter la section héros: Bienvenue de retour. Donc, continuons à construire sur la tête et nous allons faire ici est d'ajouter le texte pour le niveau une entreprise pure sont construits une présence web impactante et fondamentalement le à nos boutons d'appel à l'action. Donc, pour y parvenir, nous allons devoir ajouter une structure aux fichiers HTML. Faisons la tête de 02 crochets et je vais aller à mon index de HTML. Alors, où allons-nous ajouter exactement ce texte ? Eh bien, ça va tomber sur le menu, mais ça va être toujours à l'intérieur du Dave principal, qui est celui juste ici, qui est le contenu blanc. Nous devons donc nous assurer d'ajouter le contenu. Pourtant, au lieu de ce David et moi cliquons dessus juste ici, vous pouvez vous asseoir ici. C' est là qu'il se ferme. Donc juste au-dessus du membre, suffit de retirer l'espace ici, juste au-dessus, directement sur le couteau. Le clave. Je vais ouvrir un nouveau Dev et faisons ça. Je vais appeler ça Dave. Donnons-lui une classe hors héros. Bon, alors faisons ce héros, et je vais aller de l'avant maintenant et simplement fermer le Dev pour s'assurer qu'on n'oublie pas plus tard. Mais à l'intérieur de ce Dev, ouvrons un autre Dev et nous pouvons appeler ceci Faisons un appel de classe à l'action. Ok, alors allons-y pour appeler Dash Two action. Et maintenant, laisse-moi aller de l'avant et fermer ce Davis Well et OK, à l'intérieur de cette journée. Ne commençons pas à ajouter le texte. Allons avec le festival H one tack parce que typiquement, c'est ce que vous voulez faire pour les sites Web sont pour S E O Popper dit, fondamentalement, vous voulez avoir vos mots-clés comme une taxe H one quelque part sur votre page Web. Donc c'est là qu'on va avec le H one tag ici. Alors faisons ça. Je vais ouvrir une nouvelle ligne, et je vais utiliser l'étiquette forte parce que remarquez que dans notre conception, la lumière de niveau ici, il est audacieux par rapport à votre entreprise est audacieux impact cette balle ici aussi, tandis que le d'autres sont le texte regula r. C' est pour ça qu'il n'y a pas d'étiquette forte juste là. Donc ça va être fort et le niveau est le texte, et ça va être un espace de niveau plus élevé que vous êtes et ensuite les affaires vont être fortes aussi . Comme le font sur fort. Fermons ça et ici va être un niveau d'affaires dans votre entreprise. Fermons celui-là. Et puis je vais ajouter la balise de pause pour que le prochain les statistiques de texte suivant sur la nouvelle ligne. Ajoutons celui-là. Et puis sur la nouvelle ligne, je vais dire construire et je vis. Je viens de confirmer le texte à nouveau. D' accord ? Si impactants va être fort. Alors, quels cadeaux ? Ok, j'ai compris. Revenons, construisons un et puis je venais ici. C' est ce qu'on appelle sa seule promenade. Fermons une étiquette juste là. Donc construire et l'impact, présence Web complète K espace présence Web. Sens de la presse. D' accord. Et ah, c'est tout. Je vais aller de l'avant et fermer l'étiquette h one, ok ? Et je pense que ça devrait être bien. Allons-y maintenant et économisons et voyons à quoi ça ressemblerait avec frais et ah, ok. Oh, c'est encore debout. Je regardais en bas. En fait, c'est là-haut. Ok, le reste du texte est ici aussi, augmenter l'impact du bâtiment de votre entreprise pour leur présence. Ok, donc évidemment, on va devoir faire un peu de style et le mettre au centre. Mais allons de l'avant et ajoutons les boutons roumains que nous avons sont des services et ensuite entrer en contact . Donc, ajoutons cela à la structure HTML aussi. Donc juste en dessous du H, je vais ajouter nos boutons. Donc, nous avons le tag h ref égal et puis dans les manteaux allaient aller avec les services de services et ensuite nous allons juste taper nos services. Fermons cela et fondamentalement la sentinelle encore une fois sur la différence ici est que nous allons changer les services en contacts. Allons au contact ici. Ce serait le lien de cheville pour le texte, qui serait ah, entre en contact. Je crois qu'il est touché. Je viens de confirmer. En fait, c'est juste retourner ici et oui, alors entrez en contact. Le texte est correct ? Et ah, allez-y et assurez-vous que tout est fermé et je pense que c'est fini. C' est ça. Donc ce Dave est fermé. Cette division est fermée ici. Ce Davis ferme tout le chemin ici et ensuite notre Hedda est fermée. Ok, laisse aller de l'avant, sauve. Et nous devrions être bons d'y aller maintenant. Voilà, tu y vas. D' accord. Donc, nous avons tout le texte nécessaire, et ensuite nous avons aussi nos bas sont des liens. Donc, l'Allemagne pour la prochaine vidéo disponible. Maintenant, allez-y et montrez que ça ressemble exactement à ce que nous avons ici. 49. Section du héros: bien, comebacks dans la vidéo précédente est ajouté avec succès le texte pour notre section héros ainsi ,ainsi que les boutons, , les services et entrer en contact. Mais nous n'avons pas besoin d'obtenir ce contenu pour ressembler exactement à ce que nous avons ici. Maintenant. Le grand défi ici va être d'avoir à centraliser réside le texte ainsi que les boutons juste là au milieu de l'écran, il est dans les couleurs d'arrière-plan. À ce stade, il est facile, vous savez, changer la taille de votre texte. Tout cela est assez simple, mais comment obtenir du contenu juste là au milieu de votre écran ? La beauté de CSS est qu'il y a généralement plus d'une façon d'obtenir le même résultat . Cependant, une façon peut généralement être meilleure que la totalité du chemin. Donc pour y parvenir, je vais vous montrer une nouvelle façon d'obtenir notre contenu juste là au milieu. Et pour ce faire, je vais vous présenter un nouveau veld pour la propriété d'affichage, qui va être flex. Jusqu' à présent, nous avons traité le bloc d'affichage en ligne dans le bloc de ligne. Mais maintenant je vais vous présenter un nouveau velu froid flex. Avant d'y arriver, il y a une chose qu'on doit faire. Avant d'y arriver, il Si je vais aux parenthèses et que je regarde l'index du HTML, observons très attentivement la structure. Au sommet, on a l'en-tête, non ? Mais alors nous avons aussi le Dev, qui est le contenu et puis large. Ce Dave contient essentiellement tout le contenu. Il contient notre logo, les éléments du menu ainsi que la section Huell. Pour que nous puissions utiliser le flexor qui utilise le flex d'affichage, nous devons régler le conteneur parent à 100 % avec 100 % de hauteurs. Ça va être important, accord. Et bien sûr, la mort des parents pour le héros diviser ici est le contenu prêt ? Le jour de la classe de contenu comme les parents, Dave. Alors, suivez. Mais je vais le faire, je vais retourner dans le Maine, ce CSS et juste ici. Mais nous avons le Hedda. Je vais ajouter notre CSS juste là. Donc, disons, Hedda Space, ce contenu pour que ça soit la hauteur sera 100% avec 100%. Maintenant, je sais que c'est la première fois que nous traitons des valeurs de pourcentage et non des pixels ou du port View. La vue partie haute de la vue avec port. Alors, que font exactement ces pourcentages dans cette affaire en ce moment ? Ce que cela fera au conteneur Dave, c'est qu'il va régler sa hauteur à 100% la hauteur de ses propres parents, Dev. C' est ce que fait le pourcentage lorsque vous appliquez une valeur de pourcentage à un élément dans ce cas. moment, il est renforcé avec il va mettre le haut avec notre contenu là-bas en ce moment pour être exactement la même hauteur et avec hors de son propre parent. Si nous revenons à l'index que HTML, qui sont les parents hors du jour du contenu de la classe ? C' est Hedda. Mais rappelez-vous aussi que nous avons déjà donné l'en-tête A se cache 100 voir notre hauteur de port pH donc fondamentalement la tête de la lumière, il aura exactement la même hauteur et avec bien sûr, off 100%. Techniquement, vous pourriez venir ici et dire hauteur 100 VH avec 100 VW. C' est la même chose que vous obtiendrez les mêmes résultats. Mais c'est la toute première étape pour utiliser le flex d'affichage. Ok, sortons celui-là du chemin. Maintenant, je vais venir ici. Je vais créer une nouvelle section spécifiquement pas pour le diff Huell. Je vais venir ici. Collons ça et je vais changer ça en héros. D' accord ? Et maintenant, revenons ici à une nouvelle ligne, compte tenu de la classe. Soulèvement ! Oh, c'est le Dave. Et maintenant c'est là que la magie se produit en premier, afin que nous puissions obtenir le texte à une ligne juste là au centre, cette tenue Dave dans notre contenu doit également avoir une hauteur de 100%. Et avec 100%, c'est important de centraliser le texte, non ? Donc, je vais retourner ici, et je vais dire avec aussi 100% peaux 100%. Jusqu' à présent, si bien. Maintenant, voici vraiment la magie entre en jeu. Je vais dire « Display Slicks », d'accord. Et maintenant, pour faire les éléments du centre, je vais dire justifier le contenu. C' est un nouveau public pour justifier le contenu envoyé. Maintenant, nous sommes un lion dans la doublure aérienne horizontale. Il faut un détective les boutons, mais aussi dans un peu de lumière eux verticalement. Je vais venir ici et dire notre ligne, puis tiret et dans les articles. Et puis ça va être au centre aussi. Voilà, tu y vas. Je vais aller de l'avant maintenant et en sécurité. Retournons ici. Rafraîchissons. Et voilà. moment, vous pouvez voir que le texte juste ici et les boutons sont presque là au centre de notre écran. Mais maintenant, comment pouvons-nous les obtenir exactement là, au centre ? Maintenant, pour répondre à la question, nous devons nous demander pourquoi le contenu n'est-il pas encore au milieu ? Tout empêche le contenu d'arriver au milieu. Je vais présenter l'inspecteur ici, et jetons un coup d'oeil à ce qui se passe. Je vais présenter l'inspecteur ici, Donc, juste ici, vous pouvez voir que l'en-tête est toute la largeur et la hauteur. Et bien sûr, la classe de contenu est également pleine avec et la hauteur aussi bien. Vous pouvez voir pourquoi la mort Mais maintenant, si je viens ici, remarquez que le jour du héros de classe ne va pas pleine hauteur de 100% même si nous avons déjà explicitement dit hauteur 100% mais ça ne va pas 100%. Il s'arrête juste là. Pourquoi, c'est-à-dire parce que nous avons des marges appliquées au menu et au logo aussi. Il l'est. Ces choses vont surtout pour le menu qui est celui qui pousse le contenu pour cela vers le bas. La chose à propos de ce jeu fléchit qu'il prendra en considération les marges des autres éléments placés au-dessus. C' est pourquoi ce contenu n'est pas exactement au centre. Alors, comment pouvons-nous obtenir la classe de la mort du héros pour ignorer les marges dites par le menu et le logo. Voilà exactement ce que je vais faire. Je vais venir ici maintenant, et je vais dire la position Absolue. Et voilà tout de suite. Quand nous survolons sur la classe Dave ici, maintenant vous pouvez voir qu'il va pleine hauteur. C' est parce que vous avez dit que la position de l'absolu et de l'absolu ignorera toujours modèles, imagines et tout ça. Et si vous regardez le texte en ce moment, c'est vendredi au centre de notre écran. Voilà donc quelques informations utiles pour vous. Je l'espère. Ne retourne jamais ici et applique les changements que nous avons découverts. Donc, je vais entrer ici tout de suite. Je dis juste position et on appelle ce luth abso. Et nous allons juste dire aussi haut zéro gauche zéro aussi bien. C' est une bonne idée. C' est une bonne pratique d'appliquer ces valeurs aussi. Alors allez-y, sauvegardez celui-là. Et, euh, voilà. Je vais retourner au Broza Refresh, et voilà. Impressionnant. Mais nous avons un problème. Vous voyez, si j'essaie de planer sur les éléments de menu en ce moment, vous lisez avis que cela ne fonctionne plus. Pourquoi c'est ça ? Eh bien, c'est parce que nous avons donné à la section des héros toute la hauteur parce que nous avons dit qu'elle était en position absolue. Et maintenant, il est essentiellement de rester devant les éléments du menu et le logo pour le prouver. Vérifie ça. D' accord. Je vais changer le avec 100% à 75%. D' accord. Maintenant, vous pouvez voir que c'est avec vous pouvez voir maintenant que les éléments de menu à propos des services sont y O R équipe sont tous couverts. Plusieurs essaient de planer sur ceux-ci. Vous pouvez voir que rien ne se passe. Mais alors, si j'ai essayé d'avoir sur des témoignages, maintenant il commence à marcher. Les clients travaillent. Le contact fonctionne. Mais c'est parce que la classe de héros ne s'étend pas au-delà des 2 premières lettres l'élément de menu Témoignages. C' est ce que les Séminoles peuvent encore afficher. Split classique peut afficher le contact sur l'affichage, mais voir tandis que les services et sur et non plus ce plan. Donc essentiellement, nous devons le faire. Nous devons pousser le contenu de l'enfer derrière les éléments de menu ou pousser les éléments de menu devant le contenu du héros. Alors, comment pouvons-nous y parvenir ? Vous souvenez-vous de la propriété que nous pouvons utiliser ? Il s'agit de la propriété Z Index. Sans propriété, nous pouvons pousser le contenu soit à l'avant, tous derrière. Donc, faisons ce changement similaire le avec retour à 100%. OK, mais maintenant je vais passer à la classe naff et donner l'indice de classe naff Z de disons 10. Et en ce moment, vous pouvez voir que les éléments de menu marchent maintenant un jeu. Donc voilà, la mise hors tension de la propriété de l'index Z. Alors faisons ça. Je vais aussi nous donner l'index du logo, juste pour une bonne mesure. Donc, je vais retourner aux parenthèses et faisons ça. Alors Menu, je vais donner à ceci un index Z. Disons 10. Et puis nous allons aussi le donner à la bande aussi, parce que c'est le jour du contenu sont logo. Donc, nous allons donner Z Index et donnons développé. Neuf. Voilà, tu y vas. C' est sûr. Revenons aux factures sont actualisées la page et là vous allez. Impressionnant. Maintenant, Mais nous devons faire est simplement d'appliquer notre style dans notre texte et nos boutons aussi bien. Et pour ce faire, je vais retourner entre parenthèses, évidemment. Et, ah, faisons ça. Ok, je vais ouvrir la nouvelle classe d'appel à l'action. Ouvrons les accolades de nos collègues pour que la couleur soit blanche. Ils seront pour le texte avec des textes de 456 ah. Une ligne va être au centre aussi. Et qu'avons-nous d'autre ? Nous avons des livres de taille. Allons avec la taille du livre dans la propriété. Et bien sûr, boîte de bordure va être la valeur parce que maintenant nous allons ajouter un peu de rembourrage et les valves de motif seront de 10 pixels. C' est bon avec 10 pixels va 50 pixels et 10 pixels. Il y a une façon plus courte d'écrire ces valeurs, dont nous avons parlé. Alors essayez de comprendre la question que nous avons des droits dans les quatre valeurs pour le patio. Essentiellement, vous n'aurez que trois Veloso un supposé à la faute pour que vous puissiez vous donner cette petite mission et, euh OK, alors allons-y et sauvegardons ceci. Retournons ici chaque frais et regardant mieux. Ok, mais rendons la taille beaucoup plus grande maintenant. Le H one tag, qui est ce qui montre le contenu du héros contre le droit ici. H un h un a été défini sur ce qui a été validé ? On donne le H. C' est comme cinq pixels. C' est une sorte de petit, Alors prenons cette vieille façon à 40 pixels et peut-être h pour devenir l'âge de 25 pixels et alors peut-être HDB nous pouvons faire HDB 20 pixels. Pour l'instant. Nous pourrions avoir besoin de changer est un peu plus tard, mais gardons ces tels qu'ils sont. Retourne ici. Rafraîchissons et OK, maintenant c'est beaucoup, beaucoup mieux que ce que nous avons actuellement. Notre cape. Impressionnant en ce moment pour les boutons remarquent ici qu'ils partagent des similitudes dans la taillede la police taille , la première façon, les motifs ainsi. Donc, ce que nous devons faire, c'est de leur fournir la même classe et d'appliquer la même chose pour les protestants, cette classe particulière. Alors faisons ça. Je vais retourner aux parenthèses. Passons à l'index du point html. Et maintenant, ici, où nous avons le treff A. Je vais venir ici et donner la classe. Appelons simplement le bouton de classe parce que c'est un fond. Mais je vais aussi donner une autre classe aux services parce que les notes sont que la seule différence majeure entre les deux est la couleur d'arrière-plan. Nous aurons donc une classe supplémentaire qui appliquera le fond violet et aussi le fond vert . Donc nos services nous allons avoir un cours sur violet, ok, ok, et maintenant pour le contact, nous pouvons donner le bouton de désactivation de la classe aussi, puis de l'espace, puis vert. Ça va être pour les milieux. Allons-y maintenant et sauvegardons ça. Et maintenant, revenons au Maine, dit Docs. Et commençons à appliquer les boutons. Donc pour les boutons, je vais les appliquer juste en dessous de Hedda. Je pense que ma meilleure auto nous allons jouer sous notre paragraphe. Alors, venons ici. Je vais copier ceci et puis ici, je vais changer les boutons du paragraphe deux. Tu iras bien. Donc on a des boutons et on va commencer. Ok, donc la première classe, bien sûr, sera achetée en soi, et nous avons une série de valves pour fournir le bouton. Le 1er 1 qui va être le téléphone à la taille, ce qui est bien sûr, va être 15 pixels. Je vais ajouter le poids avant aussi, que je sais être 400 sont la couleur du texte. Bien sûr, ne l' oublions pas. Il va y avoir F f f f f f f, et nous devons supprimer la décoration du texte aussi, parce que les liens sont automatiquement sur le terrain. Supprimons donc les liens. Donc, prenez cette question ne serait pas. Et, ah, qu'est-ce qu'on a d'autre ? Allons de l'avant et sauvegardons ça. Et jetons un coup d'oeil à ce que nous avons un frais et, euh, ok. La forme de Textron, je pense, devrait être en ordre. Transformation de texte. On peut avoir du rembourrage. Ajoutez aussi quelques marges. Alors faisons ça. D' accord, je vais retourner ici. Faisons le texte. Transformer. transformation de texte sera en majuscules. Ok, ajoutons la marge. Allons-y avec 10 pixels. Pour l'instant, on pourrait changer ça. Allons-y. 10 pixels et tapotement. Bien sûr, nous allons ajouter ce contexte très, très bientôt. Allons-y. 10 pixels et 20 pixels et ah, allons-y. Jouez dans le bloc de ligne aussi bien. Ok, ça devrait être bon. Ah, passons au rayon de la frontière pour que nous puissions faire les frontières un peu. Les circulaires vont trois pixels et nous sommes bons. Ok, Ensuite, je vais faire maintenant serait d'ajouter à l'arrière-plan réel Kahlo. Donc, nous avons violet va être le 1er 1 Donc par pool et j'ai l'appelant de fond couleur pour Pop Earl va être 40 b sept f f et nous allons également fournir sa bordure, qui serait un pixel. Ça va être solide, bien sûr. Et puis les couleurs de nos limites. Tu vois ? Qu' est-ce que j'ai ? 1/2 cc sept à F f. Ok, faisons quelque chose de très similaire pour le bouton vert aussi. Je vais me calmer ici. Ajoutons l'arrière-plan, euh, appelant ici, qui serait Qu'est-ce que j'ai ? J' ai huit c b 913 Et puis enfin, ajoutons aussi la bordure, qui va être solide d'un pixel aussi. Et la dernière vallée il sera d à f 37 être ok. Je pense que ça devrait être bon. Allons-y maintenant et économisons et voyons ce que nous avons. Un frais. Et voilà. En fait, ce n'est pas si mal. Ok, génial. Impressionnant. Impressionnant. Savon génial avec beaucoup de style là-dedans. Nous avons finalement pu obtenir que notre contenu ressemble presque à ce que nous avons ici. Sauf pour le fait qu'attendre une seconde. Le froid ici n'est pas exactement le même. Que se passe-t-il ? Un membre vient de confirmer ça très, très vite. C c a 03 d d 8. Oh, d' accord. Je m'excuse. Cela a dû faire une erreur pour la couleur de fond. Changeons vite ça. Revenons ici. Et c' était une couleur différente que j'ai choisie. Excusez-moi pour celle-là. Ah, laisse-moi vérifier. D' accord. Tu devrais être curry. Allons-y maintenant et sauvegardons ça. Retournons ici. Rafraîchissons. Et voilà. Ok, ça ressemble beaucoup plus à tout ça. mienne. Ils ont duré. Bien sûr. ce moment, vous remarqueriez qu'il y a un effet lorsque nous survolons sur les boutons. Vous pouvez voir que nous ne l'avons pas encore. Donc, Allemagne Pfennigs vidéo où je vais maintenant vous montrer comment avoir quelques effets de vol stationnaire cool à vos boutons. 50. Transition de boutons: Eh bien, reviens. Voyons maintenant comment appliquer les effets de transition à nos boutons. Et par ici, eh bien, nous avons, fondamentalement n'est rien vraiment de fantaisie. Le changement majeur ici est la bouteille Coehlo celle pour les changements violets en bleu clair et celle pour les changements verts en blanc. Alors allons-y et faisons le chardon. Je vais retourner aux parenthèses, évidemment, et ajoutons la classe pourpre à nouveau. Et ce que je vais faire maintenant, c'est changer la frontière. Coehlo. Et l'appel que nous allons passer sera 40 sera de 7 f f donc mon colon hors cours, je vais ajouter le sélecteur de vol stationnaire. N' oublions pas ça. Euh, cas où je vais copier ça et nous ferons exactement la même chose pour Green aussi. Laisse-moi changer la classe violette en classe verte. Nous changeons la couleur du beurre en blanc 123456 et refroidissons. Donc c'est tout pour le survol de nos effets action. Maintenant, allons de l'avant et appliquons la transition elle-même à nos boutons. Alors, on va entrer ici la transition et on change la frontière, Coehlo. Parce que la propriété, on va changer. Quelqu' un appelle la loi. Allons-y avec 0,4 seconde et nous nous relâcherons. C' est aller de l'avant, sauver et les bolivars devraient définir. Ça revient ici. C' est la première page. Et voilà. Donc 0.4 seconde est peut-être un peu lent, mais, hé, ça marche toujours. Maintenant que nous sommes là, je veux profiter de cette occasion pour approfondir un peu plus profondément dans le monde des transitions et juste pour vous montrer quelques trucs que vous pouvez réellement appliquer la chose ici. Maintenant que nous sommes là, je veux profiter de cette occasion pour approfondir un peu plus profondément dans le monde des transitions Est-ce que c'est bon ? Vous pouvez effectivement appliquer des transitions sans même avoir à fouiller sur l'élément en ce moment . Les effets sont effectivement appliqués. Je ne le sais pas S'il remarque quand nous actualisons la page, regardez immédiatement les bas, vous verrez la transition en train de se dérouler. La bouteille appelle en fait changer quand je me rafraîchis. Regarde ça. Tu vois ça ? Je recommencerai. D' accord. Espérons que vous avez vu cela, mais pour le démontrer mieux. Faisons quelque chose. D' accord. Je vais retourner aux parenthèses et où on a le bouton. Ce que je vais faire, c'est que je vais venir ici. Je vais changer la transition de la frontière. Coehlo à l'arrière-plan cola maintenant. Ok, alors regarde ça. Je vais sauver ça et voyons ce qui va se passer. Tout le retour à mes factures sont rafraîchir la page et vous y allez. C' est un peu trop rapide. Permettez-moi de changer l'heure, en fait de 0,4. Allons vieillir avec vos quatre secondes à la place. Donc tu vois vraiment de quoi je parle ? Retournons vers elle. Mais j'étais Ah, eh bien, d'abord la page. Maintenant, regardez les boutons. Il faut quatre secondes pour que l'orteil Bagram Col se sent réellement dans, et c'est à cause d'appliquer à la transition directement sur le bouton. Donc, si elle aussi Harvard ici, nous ne allons pas vraiment voir le sac et la couleur changer parce que, bien sûr, sûr, nous n'avons pas ajouté la couleur de fond à l'effet de vol stationnaire pour changer. Mais parce que si avait une couleur d'arrière-plan directement sur la transition pour le bouton dans ses états par défaut en ce moment, chaque fois que nous faisons simplement référence à la page d'un chargement de la page, la couleur va s'appliquer lentement dans un effet de transition. Donc la question peut vous avoir est OK, très bien. Mais que faire si nous ne voulons pas que le sac dévêtu à la transition lorsque nous chargeons la page, mais seulement quand nous avons réellement ho sur les boutons. Comment pouvons-nous y parvenir ? Eh bien, pour le faire très simplement, ce que vous pouvez faire est de supprimer l'effet de transition de la classe inférieure, qui est le froid. Bien sûr, les différents états. Vous pouvez supprimer cela et ensuite simplement appliqué directement sur les états de vol stationnaire pour violet ou vert tout ce que nous pouvions faire quelque chose ici à la place parce que simplement, disons, Boughton. Et puis nous pourrions jouer le HOA va sélectionnable. Et maintenant, ici, nous pouvons venir ici et ensuite appliquer la transition. Donc, fondamentalement, maintenant. Mais ce code disait Okay, quand un utilisateur survole l'élément de la classe des transitions de bouton Baghlan Coehlo de quatre secondes et pour vraiment voir l'effet, appliquons quelques Baghlan près des effets de vol stationnaire maintenant pour violet et vert. Donc, pour le violet, je peux dire que la couleur de fond devrait changer pour lire lorsque nous passons la souris sur le bouton populaire et pour le bouton vert, il devrait changer la couleur d'antan. Ça devrait changer. Disons rose sur tous les vêtements dans le mur rose. Alors voyons ce qui va se passer. D' accord ? Je vais le sauver maintenant. Retournons ici. Maintenant quoi ? Je vais me rafraîchir. Ok, plutôt normal. Mais maintenant, si je passe la souris sur le bouton violet, vous pouvez voir en ce moment il passe au rouge et je vais au vert une transition vers le rose sur les secondes complètes. C' est ainsi que vous pouvez obtenir de tels effets. Donc, pour récapituler, vous pouvez soit appliquer la transition que vous avez simulée directement sur un état par défaut des éléments, qui est, qui est,bien sûr, lorsque l'élément est chargé, soit vous pouvez appliquer spécifiquement le survol sélecteur. Je suis donc vous pouvez appliquer la transition spécifiquement à l'ensemble pour sélective pour un tel élément. Une multinationale mentionnée est qu'en plus de spécifier quelle propriété vous voulez faire passer la durée ainsi que l'effet d'attention, vous pouvez également jouer quelque chose connu sous le nom de délai de transition. Fondamentalement, ce sera un temps qui devra passer avant que la transition ne commence réellement. C' est ce qu'on appelle un retard. Donc, à titre d'exemple, faisons ceci. D' accord. Où nous avons le survol pour le bouton. Je vais venir ici et dire cinq secondes. Ok, Donc fondamentalement, avant que la couleur de fond ne commence à passer, nous allons attendre cinq secondes. Et puis après cinq secondes, il commencera la transition et se terminera dans quatre secondes. J' espère que cela a du sens. Allons-y. Sauvegardez ça. Retournons à un poza. Rafraîchissons la page. Maintenant jette un oeil à ça, d'accord ? Je vais planer sur le Popil. Ça ne change pas ça. Ça ne change pas. Ça ne change pas. Ça ne change pas. Pendant ce temps, cinq secondes sont comptées à rebours maintenant. Cinq secondes, Expats. Maintenant, il commence à changer son payé en transition, droite, comme vous pouvez le voir, la même chose pour le vert aussi. 2345 Et maintenant, il commence à changer. Et puis dans quatre secondes, ça va payer. Donc c'est une autre chose que vous devriez savoir. Transitions CSS. Maintenant, la question pourrait avoir. Voilà OK, il y a l'ordre. matière dit que nous devons le défendre comme nous en avons un pour la durée. Nous en avons un pour le retard. Peu importe lequel vient en premier. Cela compte parce que CSS reconnaîtra toujours la première fois a comme durée. C' est ainsi que CSS fonctionne donc Chaque fois que vous ajoutez une minuterie pour votre durée et pour votre retard , celle que vous ajoutez en premier sera considérée comme la durée. C' est l'une des choses importantes que vous devriez prendre note. Donc, c'est essentiellement manger pour les numéros de transitions. Allez-y et retirez ce que nous n'avons pas réellement besoin, qui est le sac sur la couleur, les effets sur le bouton et aussi la formation de retour sur refroidisseur, plein violet, je crois. Et oh oui, laissez-moi revenir en arrière et ajouter la transition pour la transition en classe de réservation. Ah, Bouddha. Coehlo est la propriété et nous ne le faisons pas en 0.2 secondes et nous sommes en train d'assouplir. Okeydokey. Allons de l'avant et disons que c'est juste la tête en arrière. Assurez-vous que tout est en ordre. Étaient d'abord une page et là vous allez. Génial ! Bon, donc c'est tout. Complet à, dans les transitions à nos boutons allemand Avonex vidéo disponible Maintenant commencer à ajouter la section à propos . Je te verrai alors 51. Créer la section à nous nous: Eh bien, reviens. Jusqu' à présent, si bien. Nous avons été en mesure de construire complètement la tête avec un logo, éléments de menu, section héros ainsi que l'image de fond. Mais ensuite, nous devons construire la section à propos des États-Unis, qui est essentiellement la deuxième partie principale de l'ensemble du site Web. Maintenant, ici, je suis déjà allé de l'avant pour ajouter la structure HTML de base pour la section about ALS et laissez-moi vous montrer ce que j'ai entre parenthèses. Donc, c'est fondamentalement juste ici. J' ai ajouté la section tack contenu froid. Je lui donne un I.D.S I.D.S . Je suis donc j'ai appelé pour donner une idée de ce sujet. Et puis nous avons eu le Dave du contenu, qui utilisera encore et encore et puis l'âge de marquer pour tout et puis Pete Sacks pour la société de développement Web primée et les succès dans une bla, bla, bla, bla. Puis j'ai ajouté en vous sourd avec le rôle hors classe, qui parlera un peu plus tard. Mais à l'intérieur, nous avons la tête de tweet H de qui nous sommes des tags forts pitak et ah, c'est fondamentalement tout. Donc, vous pouvez aller de l'avant et simplement saisir ce code et simplement coller. C' est dans votre document texte. Si vous voulez le faire, c'est une vidéo du compositeur. Faites-le et n'allons pas de l'avant et concevons la section à propos de tout. Jetons donc un coup d'oeil à ce que nous devons accomplir. Donc, ici, vous pouvez voir que la perte à propos a un peu comme un bleu sur la ligne, qui va jeter un oeil un peu plus tard. Nous considérons que le texte est juste ici vers le centre. Le texte juste ici pour notre succès a le style de téléphone de italique. Il a également un poids avant d'environ 300. Mais c'est là que les choses suscitent l'intérêt de frère dans vous remarqueriez ici, bien que c'est un peu comme une section de deux colonnes sur une colonne que nous avons qui nous sommes sur l'autre colonne. Nous avons ce que nous faisons, et ils ont des icônes vertes, et aussi le texte semble être aligné à ce centre. Donc une promenade assez intéressante ici. Alors faisons ça. La première chose que nous ferons, c'est que nous retournerons aux parenthèses, et quand je vais faire, c'est de créer très simplement deux nouveaux Dave pour qui nous sommes et ce que nous faisons. OK, alors regarde ça. Je vais venir ici en ce moment à une nouvelle DIV. On va donner un cours à Dave, et voici le nom de la classe que nous allons donner. Ça va s'appeler l'appel Dash un tiret à la classe. C' est généralement la norme dans CSS ou HTML, chaque fois que vous essayez de créer une classe complète une section à deux colonnes. Si c'était une section de quatre colonnes, alors vous iriez juste un tiret en avant à ce sujet un peu plus tard. Mais c'est ce qu'il a fait pour les premiers prêteurs de diversité. Allez-y et copiez ce cours, et ensuite on fera exactement la même classe ici aussi pour ce qu'on fait. Allons de l'avant et allons-y et hors du cap. Je vais aller de l'avant maintenant et fermer les yeux. Fermons le 1er 1 et bien sûr, nous fermerons le 2ème 1 ici aussi. Allons de l'avant et fermons cela et OK, donc avec succès maintenant à l'un de Dave pour le ce que nous faisons et un autre pour le qui nous sommes. Allons-y maintenant et ajoutez un peu de style, donc je suis juste d'enregistrer le document HTML. Tout d'abord, nous allons vers le bas vers le point principal CSS. Maintenant, ce que je vais faire, c'est que je vais créer une nouvelle section et compter parce que maintenant nous avons affaire mise en page du contenu. Essentiellement. Alors ah, faisons-le. Juste, voyons, juste en dessous des boutons qui vont entrer ici, pièce ça, pièce ça, et on appellera cette disposition de section Lee dehors. Et d'accord, donc la classe hors appel appel à la hausse Dash un tiret à ce que nous allons faire ici, c'est que nous allons donner la vie avec une telle classe A avec 48,5 % de réduction ça ne sera pas 50% parce qu'il faut toujours appliquer dans les marges et les modèles aussi. Donc, vous voulez généralement vivre un peu d'espace pour cela. Donc on va y aller avec 48,5. Et, bien sûr, parlant de marges, on allait lui donner une marge ou lui donner une marge. Disons 1% et zéro, puis un pour cent aussi, et un autre 1% laissez-les aller de l'avant et ajouter mes deux points. Et je sais aussi qu'on va leur ajouter du rembourrage. Donc, ceux qui vont zéro et 15 pixels n'oublions pas le livre Sizing ont une zone de bordure très, très importante, et nous allons aussi flotter vers la gauche. Alors faisons ça aussi. Les chances sont point-virgule, et cela devrait être finalisé. Allez-y maintenant et économisez et jetons un coup d'oeil à ce que nous avons. Retournons ici. Rafraîchir. Et voilà. Impressionnant. Donc maintenant au moins nous avons les deux colonnes vie là-bas, mais nous avons encore beaucoup de travail à faire. Commençons par le lauréat et le succès. Alors allons de l'avant et essayons de styliser ces deux balises de paragraphe. Et pour ce faire, nous allons revenir à notre index HTML du fichier html et leur donner une classe individuelle . Donc, pour la première balise P, nous pouvons lui donner une classe, et donnons à celle-ci une classe d'outil thaïlandais Dash un. Et puis pour la deuxième balise p, obtenons une classe P sur va aller un titre. Dutch aussi. Oh, gamin, ça a l'air bien. Sauvons celui-là. Appliquons maintenant un peu de CSS pour cela. Nous allons passer à la section du paragraphe. Donc, par ici, juste en bas. Il va venir ici maintenant et ils diront, titre P dot Um, Dash Juan et allons de l'avant maintenant et appliquer un peu de style à leur taille de téléphone. Je pense qu'on va y aller avec 17 pixels. Je ne suis pas intelligent. Il faudra peut-être changer ça. Il y a peut-être un peu trop petit. Poids avant. Allons avec 400 textos par ligne. Bien sûr que nous allons aller au centre. Ah, la couleur va aussi être 777777 et un demi-côlon. Et pour le premier titre P, la marge ici sera de 25 pixels, 14 pixels, puis 14 pixels. Donc, fondamentalement, l'échappement défaut pour le haut 40 pixels à gauche et à droite pour 10 pixels à partir du bas. Je vais aller de l'avant et copier tout ça, et nous ferons quelque chose de très similaire pour le titre P à sa pâte. Changez 1 à 2, et l'art A 42 va être un peu plus petit. Essayons 15 pixels. Ah, poids avant de 300 descente de l'industrie textile aussi bien sont la couleur est en fait 888 ce qui est similaire 456 Notre marge va juste être de 14 pixels tout autour. Allons de l'avant et ajoutons des fautes en pixels. Et ah, il y a encore une chose. Oh oui, le style amusant. N' oublions pas le style de police. Ce sera notre italique. Ok, allons-y. Enregistrez ceci et voyons à quoi cela ressemblerait. Retournons à l'intérieur. Ici fait référence à la page et là vous allez. Donc, évidemment, la taille amusante ici est beaucoup trop petite. Way, way, bien trop petit. Nous devons apporter des changements majeurs. Oh, d' accord. Essayons quelque chose ici. Je vais aller jusqu'au bout avec 26 pixels. En fait, les pixels détective de l' école, peut-être 30 pixels semble beaucoup mieux. Et puis, pour le 2ème 1 le Pierre pour essayer 24 pixels. Voyons voir. Ok, le certain semble beaucoup mieux que ce qu'on avait au départ. Alors passons avec 24 pixels pour le titre P vers et dans pour Peter pour le titre P, 1 30 pixels. Donc 30 et 24. Ok, faisons ce changeur 24 ici et 30 pour Peter toe 1. Allons-y, économisez. Retournons à un Broza étaient d'abord une page, et voilà, toutes les affaires, donc nous sommes presque là. Une fois de plus, vous devez changer, cependant, va être la taille sur le texte américain environ. C' est l'âge à marquer. Alors revenons ici les supports d'orteils et peut-être qu'on a de l'âge. Avons-nous chacun à un 25 pixels ? En fait, si on fait 40 pixels d'âge, ça devrait être un peu plus grand que de, dans les picks d'effet. Aussi, essayons 52 pixels. Sauvons celui-là. Retournons ici. Allons d'abord une page et OK, pas mal. Il semble beaucoup, beaucoup mieux qui sera eu à l'origine. Cependant, nous avons besoin d'ajouter un peu de rembourrage pour notre section parce que s'il remarque, y a plus d'espace entre l'ALS environ et le sac, une image que tout ce que nous avons actuellement ici. Et c'est parce que la section elle-même a du savon de rembourrage. Allons maintenant et ciblons la balise de section elle-même, qui, passant, est généralement utilisée chaque fois que vous créez nos nouvelles sections sur votre site Web. Donc, si nous regardons le modèle dit que nous avons ici à propos de nous va être un article sept est fourni sera une section où les travailleurs seront une section et ainsi de suite. Donc, généralement pour trier, vous utiliseriez les ixties sur la balise. Vous pouvez utiliser une div en place hors section et simplement lui donner peut-être une section hors classe. Mais puisque nous essayons d'être aussi précis que possible avec le code, nous allons aller avec la balise de section html à la place. Alors allons y aller maintenant et ajouter un peu de pat dans la balise de section et nous allons le faire ici où nous avons mis en page Très bien, donc ça va venir ici, et on appelle juste cette section sur, OK, donc fondamentalement, le motif va être Nous avons 50 pixels, nous avons zéro pixels et puis finalement nous avons 45 pixels. Donc, fondamentalement, les pixels du haut, donc zéro pixels gauche et droit, puis 45 pixels sont du bas. Alors allons-y. Maintenant, sauvegardez et revenons ici pour d'abord la page. Et voilà. Donc, il semble beaucoup, beaucoup mieux. Enfin, allons remarquer que le qui e. R. Tex et ce que nous faisons le texte est aligné au centre. Comme vous pouvez le voir, il colle le centre Alliance Maintenant, techniquement, nous pourrions simplement revenir à notre fichier de seaux, puis ici, où nous avons le CSS mental parce que simplement venir ici et donner le centre d'alignement du texte à le charbon tiret un tiret à, parce que c'est la classe. Ah, tenez dans le contenu pour qui nous sommes et ce que nous faisons. On pourrait faire ça. Mais ce n'est pas la meilleure idée, parce que plus loin, nous pourrions avoir besoin d'utiliser cette classe appelée Ash. Errer se tenait pour créer une autre section de deux colonnes, et dans ce scénario, nous n'avons peut-être pas besoin que le texte soit aligné au centre. Donc, pour éviter de tels problèmes à l'avenir, créons simplement une autre classe et nous pouvons appeler cela un centre. Alors faisons la même chose ici que que Sentelle. C' est au centre de la deuxième colonne aussi, et puis facilement, je suis juste sauvé ceci. Nous pouvons juste revenir au Maine que CSS et ensuite juste ici où nous avons la mise en page juste ici Ou plutôt, venons ici au contenu. En fait, faisons tous les contenus. Donc, pour le contenu, nous allons juste appeler ce centre de point et ensuite je vais juste dire tous les éléments avec la classe hors centre. Il suffit de lui donner une ligne textile au centre. Et voilà. Allons-y maintenant en sécurité. Retournez pour vous opposer à notre actualisation de la page et voilà. Donc, l'Allemagne, très prochaine vidéo disponible, ne commencera pas à ajouter un peu plus de style à notre section aussi. 52. Créer la section Services: bien reviennent. Dans une vidéo précédente, nous avons ajouté avec succès le contenu de la section à propos des États-Unis et j'ai dit que nous allions faire du design. Cependant, si vous jetez un oeil au site fini ici, vous pourriez commencer à remarquer quelques similitudes d'une section à l'autre comme un exemple ici à la vitale remarquera que nous avons ces chevilles. Un lien sur lequel ils ont cliqué nous mènera directement en haut de la page. Nous avons les titres ayant la frontière bleue juste là, quelque chose avec des services fournis par marche avec nous et ainsi de suite et ainsi de suite. Donc aussi, vous remarquerez le nombre de différents Aikens disponibles qui nous sommes a et je considère à gauche. Ce que nous faisons a Icann The Headers insensible, mais il a aussi Icann et tant d'autres en-têtes dans notre site ont également Aiken savon. Le point que j'essaie de faire ici est qu'il est toujours préférable que vous trouviez le type de contenu que vous pouvez créer et le type que vous pouvez reporter à plus tard. En règle générale, le contenu que vous souhaitez reporter à plus tard est du contenu que vous réutiliseriez encore et encore sur tout le site. Donc, le style dans la main, ce cas en ce moment plein les titres pour les sections comme environ a également fourni que nous pouvons appliquer cela plus tard. Même chose avec les Aikens que ce que nous pouvons ignorer les icônes pour l'instant et simplement les appliquer sont beaucoup plus tard. Mais pour l'instant, nous allons simplement nous concentrer sur la construction d'autres hommes dans les sections ainsi que le contenu de l'appel et aussi ajouter une certaine position qui est unique à cette section particulière. Donc, dans ce cas, moment, je vais ici pour ajouter la structure html de base pour la section des services fournis. Donc, si vous passez aux parenthèses juste ici, vous pouvez voir que j'ai ajouté la nouvelle section sur I d. services. J' ai ajouté leur classe de contenu ainsi que le titre H deux qui est des services fournis et puis le vous bien pour la liste sur ordonnée, puis les éléments Ally et puis h 34 développement Web , puis dans Norther Ul pour les éléments de liste sur cette particule notre service. Donc, disons ça très, très soigneusement. Vous remarquerez ici que nous avons une sorte de liste des principaux services, puis des services qui relèvent de ces services importants. Nous avons donc le développement Web à titre d'exemple. C' est pourquoi nous avons le premier allié ici. Et puis c'est un HDB parce que c'est un développement Web Hedda. Et puis sur cette liste particulière, nous avons des services qui possédaient ce service de veillée. Donc, sur le développement Web, nous avons des sites Web personnalisés que nous avons avec des applications e commerce magasins, Web progressif, APS. C' est pourquoi j'ai décidé de créer un autre moins à l'intérieur de la toute première liste, si cela a du sens. Donc, exactement la même structure est un jeu pour le développement d'APP mobile. Vous êtes vous X conceptions jeu mobile développé homme pour mettre la conception, migration cloud, assurance qualité, optimisation douce. Et enfin, notre cybersécurité est si finalement, c'est ce qui vous restera. Vous aurez votre H deux, qui est le titre principal du service fourni pour la section, puis vous aurez vos services principaux, puis les sous-services qui tombent sur eux. Mais d'une manière ou d'une autre, nous devons faire en sorte que ça ressemble à ce que nous avons ici. Essayons donc d'aborder le style le plus simple que nous pouvons appliquer, et ce sera l'image d'arrière-plan de cette section. Donc pour faire ça, quand je le ferai c'est que je reviendrai sur les parenthèses et faisons ça. Je vais aller de l'avant et ajouter une classe de section aux services, l'idée étant que si vous remarquez que nous avons toutes ces sections qui ont des images d'arrière-plan , par exemple, rencontrer l'équipe a une image d'arrière-plan, et notre nettoyage a également une image de fond. Donc, il pourrait être logique pour nous juste de créer une classe que nous pouvons utiliser pour ces trois sections différentes qui ont des images d'arrière-plan. Et le cours que je vais utiliser pour ça va être, ah, eux. Retourne à mes parenthèses. Nous allons dépenser cela donc ça va être ici, mais j'ai ma section i d. Donnons à cela une salle de classe que nous utilisons encore et encore, et cette classe va être image Dash BG. Très bien, ce sera une classe utilisera encore et encore. Laissez-moi aller de l'avant maintenant et simplement sauver cela. Ne passons pas à Maine dot CSS et nous allons commencer à ajouter quelques pierres au 1er 1 ici. Essayons d'ajouter l'image de fond ou nous avons ici. Donc, de peur que ce soit, je vais essayer de créer une nouvelle section spécifiquement pour les services. Alors faisons ça. Je vais prendre le titre ici. Copions ça. Et certains d'entre eux viennent ici. Allons le rythme. Et on peut changer Shiro aussi. Ah, nous allons changer les services sont venus les services. Et maintenant, créons la classe. Je suis désolé, nous avons un 80 ici pour les services. Droit ? Alors faisons ça. Je vais venir ici tout de suite, et je vais dire des services, et ensuite nous allons fournir l'image de fond. Quatrièmement. Donc je vais ouvrir ma colonne, accolades. Allons ici. Très bien, Donc va être l'image de fond, et j'ai la structure juste ici, alors jetons un coup d'oeil à ce vrai rapide. D' accord ? On va jouer la Lena. Super. Et rappelez-vous, on nous joue des ingrédients maigres, Alia. Donc ça va être tous G B A et les premiers votes que j'ai ici sont 000, puis 0,2. Donc ce n'est pas vraiment ce qui est la capacité. Donc il ne sera pas trop sombre. Répétons ça juste à l'intérieur. Coma RGB une fois de plus, puis à l'intérieur de la même valeur exacte. 000 et un 0,2. J' espère que je ne fais aucune erreur juste là. Et OK, coma et puis ne pas ajouter le votre de l pour l'image elle-même. Donc ici, nous avons nos manteaux, avons des pensées à échapper, et ensuite ce sera des images. Quatre barre oblique Nous avons l'arrière-plan comme le dossier par sol, et puis il va être des services point j p g. Allons de l'avant et ajouter un demi-deux-points. Allons maintenant sauver et ah, jetons un oeil à ce que nous avons ici. Rafraîchissons et voilà. D' accord. Jusqu' à présent, si bien. Nous avons le sac sur l'image juste là. Ok, je vais appliquer un peu plus debout en ce moment à la classe. Ils utiliseront encore et encore pour les sections qui ont une image d'arrière-plan. Alors regarde ça, je vais retourner aux parenthèses. Revenons à notre indexé avec HTML. Donc, ici, nous avons déjà ajouté la classe d'arrière-plan image tiret. Alors allons-y maintenant et ajoutons un peu de style pour cette classe très spécifique. Et pour ce faire, passons à cette section euh, zone. Donc, comme ici, nous avons des problèmes sexuels comme je vais venir ici maintenant et appelons ça un point de section. Soyez image très image tiret BG. Et puis ouvrons les accolades Kohli. Donc, modifions la taille d'arrière-plan qu'ils allaient appliquer. Allons avec une couverture, d' accord ? Et puis nous pouvons également ajouter une couleur d'arrière-plan pour de telles sections qui l'ont mieux. Une image qui va être 555555 Ajoutons aussi la position d'arrière-plan afin que nous puissions changer. L' angle à partir duquel les images seront affichées ici va être inférieur et central. Et si vous remarquez est si nous retournons, si vous remarquez ici, le sac sur les images ne bougent pas. Ils ne défilent pas. Comme on fait défiler l'école vers le haut, ils ne bougent pas donc vous devriez déjà dans aucune propriété de Walt dont nous parlons. Ce sera la propriété de pièce jointe en arrière-plan. Alors allons de l'avant et ajoutons cela aussi. Je vais venir ici tout de suite. Ça va être de l'arrière-plan. Ah, attache arrière du tableau de bord et ça va être réparé, ok ? Et c'est à peu près tout. Allons de l'avant maintenant et en toute sécurité et jetons un coup d'oeil à ce que nous avons actuellement. Rafraîchissons la page et voilà. Ok, on commence à y arriver. Mais maintenant essayons de faire quelque chose sur le contenu réel que nous avons à l'intérieur. Vous remarquerez ici que le contenu est en fait de la même couleur, mais ils sont tous couverts dans descolonnes de fond blanches, colonnes de fond blanches, et il semble assez agréable. C' est avec lui beaucoup mieux que ce que nous avons actuellement. Donc, il y a une très belle propriété que nous pouvons utiliser, et ce sera le flex d'affichage. N' oubliez pas que nous utilisons le flex d'affichage pour certains contenus, ou Pierre pour spécifiquement pour les éléments de menu. Donc nous allons essayer d'appliquer exactement le même processus ici aussi. Et pour ce faire, vérifiez ceci. Je pense que je vais retourner à notre index d'ex Tamil. Ajoutons une classe complète, Le principal u l et ciblaient essentiellement le u L. Parce que c'est l'élément principal tenant tous les services les moins importants ainsi que les services de savon ainsi. C' est là que je reçois spécifiquement dans cet UL juste là au sommet. Donc ce que je vais faire ici, je vais lui donner un cours, ok ? Et nous pouvons appeler la classe, Disons que les services de liste de tiret chose qui a un sens parfait. Allons de l'avant, sauvegardons Revenons à un document principal dit. Et puis ici sur la section des services, ajoutons maintenant une liste de tirets de services de style. Et maintenant, regarde ça. Je vais aller ici et dire Display, Flex. Alors faisons ça. L' affichage va être des flicks, d' accord ? Et maintenant, vous pouvez réellement spécifier la direction de notre flex dans Still pour le dire. Vérifie ça. Je vais venir ici et dire la direction du tableau de bord flexible. Et maintenant je vais y aller avec Whoa ! Allons-y. Sauvegardez ça et disons, voyez ce que nous avons pour revenir ici. Rafraîchissons la page et voilà. Maintenant vous pouvez voir parce que nous avons dit, Hey, la direction flexible est une rangée. Il va afficher tous les éléments tous les services de liste dans un seul bas, comme vous pouvez le voir en ce moment, cependant, notez que tous ces éléments sont à l'intérieur de notre classe de contenu qui a un maximum d'une puissance sur le 140 pixels. Ainsi, chaque fois que vous affichez vos éléments comme un flex, ils ont tendance à briser la structure. Et ils pourraient même sortir du conteneur. En ce moment, si vous remarquez très attentivement le contenu de la cybersécurité, notre liste ici. Ceux-ci ici, ils sont sortis du conteneur de 1000 errant pour les pixels. Donc, afin de correctement et de montrer que vous êtes des éléments flexibles sont rester à l'intérieur de tout le conteneur. Nous devons ajouter une autre propriété, et cette propriété ici va être le rap flex. D' accord. Et juste là, on va juste dire des trucs. Allons-y. Maintenant, sauvegardons ça. Retournons, rafraîchissez-vous. Et maintenant, vous pouvez voir qu'ils sont contenus à l'intérieur du conteneur. Donc, il s'agit d'une propriété très, très importante que vous devez garder à l'esprit chaque fois que vous affichez des éléments comme un flex et que vous l'obtenez. Si Lex, direction de O ou de colonne ou autre et montrer que vous est également inclure l'emballage flexible enveloppé ancien et montrer que vos éléments flexibles sont contenus à l'intérieur du conteneur. Ajoutons un peu de plus. Mettez-le de cette façon à votre modèle va être zéro et, bien sûr, le type de style le moins. Allons de l'avant et supprimons le style par défaut, donc cela sera réglé sur none. Et c'est à peu près allons-y. Maintenant, sauvegardez ça. Retournons à nos cloches se rafraîchissent et voilà. Ok, nous avons encore beaucoup de travail à faire en termes de style des éléments de la liste réelle. Mais avant que je autour de cette vidéo, vous remarquerez que le contenu de la section à propos des États-Unis se répandent en fait à l'intérieur la section de service fourni et juste contre le texte pour qui nous sommes, ce que nous faisons. Ils sont pratiquement à l'intérieur de la section pour les services. Qu' est-ce qui se passe exactement ici ? Et comment réparer cette vidéo allemande Avonex ? Je parie que je vais vous montrer un classique met un coup pour résoudre ce genre de problème 53. La propriété claire: retour dans la vidéo précédente est ajouté avec succès du contenu pour la section services. Cependant, nous avons également remarqué que le contenu de la section about se répand essentiellement vers ces services section. Donc, dans cette vidéo, je vais partager exactement ce qui se passe et comment nous pouvons le réparer. Mais tout d'abord, pourquoi le contenu se répand-il ? Eh bien, si vous vous souvenez, nous avons donné les deux colonnes en signe de la section sur les États-Unis. Nous leur avons donné la propriété flottante gauche va toujours briser la structure de votre contenu de votre mise en page. Vous devez donc le corriger en vous pour vous assurer que les effets flottants sont annulés. En tant que tel, il existe une propriété que nous pouvons utiliser et qui s'appelle la propriété claire. Avec cette propriété, vous pouvez le dire. Hey, je ne veux pas d'éléments au-dessus de moi en dessous de moi, à ma gauche, à ma droite pour affecter ma propre structure. L' idée ici est celle-ci. Je vais donner ces services de conteneurs de section. Jetez un oeil à ça. Je vais venir ici et dire clair. Et si c'est le cas, je vais dire les deux. Et voilà. Maintenant, vous pouvez voir que sa section de services a maintenant son propre contenu à l'intérieur de son propre conteneur. C' est l'effet hors clair, et il a en fait trois valeurs différentes que vous pouvez aller avec gauche, droite ou les deux. Donc, en fait, dans ce cas, au lieu d'aller les deux, j'aurais pu dire à gauche et cela fonctionnera toujours parce que les deux éléments au-dessus, qui sont ce que nous sommes et ce que nous faisons. Les colonnes d'air sec flottent vers la gauche. Alors je suis venu là-bas maintenant et je change à gauche. Disons juste, ça ne marchera pas. Mais la plupart des développeurs vont généralement avec les deux juste pour être du côté sûr, donc cela serait réellement marcher pour la section des services. Cependant, ce n'est pas la meilleure approche parce que même si nous avons été en mesure de fournir une structure réelle à la section des services, notez que le sujet ou la section est toujours cassé. Regarde une journée par ici. Si je passe la souris sur l'idée de section sur l'avis que le qui nous sommes satisfaits et aussi le contenu Hurriyah , ainsi que le contenu que nous faisons est toujours à l'extérieur de son flottant hors de son conteneur. C' est parce que ces deux éléments sont toujours flottants, donc l'approche idéale est de fixer ces éléments avec la propriété flottante plutôt que d'appliquer la propriété be clear à d'autres éléments qu'ils affectent. Alors, qu'est-ce qu'on fait exactement ? Tu penses peut-être. Eh bien, accord, si c'est le cas, pourquoi ne pas simplement aller sur chaque colonne et que j'ai joué la propriété claire ? Ça ne va pas marcher parce que vous ne pouvez pas appliquer la partie Clipper deux éléments qui flottent dans ça ça ne marchera pas. D' accord ? L' autre option serait d'ajouter la propriété clear à l'élément parent, qui n'est pas le rôle car nous avons la classe def de l'écriture qui contient ces deux colonnes qui flottent. Malheureusement, cela ne marchera pas non plus, car l'application de la propriété declare à un élément dont les éléments Children flottent n'est pas non plus un pied d'orteil. Alors, qu'est-ce qu'on fait exactement ? Et cela nous amène à un classique, dit une série que vous allez utiliser encore et encore dans votre voyage en tant que développeur CSS. Ce que nous devons faire, c'est que nous devons créer du contenu factice soit avant nos éléments du flottant peut-être après ou peut-être même les deux, et alors ce contenu factice va maintenant lui appliquer la propriété claire pour compenser les effets la éléments flottants. Ne vous inquiétez pas. Et je parle du grand. Maintenant, je vais t'expliquer ça. Très, très clair. Feli, regarde ça, accord ? Je vais retourner aux crochets CSS. Ok, ouvrons Main ce CSS. Je suis juste près de celui-ci ici et maintenant je vais passer à notre section la mise en page par là et ici, tout d'abord, donnons à Arvo un avec 100%. Ok, 100% bien. Maintenant, nous devons créer du contenu fictif avant et après notre classe basse. S' il vous plaît garder à l'esprit que nous sommes des cibles dans la classe basse ici parce que c'est l'élément contenant les deux éléments qui flottent. Regardez sa structure de démonstration. Juste ici. Nous avons la journée à cause de Roe et ensuite le jour de la classe hors centre, juste ici qui nous sommes et ce que nous faisons. Ce sont ceux qui flottent, nous devons donc cibler l'élément contenant les deux. Ce qui est, bien sûr, la classe hors route. C' est là qu'on le prend en classe basse. Ok, revenons ici, je vais voir ça aller. Et maintenant je vais vous présenter un nouveau type d'élément connu sous le nom de pseudo-éléments. Et nous l'avons indiqué chez Colon. Et maintenant je peux le dire avant. Mais aussi, je vais dire que Low Coghlan et ensuite après. Donc fondamentalement, en ce moment, nous voulons créer du contenu avant et après notre classe basse. Je vais ouvrir mes accolades de colonne, et c'est exactement comme ça qu'on a créé du contenu fictif. Je vais éditer la propriété appelée contenu. Il va être vide parce que nous n'affichons rien. Je vais ajouter mon point-virgule. Il est bon d'ajouter un peu d'espace entre les deux codes, ailleurs, sorte qu'à un certain espace là-dedans et maintenant je vais dire cette table de jeu, C'est un nouveau. Ce qui est fait, c'est qu'il crée beaucoup. Maintenant, nous vendons, donc c'est beaucoup mieux que vous dites affichage, coup d'appel dans le bloc terrestre ou à l'intérieur avec table. Ça crée une cellule vide imaginaire. Donc, cela ajoute un peu au contenu si cela a du sens. Et enfin, je vais entrer tout de suite et dire clairement les deux. Donc, ce que nous avons fait maintenant, c'est que parce que nous ne pouvions pas appliquer le clip à ce sujet directement à la classe de rôle, nous avons dû créer du contenu fictif avant et après qu'ils le feront. Au fait, écoutez, au fait, ce n'est pas compulsif que vous devez aller avec avant ou après. Vous pouvez simplement dire avant, simplement ou après tout simplement que cela ne va pas avoir d'importance. Tout dépend de la structure de votre page XML, cependant, cependant, d'être du côté sûr, tout comme avec effacer à la fois les pseudo-éléments typiques aller avec avant et après juste pour être du côté sûr. C' est pourquoi j'avais dit d'aller avec avant et aussi avec après. Donc maintenant que nous avons crédité le contenu factice, nous pouvons maintenant appliquer, déclarer la propriété à eux. Allons-y maintenant en sécurité. Retournons ici. Rafraîchissons la page et que vous allez toujours la même chose. Mais maintenant, notez que si nous inspectons le sujet ou l'avis de section maintenant qu'en effet le qui nous sommes contenus ainsi qu'ils ont déjà contenu sont maintenant contenus à l'intérieur de la section ou à propos . C' est donc exactement comme ça que vous géreriez les éléments qui ont des éléments flottants contenus à l'intérieur d'eux. Comme je l'ai dit, c'est un truc que vous allez appliquer encore et encore dans votre voyage comme un CSS développer vers le haut. Alors prenez note de ceci. Donc c'est, je pense, c'est beaucoup de fortune. Je te verrai dans le prochain cours. 54. Styler la section Services: Bienvenue de retour. Essayons de styliser la section des services pour qu'elle ressemble à Ah, eh bien, nous avons ici. Alors voyons. Vous pouvez voir en ce moment que nous avons trois lignes et aussi trois colonnes. Donc, nous devrions penser, Ok, peut-être que nous devons fournir un ensemble avec pour le parent l I éléments comme le développement Web amable, abs. Tout cela devrait avoir, comme, un ensemble avec, et il devrait être d'environ 33% de sorte que l'ajout des trois colonnes sera fondamentalement environ 99% sur l'ensemble avec pour le conteneur. Donc c'est comme ça qu'il devrait penser en ce moment, 33% avec pour chaque conteneur. En outre, nous pouvons voir qu'ils ont également un fond blanc. Il y a beaucoup de marges de rembourrage appliquées, mais nous avons aussi ce qui ressemble à notre quelque chose des vidéos de Bordeaux, peut-être environ trois pixels et ainsi de suite. Alors faisons ça. Ok, ce qu'on va faire Tout d'abord, ça ne va jamais fournir un avec pour les éléments parents I I. Revenons à notre indexé de XML. Donc, ici, nous devrions être idéalement devrait cibler ces principaux éléments dans Hagen CLI. Il détient essentiellement le développement Web, puis il détient les services sob sur le développement Web. Il y a aussi une autre compagnie aérienne ici, donc ce sont les alliés que nous devons fournir ainsi que les antécédents. Cependant, il y a un peu de problème. Vous voyez ces seuls alliés et qu'à l'intérieur de notre liste de services UL, ces sous-services eux-mêmes sont également des éléments de L. I. Donc si nous venons ici maintenant et qu'on dit quelque chose comme, Hey, faisons ça, on va dire ne pas faire de services. À titre d'exemple, je soutiendrai les services, la police et puis je dis un mensonge et je viens ici tout de suite et puis je dis, Ok, donnons quelques uns avec le rabais de 3%. Allons-y et sauvegardons ça. Le problème ici en ce moment est que chaque l je vais avoir un 3% y compris les services de savon ainsi, mais nous Onley voulons fournir le avec pour les principaux éléments L I, ceux les éléments alliés parents, pour ainsi dire . Alors, comment nous les ciblons spécifiquement et eux seulement Eh bien, je vais vous présenter dans un nouveau sélectionnable appelé le sélecteur d'élément. C' est habituel, représenté par le symbole supérieur à. Donc, ce qui est ceux-là est que nous pouvons marquer des éléments très spécifiques dans signé un élément parent . Donc, si nous voulons cibler les principaux alliés, nous pouvons dire que Hey, seul le L IES qui sont directement sur la liste de services hors classe leur fournit est de cette façon ces autres alliés, les sous-services ne seront pas plus être applicable parce qu'ils ne sont pas pleins directement sur vos vêtements parce qu'ils tombent sur le Vous étiez juste ici, et puis ils tombent sur le parent un lion, et enfin, ils tombent sous la classe de sorte qu'il sera applicable à parce que nous ne sommes que des cibles dans les éléments directement sous la classe, euh , ce qui serait les cheveux alliés et ainsi de suite et ainsi de suite. Alors faisons ça. Je vais retourner ici. Allons jusqu'ici. Je vais supprimer cela et ajoutons la liste de tiret de services et puis le symbole râpé et, puis l je vais tout droit maintenant allons de l'avant et ajouter le avec comme un perdu la couleur d'arrière-plan. Oh, allons-y. Maintenant, ça va être, je vais aller avec un 2,3 pour cent. Ok, ajoutons aussi une marge sur. J' ai mes marges à 1% et ah, 00, puis à 1% de la gauche aussi. Et ajoutons ah, fond d'appel admiration, qui va être f A f a f a. Ok, voyons ce que nous avons. Un coffre-fort. Revenons à ce que Nous avons rafraîchi la page et voilà. Ok, pas mal. Ajoutez tout. Cependant, nous avons encore évidemment besoin d'appliquer un peu plus de rembourrage à l'intérieur. En attente d'appliquer sont un rayon de bordure ainsi, et aussi dans son vous appliquez. Donc, les marges au sein du sont des sous-services eux-mêmes. Vous pouvez voir qu'il y a beaucoup d'espace entre eux. Alors essayons de réparer ça. Retournons aux parenthèses. Bon, donc pour les parents alliés, ajoutons un peu de rembourrage, ok ? Et j'ai cinq pixels. J' ai 20 pixels. J' ai 20 pixels et 20 pixels. Encore une fois, ajoutons la bordure. Qui c'est aussi. Et je vais trois pixels. N' oublions pas la frontière. Je suis désolé. La taille du livre et la propriété ainsi que la science du livre. Et disons juste que vous avez acheté une boîte aussi. D' accord. D' accord, sauvegardons ça, puis jetons un coup d'oeil et voyons à quoi ça ressemble. Ok, on y va, mais on y va maintenant. Nous avons juste besoin d'appliquer quelques marges au L. I. Les alliés sont à l'intérieur des alliés parents et changent aussi. On dirait la taille du téléphone. Cela a semblé être beaucoup plus petit que ce que nous avons actuellement dans le succès. Ok, alors pense à ça. D' accord ? Comment allons-nous cibler spécifiquement la bière Children ? Je éléments maintenant parce qu'il y a un Dylan était prêt à le prendre. On ne le prend pas. Les éléments de l'allié parent. Pouvez-vous penser à comment nous pouvons les prendre spécifiquement ? Ce n' est pas difficile, et j'en suis vraiment sûr. Tu vas faire ça ? On va retourner ici et la même chose que la liste de tirets des Services. Et maintenant, je vais dire plus que d'avoir l'allié. Et maintenant l'U. L Ok, prenez des notes. Vous pouvez voir en ce moment c'est le parent un mensonge. Maintenant que les cibles aux États-Unis, gars ces garsqui tiennent les services de savon, c'est exactement comme ça qu'on fait. Alors revenons ici et appliquons un peu de silence. Je vais ouvrir mes courses de collie comme d'habitude et le type de liste. Allons-y et appliquons. Nous avons le disque est un style, puis la taille du téléphone. Nous l'avons à 14 pixels, je crois, et il a également ajouté un peu de remplissage à gauche, et j'ai les pixels juste ici. Voyons à quoi ça ressemble maintenant. Allons-y maintenant et économisons. Retournons aux rebelles sur la première page. Et voilà, vous allez, en regardant beaucoup, beaucoup mieux. Juste quelques autres choses. Nous avons surtout des marges. Ils ont toujours tendance à avoir de l'argent entre eux. Comme vous pouvez le voir, ils ne se regardent pas si près l'un de l'autre, contrairement à ce que nous avons actuellement ici. Donc, nous allons bizarre beaucoup est directement aux sous-services nos éléments alliés maintenant, donc je vais retourner ici, et je vais juste attraper ça. Il y a juste copier tout le style et revenir ici coller. Et je vais changer le L I ici. Je suis désolé, le, euh, mais je vais le changer pour le I. Nous n'avons plus besoin d'ajouter l'UL parce que peu importe où encore pour obtenir dans les éléments Children, les Children, un mensonge, des éléments qui tombent sous l'élément parent Airlie. Nous n'avons donc plus besoin d'ajouter l'UL. Donc bien, parce que je vais ajouter ici va être la marge, et j'ai huit pixels écrits pour eux. Allons-y en sécurité, et on devrait aller bien. Maintenant, la première page. Et voilà. Une dernière chose, comme vous pouvez le voir, serait la culo, tous les h aux services fournis de toute façon pris. Tu vois, c'est en blanc. Vous descendez, il peut voir rencontrer l'équipe est également en blanc. Et puis ici, nos cours et blanc. Mais rappelez-vous que nous avons fourni une classe spécifique pour les sections qui ont une mauvaise image au sol . Comme ça. Tout ce que nous devons faire maintenant, c'est simplement prendre l'âge de deux ans à l'intérieur d'une telle classe. Et pour faire ça, je vais rentrer. Passons à l'âge à la section elle-même. Donc tout le chemin ici. Donc je vais venir ici, et je vais dire que la section est OK, et ensuite n'imagine pas Dash BG. C' est la classe que nous leur avons donné des décisions avec une image de fond h deux et juste très, très simplement, très simplement, je vais juste dire que la couleur ici serait réglé sur f f f f f f f f f f f f f f f f f f point-virgule sauver. Revenons ici fait référence à la page Je suis désolé. Actualisez cette page et voilà. Donc, évidemment, nous pourrions aussi ajouter encore, comme la bordure bleue ah des idées Vous pouvez voir parce que simplement dire, bordure fond bleu Ajouter quelques marges ainsi, choses comme ça. Mais il y a une autre façon d'ajouter nos frontières bleues sous la taxe H2 . Ne vous inquiétez pas pour ça. Et notez également que le fond de la fleur de la bordure bleue est plutôt présent sur tous les deux H, peu importe là-bas. Non, ils ont une image d'arrière-plan ou non. Donc, nous ne pouvons pas appliquer le style spécifiquement à cette classe, car alors les sections qui n'ont pas d'image d'arrière-plan ne seront pas le même effet. Donc nous devons trouver différents moyens de s'en sortir. Ajout Les bordures bleues de R H sont-elles deux balises ? Alors c'est tout. Merci beaucoup d'avoir regardé. Et bien sûr, il y a toujours que je te vois dans le prochain cours. 55. Créer la section Pourquoi nous: Bienvenue, j'espère que vous apprécierez le cours jusqu'ici et nous avons fait beaucoup de progrès. Nous avons ajouté notre en-tête principal avec l'arrière-plan du héros avec ajouté à propos d'une section services fournis. Et maintenant, nous parlons de la section Wire Walker et est contre le déjà aller de l'avant pour ajouter la structure HTML pour cette section. Mais jetons un coup d'oeil à ce que nous sommes censés concevoir ici, et c'est assez simple. Ce n'est pas une section compliquée par n'importe quelle partie de l'imagination. C' est très similaire à ce que nous avons inhiber la section à propos des États-Unis, la principale différence étant que bien que cette section ait deux colonnes principales, une pour le Who, nous sommes l'ordre pour ce que nous faisons ici. Nous avons quatre colonnes à la place. Donc, en ce moment, nous devrions penser à créer quatre Dev différents, leur donnant une classe particulière, et cette classe aura peut-être avec off, voyons, peut-être 23 p dire deux ou 24% ou quelque chose comme ça, vous savez, et ici pour le texte comme la recherche et les alliés plan exécuter, nous pouvons, bien sûr, utiliser des travées pour eux et en fait, je l'ai déjà fait. Permettez-moi de vous montrer la structure HTML ou ce que j'ai actuellement. Donc c'est juste ici. Assez simple. Nous avons notre section I d. Pourquoi Tash nous le même contenu de classe, qui, qui, bien sûr, met tout le contenu à l'intérieur du conteneur que nous avons l'âge à laquelle est où marcher avec nous et puis le p principal, qui est ce que nous ne développons pas seulement. Et bien sûr, les travées pour la recherche et les alliés plan exécuter. Et puis nous avons le jour, bien sûr de la ligne. Et maintenant, nous avons maintenant le principal Dave qui tient la raison intermédiaire. Donc Dave numéro un ici, contenu est suffisant. Cette recherche remplie et deux paquets de textes. Le second invité contient les données analysées et ainsi de suite. Donc ce sont les Dave qui devront donner la classe deux et fournir cette classe avec le off 24% d'entre eux environ. Mais avant de le faire, nous allons gérer le style très facile. Et bien sûr, ça va être dans les couleurs de notre texte. Juste ici. Recherche et alliés plan exécuter. Alors faisons ça. D' abord, abord, je vais donner ce texto ici. Je vais lui donner un cours en dehors du titre Dash 3. Donc ici, je vais dire classe égale et ensuite titre Dash 3. Ok, Maintenant, ajoutons la classe est pleine. Ce texte spécial. Donc le 1er 1 ici va être bleu parce que la recherche est en col bleu. je Analysez, crois. Ça devrait être orange. Disons orange qui sait épeler orange. Ah, plan, je crois que c'était vert appels verts. Et dans le dernier Panelist exécuter a la classe sur ajouter rouge pour exécuter. Oh, d' accord. Je pense que c'est bien, c'est aller de l'avant. Sauvegardez ça. Ne nous allons pas frapper sur deux principaux que CSS. Donc, ici, sur la section ah paragraphe, je vais ajouter le style pour Pete. Ce titre Dash trois et j'ai une taille amusante d'environ 20 pixels. J' ai aussi un texte, une ligne de centre, et j'ai beaucoup de marge, qui va être de 35 pixels et 14 pixels et 14 pixels supplémentaires. Ok, génial. Ajoutons maintenant le style pour les travées. Donc, nous avons la portée bleu et le collier va être un membre. Il suffit de vérifier ce que j'ai ici coeur. Il est 40 b sept f f Cela va être pour le bleu et puis nous l'avons enroulé orange et ajoutons l'orange coloré. En parlant d'orange, je n'ai pas mangé d'orange aussi. J' adore les oranges. Je ne sais pas pour toi, mais je t'aime comme si je pouvais sucer six oranges en un coup. Je les aime tout simplement. Bon, continuons. Nous avons la plage que Ah, vert et puis la couleur verte Linda vérifie les cheveux jaunes pour le vert. C' est un à C B 913 Et dernier mais non le moindre, nous avons M. Exécutes exécuter les armes ou étendre ce rouge pas exécuter. Et la couleur ici va être f 5050 Ok, maintenant, une dernière chose, cependant, est le poids avant. Et ce qui est drôle, c'est 500 pour tous. Pour que nous puissions le faire. Je vais descendre jusqu'ici. Nous allons créer une nouvelle section. Copions ça. Allons tout le chemin ici et je vais appeler ça. Ah, pourquoi nous ? D' accord ? Et maintenant, je vais dire, Ajoutons p titre sombre. Eh bien, disons simplement, les services. Je suis désolé, pas les services, mais pourquoi nous ? L' i d de pourquoi nous battre ? Je crois que c'est pour ça que Dash Islam vient de confirmer ça très vite. Ok, les idées Y nous battent. Bon, revenons ici. Alors pourquoi nous battre ? Et puis je vais dire pourquoi cette période ? Donc, il y a des travées à l'intérieur du pourquoi nous battre ? Donnons-lui un orteil de téléphone Attendez 500 et puis il y va, Allez-y. Maintenant, sauvegardez cette tête à un broza renvoie la page, et voilà. D' accord. Pas mal du tout. Où va là-dedans ? Jetons un coup d'oeil et voyons. D' accord. Ah, ça ne semble pas être confirmons juste la taille de ça. Il fait 20 pixels, mais il semble être un peu plus petit. L' âme. Peut-être qu'on peut y aller avec 23 pixels. Je pense que ça va, jusqu'à 23 pixels devrait être un peu plus précis. Alors faisons ce changement rapide. Retournons ici. Où avons-nous le Peter ? Il y en a trois. Ok, alors nous allons juste dans les images à 23 pixels et nous sommes bons. Ok, maintenant pour le truc principal, qui est, bien sûr, de diviser le texte principal ici en quatre colonnes. Maintenant, rappelez-vous que quand nous avons traité la section à propos de nous, nous avons utilisé le tableau de bord Cole pour la classe pour les deux colonnes. Alors maintenant, nous allons créer un nouveau type de point de beauté kilométrique appelé Dash 1-4 Alors revenons ici. Allons à la disposition. Je crois que c'est là que nous avons créé la structure. Et d'accord, donc c'est là, juste là. Donc je vais juste copier ça. Tu sais quoi ? Copions que venir ici, coller ça et puis je vais faire est que je vais changer à ici pour changer le chemin avec maintenant pour qu'il puisse accueillir quatre colonnes, donc ça va être 23,75%. Voilà combien j'ai sont les marges vont rester exactement les mêmes. La même science de la boîte de modèle et flotteurs gauche aussi bien. Donc c'est tout ce qu'on a à faire. Sauvons. Revenons à l'index de html et laissons simplement copier ceci. Je vais copier cette classe Copions cette tête à l'index de HTML et maintenant nous pouvons juste donner cette classe à la division. Ici, ils ont des égaux de classe et puis payons la classe blanche. Ils enlèvent les points et voilà. Donc, copions ceci et nous allons juste copier et coller venir ici. Oups, gardons l'indentation que la même chose ici est, eh bien, coller retour arrière pour garder l'indentation. Et le dernier mais non le moindre, voilà. OK, donc on devrait aller bien maintenant, on a ajouté les cours à toutes nos vies. Allons-y maintenant, sauvegardez celui-là aussi. La tête de retour ici fait référence à la page. Descendez ici et vous y allez. OK, jetons un coup d'oeil. Et c'est presque exactement la même chose. La seule différence, bien sûr, est que les titres, le domaine de recherche, ils ont des icônes, qui, bien sûr, ajoutera sont beaucoup plus tard. Mais c'est tout. Construction complète sur la façon dont je marche avec la section américaine Allemagne, Venezuela, où va maintenant aller de l'avant et marcher avec le MIT. Cette même section 56. Créer la section Team: Bienvenue de retour. J' espère que vous passerez un moment merveilleux où que vous soyez. Donc, auparavant, nous avons été en mesure de créer la marche du fil avec une section, mais maintenant il est temps de jeter un oeil à la rencontre de la section de l'équipe. Alors, comment allons-nous créer la structure et ensuite concevoir cette section ? Jetons donc un coup d'oeil à ce que nous avons actuellement. Nous avons huit membres de l'équipe, et vous pourriez penser, OK, nous pourrions être en mesure d'utiliser la structure des colonnes ici, mais nous pourrions utiliser la classe. N' appelez pas Dash 1-4 parce que nous avons quatre colonnes, mais ce ne sera pas le meilleur, parce que nous devons le faire. Rosa's Eh bien, ce n'est pas comme le travail de cette section où nous avons quatre colonnes et juste un seul vote là-dedans. On doit ramer. Donc, en ce moment, vous devriez penser plus flex d'affichage, assis sur les drapeaux d'affichage, puis la direction de flexion devrait être faible. C' est exactement ce à quoi vous devriez penser du point de vue du design. Mais du point de vue HTML, la structure réelle elle-même. ce moment, ça ressemble à une liste. Ok, donc on va avoir un ul et des alliés, mais on va aussi avoir des Dave. On va probablement avoir un mort pour la photo, accord ? Et nous pouvons aussi avoir un jour pour peut-être le nom de la personne, puis un autre jour pour le titre. On n'a pas forcément besoin d'utiliser des voleurs pour ça. Nous pourrions également utiliser des travées et peut-être les afficher comme un bloc, tout cela dans la plupart des façons, ayant des félicitations pour obtenir exactement le même résultat. Mais dans mon cas, je vais utiliser des dibs pour tenir la photo pour tenir le nom de la personne et ensuite la position. Ok, alors essayons ça. Je vais revenir sur les parenthèses, et ce que j'ai fait, comme d'habitude, comme d'habitude, c'est que je suis allé de l'avant pour ajouter la structure très basique, qui est juste la section que je d. Je lui ai donné l'idée que l'équipe a donné la classe de l'image tiret Bijie. Parce que, bien sûr, nous avons encore un fond ici pour les images des baggers, tu vois ? Donc, cela a été beaucoup similaire aux services fournis. Donc, c'est pourquoi a ajouté la classe juste là et bien sûr, le bon vieux Dave de l'âge du contenu pour le former. L' équipe et c'est ce que j'ai accompli jusqu'ici. Alors allons-y vers 18 ans. La liste, tout d' abord, donc je vais venir ici maintenant, et ajoutons un u l et donnons la classe immédiatement. Je vais lui donner un cours. Appelons cette équipe une liste. Ok, maintenant, allons-y et fermons ça. Maintenant, pour afficher nos membres facilement, nous allons les utiliser comme Ally, donc nous aurons un allié. Ils seront comme le parent I I I , et ensuite les bûches tiennent dans la photo. Le nom, la position sera sur le que l I Donc c'est un peu similaire à ce que nous avons fait ici avec leseventies fournies. Alors regarde ça. Je vais retourner sur les parenthèses et sur le puits U, dans l'allié publicitaire apparent. D' accord. Et puis à l'intérieur, je vais ajouter sont forcés à Dev et va donner à cela la classe hors. Appelons cette photo d'équipe. Tim, photo, Kate. Et nous allons juste aller de l'avant et ajouter l'image de cet employé particulier qui allait être le PDG égal manteaux. Maintenant, pour trouver la source, je vais retourner dans mon dossier, et je crois que c'est à l'intérieur des actifs. Tropté. Ah, puis des images et puis de l'équipe. Ok, donc c'est là que tu trouverais les images. Donc ça va être des images d'équipe. Ok, je crois que j'ai compris. Retournons ici. Donc ça va être des actifs. Nous n'avons pas besoin de faire d'échappement, car n' oubliez pas que le document HTML lui-même est à l'intérieur du même dossier que les assets. Donc, ce n'est pas comme si nous échappons de l'ah hors de l'index du HTML avait un B. Nous avons affaire à la construction de barrage de fichiers CSS pour échapper du dossier de cette année, puis dans ce dossier où nous pouvons prendre les actifs. Mais puisque nous ajoutons les images directement via l'index du fichier XML, nous n'avons pas besoin de faire d'échappement. Ok, donc j'espère que tu l'as eu. Retournons ici vers les parenthèses. Bon, donc ça va être l'équipe des images quatre slash, et puis je crois qu'il s'appelle Rusty. J P. G. Et voilà. D' accord, allons-y et fermons. Cette première Div est arrivée. Est-ce que je vais sauter en bas ? C' est sûr que c'est fermé. Qu' est-ce qui saute ici ? Ajoutons le prochain Dave. Donc la classe Dave égale ça va être pour les noms. Will a appelé son équipe Dash nom et son nom est Rusty Dela Cruz. Et fermons Div. Je ne sais pas pour toi, mais j'ai toujours trouvé ce nom drôle. Ok, perdons juste la tête ici, Dave Class équivaut à l'équipe que le poste serait Pos. Et bien sûr, il est le c e o mort. Fermons celui-là. Et d'accord, donc on n'a pas fermé autre chose qui va être l'allié. Nous devons fermer la lumière d'air et fermons aussi le u l et voila ! Ok, alors nous allons récapituler. Nous avons la classe U. S de la liste de l'équipe le L que je détiens dans la div qui détient l'image. Un autre jour de cela contient le nom. Positionnez-les ont tout fermé Ok, Allons-y et sauvegardez cela. Revenons sur les factures d'abord la page et il est si heureux est comme, oui, je suis le PDG, d' accord, accord, donc de toute façon ont été ajoutés avec succès la première personne Dela Cruz, M. PDG Donc ce que je vais faire en ce moment est que je vais essentiellement utiliser la même structure pour ajouter les membres restants de l'équipe. Je vais mettre la vidéo en pause et reprendre une fois que je les aurai toutes ajoutées. Bienvenue de retour. Et comme vous pouvez le voir maintenant, je vais ajouter tous les nombreux membres de l'équipe. J' ai fait une erreur avec cette orthographe pour Rusty, alors j'ai réparé ça. Mais j'ai également ajouté le texte complet pour les autres membres. Et je vais faire la même chose pour M. Rosti Dela Cruz. Donc c'est quelque chose que vous devriez toujours essayer de ne pas oublier de faire comme je l'ai fait. J' ai toujours essayé de vous ajouter tout le texte pour toutes vos images. Laissez-moi faire ça maintenant pour M. Rusty dela Cruz. Et OK, alors sauvegardons ça. Et jetons un coup d'oeil à ce que nous avons en ce moment. Actualiser. Et bien sûr, en ce moment, vous pouvez voir toutes les images avec les noms des gens ainsi que leurs positions. Ok, alors entrons dans l'action CSS. Continuez à laisser tomber leurs deux principaux que CSS. Et nous allons refroidir vieux chemin ici. Prenons le pourquoi. Pourquoi nous ? On va créer une nouvelle section. On va appeler cette équipe. Allons aux membres de l'équipe sur les membres de l'équipe. D' accord. D' accord. Donc la première année va le faire à côté de l'affichage en flex. Bon, donc on va prendre la de classedel'équipe nationaliste. Ok, ouvre. Notre collègue accolades, et entrons dans un peu d'action. D' accord ? Donc, l'affichage va être flex, puis détourne la direction, comme vous pouvez l'imaginer, va être rôle. Et voilà. Donc, nous allons aussi faire le rap flex aussi bien. Flex rap va être rap. Et supprimons également le type de style de liste A. Nous ne voulons pas de style pour nos listes ou listes. Type de style. On m'a dit, je ne veux rien. Et nous allons juste enlever n'importe quel motif aussi. Ok, donc zéro et OK, alors gardons ça. Et disons juste les progrès que nous avons faits Revenons ici. C' est la première page, OK, mais presque nous y arriverons OK, étaient encore besoin de mettre un avec pour les vrais alliés eux-mêmes. Alors revenons ici. Je vais créer une nouvelle déclaration. C' est un allié de la liste de tirets d'équipe. Et puis ouvrons ça. Je vais donner à ça un avec 24% de rabais. Ok, parce que, bien sûr, c'est un quatre colonnes, donc ça ne peut pas être 33% ou 50% parce qu'alors il n' y aura pas quatre colonnes ou 24% devraient être juste à peu près bonnes marges. Et vous avez mes marges à 1% zéro zéro et ensuite ah, 1% aussi, ce qui est assez standard. J' ai la couleur de fond, qui est la même. Ah F A f a f A et j'ai beaucoup de Patton, 20 pixels, 20 pixels, 10 pixels et entrer des pixels. Ajoutons la taille du livre. Ce sont des règles assez standard mais une boîte et que vous allez OK, donc maintenant nous l'avons ajouté à nos alliés Marges, couleur d' arrière-plan. Sauvons la tête ici, rafraîchir et tout. Ok, alors où on est presque là. Je sais que cela semble terrible, mais au moins en ce moment, vous pouvez voir que CSS tente d'afficher les employés en deux lignes avec quatre colonnes, donc il y a beaucoup de choses dans son do en ce moment. Le problème majeur est que les images elles-mêmes sont assez grandes. Si je retourne à mon dossier, vous pouvez voir qu'ils sont tous fondamentalement bien, ils viennent de taille différente. Ceci, par exemple, est 12 80 par 1 50 M. Montré ici est 9 50 par 8 50 et ainsi de suite. Donc, ce que nous pouvons faire est que nous pouvons définir une hauteur maximale pour toutes les images et ensuite nous pouvons également définir notre débordement pour être caché. Alors vérifiez ça. Je crois que je vais retourner ici. Créons une nouvelle image de tableau de bord de l'équipe de déclaration, et vérifions ceci. Je vais définir quelque chose connu sous le nom de la hauteur maximale de sorte que quoi qu'il arrive, il ne dépassera jamais 200 pixels. Faisons aussi quelque chose connu sous le nom de débordement et nous avons dit cela à caché. Donc, fondamentalement, ce que cela fait est que toutes les parties de l'image qui pourraient se déverser à l'extérieur du conteneur simplement le cacher. C' est ce que fait le débordement caché. Sauvons cette tête ici, rafraîchissez-vous. Et voilà. D' accord. Cependant, il y a encore un autre problème. Le fait que nous ayons fixé une hauteur maximale pour l'image a quelque peu modifié les choses parce que pour l'instant C s dit seulement le sait. Ok, cette image ne devrait pas avoir plus de 200 pixels de hauteur. Mais qu'en est-il du avec ? Nous devons aussi faire quelque chose à faire avec aussi. Nous ne pouvons pas définir un spécifique avec en termes de pixels. Mais ce qu'on peut faire, c'est qu'il faut un petit tour. Je vais retourner ici et vérifier ça. Je vais dire que la liste de tableau de bord de l'équipe était juste dire image. Je suis G et maintenant avec va être 100 pour cent. Tu vois ça ? Retournons à l'intérieur. Ici se réfère à la page Et là vous allez. Ce qu'on a fait en ce moment est un truc. D' accord ? Même si nous avons dit que les hauteurs maximales pour être 200 pixels avec aussi dit, Hey, CS dit peu importe ce qui a affiché le plein avec hors de l'image, donc sont tels CSS doit maintenant penser à un moyen comment il peut afficher l'image complète tout en gardant l' image à la hauteur maximale de 200 pixels. CSS est incroyable, mais en ce moment, vous pouvez voir c'est ce que nous avons obtenu si atypique astuce que les gens utilisent toujours les développeurs généralement. Lorsque vous définissez la hauteur maximale, trois images vont toujours avec 100% et la plupart du temps, vous obtiendrez de bons résultats. Ok, revenons ici. Voyons ce qu'il faut faire d'autre ici pour voir. En ce moment, les détecteurs sont alignés sur le centre. La position est une sorte de lumière d'environ 300 en termes de poids. Et c'est aussi une ligne vers le centre. Mais c'est en italique, non ? Donc on va essayer de faire quelques changements ici. Retournons ici et faisons ça. Le premier que nous allons traiter serait le nom de l'équipe, le nom T. Ouvrons nos accolades de qualité. Et, euh OK, donc j'ai un texto à la ligne une ligne qui va être le centre. Ok, genre, faisons exactement la même chose pour la position de l'équipe aussi. Appelez ça des accolades. Envoyez cette ligne au centre et rappelez-vous, auriez-vous un poids avant ? Parce que c'est une sorte de lumières. Je vais lui donner 300 et le style amusant aussi. C' est le style de téléphone ? Alec et nous allons également changer la taille du téléphone. J' ai cette taille de 15 pixels ici, et je pense que ça devrait aller. Allons de l'avant et sauvegardons ceci et voyons ce que nous avons. Retour ici étaient d'abord une page et, euh, ok, il nous manque encore quelques choses. Par exemple, il y a un peu de marge entre les images et les titres, ainsi que les noms des employés. Comme vous pouvez le voir, c' est ça. C' est un peu de marge, en fait. Donc nous devons faire quelque chose ici et retourner ici. Ajoutons le nom de l'étudiant de marge. Tout d'abord, donc la marge ici va être de 17 pixels zéro et ensuite avoir 10 pixels. Et puis voyons pour la position que j'ai Ma Jin réglé sur 10 pixels et zéro. Non Qué. Voyons voir celui-là. Retournons ici. Rafraîchissons la page et OK, donc la dernière chose que nous devons faire maintenant serait d'ajouter l'image d'arrière-plan, mais aussi des notes est que les Alliés ont un rayon de frontière. Oh, j'ai failli manquer ça. Donc, c'est rapidement réparé un. Ah, où nous Tim Least l i Ah, Buddha Radius, et je vais lui donner trois pixels. En fait, prenons cinq pixels. Les choses un peu plus que trois. Ce bon cinq pixels sauver la tête de retour ici frais. Ok, c'est plus comme ça. Bon, allons-y tout simplement maintenant et avaient l'image de fond, donc ils devraient être assez simples. On va aller à l'endroit où on avait, comme, les services, par exemple. Donc tous ceux qui attrapent ça, copions ça. Venez ici et nous avons de l'équipe. Et j'allais aller de l'avant et simplement coller ça, puis changer de service en équipe. C' était une équipe qu'on équipe toujours, et je me souviens, accord, j'ai une équipe. Et donc c'est juste l'équipe. Ok, donc ça va être l'image de fond de l'équipe. Et je sais que l'image elle-même devrait être l'équipe O J. P. G. Permettez-moi de le confirmer. Retournons ici. Ah, l' arrière-plan. Oui, c'est l'équipe que J p. G. donc je pense qu'on devrait aller bien. Allons-y maintenant et sauvegardons ça. Retournons à un Boza, rafraîchissez la page et voilà. Voilà, tu y vas. J' espère que ce n'était pas trop compliqué pour toi. Et j'espère que vous avez été en mesure de construire votre section d'équipe intermédiaire aussi. Alors c'est tout. Merci beaucoup de m'avoir rejoint dans cette vidéo. Allemagne, le prochain disponible. Maintenant, allez-y et crée la section des témoignages. 57. Débat: Eh bien, les retours. Et si votre vidéo est créée avec succès, le mythe que même section maintenant, il est temps de créer la section de témoignage. Mais avant de le faire, je veux vous présenter ce défi. Ok, je veux que vous fassiez de votre mieux pour aller de l'avant et créer la section des témoignages tout seul. Je vais vous donner quelques indices. Maintenant, la structure pour cela, la section séminale est un peu différente de ce que nous avons eu dans le passé. Nous n'avons pas plusieurs colonnes ici, c'est juste une seule colonne. Mais nous avons pour Rose. Donc, parce que ce n'est qu'une colonne, nous ne pouvons pas utiliser la structure des colonnes comme nous l'avons fait avec la section Acheter un livre avec une section ou même la section à propos des États-Unis. Nous ne pouvons pas utiliser le point appelé Dash, errer, Stewart ou Dash 1-4 par exemple. Nous pouvons utiliser que nous pouvons également utiliser flex le flex d'affichage, soit parce que oui, même si nous avons quatre lignes et techniquement, nous pourrions utiliser le Flex affiché leur flex d'affichage. Au contraire, ce ne sera pas vraiment la meilleure approche parce que nous n'avons pas plusieurs colonnes. C' est juste une colonne avec pour Rose. Donc la meilleure façon, la façon la plus facile de ce jeu. Ce sera avec l'utilisation hors Debs. Donc c'est tout ce que je vais dire dans leurs stratégies utilisées qui donne pour afficher vos témoignages. Oubliez les codes qui sont appelés géreront cela un peu plus tard. Et si vous pouvez essayer de penser à une façon dont vous pouvez flotter, je vous donne juste l'indice de jour comment vous pouvez couler à la deuxième et la quatrième. Témoignages. Si vous pouvez comprendre comment les flotter à la lumière, doute serait fantastique. Alors pensez à la pensée de Dave sur les cours et essayez aussi de faire un peu de style dans. Essayez de comprendre comment vous pouvez ajouter la couleur de fond blanc pour les principaux Dave qui contiendra le témoignage ainsi que le nom ainsi que le site Web de la personne fournissant le témoignage. Prenez note des salaires à la frontière ainsi, et amusez-vous. Vas-y, fais de ton mieux pour montrer ce témoignage, les allergies et celui de Dave et, euh, c'est bonne chance. Je ne vous verrai jamais prochaine vidéo où je vais maintenant aller de l'avant et créer la section témoignage 58. Créer la section des témoins: Ok, donc j'espère que vous avez essayé de créer la section des témoignages toute seule. Si vous l'avez fait, si vous avez fait une tentative, Félicitations. Si vous n'étiez pas bien, faites-le moi savoir. Vous montrer comment créer la section Témoignage. Donc, comme je l'ai dit dans la vidéo des gens, nous ne pouvons pas utiliser les drapeaux d'affichage ou la structure des colonnes. Alors, où va-t-il utiliser des dibs pour cela ? Bon, donc on va en avoir un, Dave, qui tiendra tous les hommes. Et Dave est le deuxième jour de testament essentiellement affiché cet Emmanuel tandis que l'autre Dave affichera le nom ainsi que le site Web de la personne qui a donné le témoignage particulier . Et sur une note de côté, si vous reconnaissez ces noms, eh bien, envoyez-moi un message, accord ? Dis-moi juste. Eh bien, vous savez, travers ces gens de ces personnages fictifs et que nous pouvons discuter à ce sujet , bien sûr, vous savez. C' est tout ce que je dirai à ce sujet. Allons sur les parenthèses. Donc, ce que j'ai fait comme d'habitude, bien sûr, est de créer une nouvelle section pour le test gagné Il et j'ai ajouté l'idée pour les témoignages ont ajouté une classe Une classe très spéciale de tableau de bord gris bgl avant l'arrière-plan d'un fond spécial. Donc, je ne sais pas. On a déjà ajouté le jour habituel de la classe des contenus H deux pour le titre des témoignages , et c'est à peu près tout. Ok, alors maintenant comment va-t-on montrer nos témoignages ? Eh bien, je vais créer un nouveau Dev l'écrire et donnons juste qui a fait le rôle hors classe. Ok, donc ce sera le principal Dave qui tiendra les autres bêtes. Alors maintenant essayons d'ajouter l'autre jour de maintenant que nous détenons les témoignages réels eux-mêmes. Donc ça va être égal à la classe div et maintenant témoignage. Donc ça va aimer le Div parent. Donc maintenant, pour le jour qui va afficher le manteau lui-même, donc la classe Def est, euh , manteau. Ok, alors faisons-le. Je vais aller de l'avant et prendre le manteau de M. Hans Gruber. Copions ça ici. Copions ça. C' était la tête de retour vers les parenthèses. Expliquons ça. Et ah, je fais juste ces deux lignes. Allons-y maintenant et fermons ça, Dev. Ok, donc c'est le jour où le manteau ne laisse pas ajouter un autre jour. ce moment, Full. L' auteur. C' est un jour de cours ici va être égal à ah auteur. Et dans ce cas, son nom est mains Gruber et son Dawn asiatique. Euh, calme. Allons-y et fermons ça, Dev. Et c'est tout. Donc je vais aller de l'avant et fermer le jour principal de l'attente. Les témoignages ont été fermés un. Ah, veillons à ce que ce soit en retrait violet E Ok. Et puis nous fermerons la route. Dave lui-même. Attendez une seconde. Laisse-moi juste m'assurer que c'est en retrait. Probablement Def, Def. Ok, donc cet appareil pour la ligne et ensuite celui-ci est pour le contenu. Et, euh, laissez-moi. Je ne me confond pas ici, ok ? Tellement heureux Dave. Juste ici pour le contenu. Dave. Classe pour Vaux, il semble que nous ayons un Dev Islamique supplémentaire enlevé ce Dave. Ok, alors voyons, nous n'avons pas fermé la journée pour le témoignage. Ok, assurez-vous juste que ce soit des corrects et un def de plus. D' accord ? Ce sont les types de problèmes auxquels vous faites face lorsque vous construisez avec CSS. C' est un peu ennuyeux, mais c'est ce que c'est. Laisse-moi juste m'assurer que c'est correct contre Dave. Dave, ils sont là. Je suis juste à l'espace, Def. Et puis ce Dave ici. Poussons ça ici et ok, Allez-y et sauvegardez ça. Retournons à un navigateur. Eh bien, d'abord la page et vous y allez. OK, donc nous avons le premier jour de cela a été affiché. Je vais aller de l'avant et ajouter les vies restantes pour Hannibal Lecter, misérable militaire. Et Michael Myers. Bienvenue de retour. Donc offensé les témoignages restants pour Hannibal Lecter, Mildred Veteran et Michael Myers. Et c'est ce que j'ai maintenant. Et j'ai rafraîchi la page. Vous pouvez voir mes témoignages et cela là-bas, mais nous devons maintenant y ajouter un peu de style. Jetons un coup d'oeil à ce que nous avons ici. Vous pouvez voir qu'ils ont un peu de rembourrage, quelques marges aussi. Ils ont un fond blanc. Il y a aussi une frontière Ovidius pour les témoignages. Alors faisons ça. Je vais retourner ici. Je vais passer sur deux Main ce CSS et faisons ça. Je vais attraper les membres de l'équipe. Laisse-moi essayer encore une fois. Je vais venir ici, coller ça et on va changer le nom des membres de l'équipe pour tester plus. Neil teste plus de cris au genou. Ok, alors allons-y maintenant et en première classe, ce qui va être un témoignage. Ouais, d' accord. Et, euh, accord, alors ajoutons tout d'abord, une taille de téléphone, qui serait de 17 pixels. Ajoutons maintenant la couleur de fond, qui va être blanche. D' accord. Et puis nous allons aussi ajouter la bordure parce qu'ils ont évité nous va à un pixel. Ah, solide. Et je sais que la couleur ici va être plus facile. E zéro zéro facile zéro. Ok, il y a aussi une frontière d'idées. N' oublie pas celui-là. Et le sang de celui-ci est ici va être de 10 pixels. Et, euh, c'est tout. D' accord, laisse-moi aller de l'avant et gardons ça et voyons ce que nous avons maintenant ta tête ici et chaque première page et là tu y vas. D' accord. Donc, évidemment, nous devons maintenant ajouter un remplissage pour éloigner le texte des frontières. Et aussi ajouter une certaine marge aux témoignages séparés les uns des autres, et aussi vous pourriez remarquer que le avec tous les témoignages sont un peu plus court que le conteneur Regula avec. Nous devrons donc fixer un maximum pour nos témoignages aussi. Donc je vais retourner ici et je vais faire ça. Je vais venir ici. Ajoutons le pad en premier lieu, Donc j'ai un motif ici de 12 pixels, et j'ai une marge de 12 pixels par 20 pixels. Et enfin, nous allons définir quelque chose appelé le Max avec Okay, Max avec ici va être Allons-y avec 800 pixels. Ok, alors sauvegardons ça. jetons pas un coup d'oeil aux nouveaux témoignages, et voilà. Ok, on y arrive. Essayons maintenant de changer le style du texte lui-même. Donc, nous avons la classe auteur flottant dans la lumière, et nous avons aussi le texte avec affronté d'environ 300. Et aussi, euh, le style de police est italique. Allons-y et faisons ces changements. Je vais venir ici. Allons avec test t plus neo et manteaux. Euh, d'accord. Donc, j'ai le poids avant à 300 ont le style amusant italique. Et je vais aussi ajouter une hauteur de ligne d'un point plein. Ce sont les trois que j'ai. Alors allez-y maintenant et ajoutez ce conte en quatre. L' auteur. Alors rappelez-vous, nous flottons l'auteur vers la droite. Alors faisons ça. Je vais abandonner. Je n'ai pas appuyé sur Entrée pour le bracelet de l'université. Fais-le encore. Ok, laisse-moi enlever ce f ici comme retournez à l'intérieur, Tab flotte, et on va flotter ce gars à droite. Et qu'est-ce qu'on a besoin d'ajouter d'autre ? Ok, ajoutons un haut de marge aussi. J' ai cinq pixels et voilà. Bon, allons-y. Maintenant, sauvegardez ça et faisons que ça allait arriver, OK ? Je vais me rafraîchir. Et voilà. Cependant, vous remarqueriez que l'aussi est maintenant en train de briser la structure parce que bien, devinez quoi ? Nous sommes des flotteurs dedans vers le blanc. Donc pour réparer ça pour s'assurer que les éléments flottants restent à l'intérieur de l'immeuble du bureau, ce que nous allons faire, c'est que nous allons venir ici, et nous allons simplement afficher nos témoignages comme dans le bloc de ligne. Impressionnant. Sauvons ça. Et maintenant, si je retourne ici et me rafraîchir. Voilà, tu y vas. Donc, c'est exactement comme ça que vous pouvez résoudre les problèmes flottants quand vous avez affaire à Dave. Si vous flottez l'un des éléments à droite ou à gauche, définissez les parents Dave à afficher comme un bloc extraterrestre et il ne cassera plus la structure. Ok, on y est presque. Cependant, vous remarquerez qu'ici, les deuxième et quatrième témoignages flottent à droite. Alors, comment pouvons-nous obtenir exactement le même résultat ? Eh bien, ça devrait être assez évident à ce stade. Ce que je vais faire, c'est très simplement, nous allons créer une nouvelle classe pour les deuxième et quatrième témoignages. Je vais venir ici et je vais appeler ce cours. Droit ? C' est exactement la même chose ici aussi, non ? Et maintenant, nous allons la tête des pieds derrière une main que CSS. Et ce que je vais faire, c'est que je vais aller jusqu'au sommet où nous avons la section juste à la section de mise en page des autres. Alors, juste ici. Revenons ici maintenant et disons que n'importe quelle classe avec des droits, n'importe quel élément avec la classe blanche, je veux dire Flottons vers la droite. C' est sûr. Celle-là, la tête de retour. Ici fait référence à la page et là vous allez. Donc, nous sommes un congé un Oh, nous devons encore ajouter l'arrière-plan. L' arrière-plan ici est un peu comme une colonne différente. Alors rappelez-vous, nous avons déjà donné la classe à Grey Dash BG. Donc je vais aller ici maintenant et juste là je vais juste dire, ah section point gris Dash BG. Et donnons à cela une couleur de fond de couleur de fond de F o F zéro F. Sauvons celui-là. Retourne à l'intérieur. Ici fait référence à la page et là vous allez. Donc, ils ont laissé le manquant en ce moment est, bien sûr, les symboles de manteau de couleur, qui , bien sûr, nous allons jeter un oeil ah peu plus tard. Mais c'est à peu près comment le construire. La section de quelqu'un d'autre vidéo allemande Avonex. Où va maintenant ajouter nos clients ? Je te verrai alors 59. Créer la section clients: bien revenir bientôt dans la vidéo des gens est ajouté avec succès et stylé sont des témoignages. Mais maintenant, il est temps d'ajouter. La section clients devra ajouter les logos de toutes ces entreprises. Et bien sûr, la section client est une section très, très populaire sur n'importe quel site d'entreprise parce que l'entreprise doit montrer du potentiel sur nouveaux clans avec lesquels, hé, vous savez, nous avons travaillé avec cette conférence avant. Nous avons l'expérience, vous savez, nous étions compétents dans ce que nous faisons. C' est donc toujours une bonne idée de mettre en valeur le portefeuille du clan. Maintenant, je veux que vous passiez un peu de temps à réfléchir à la façon dont nous pouvons afficher ces logos. La section HTML devrait être assez simple. Il faudra créer une nouvelle section, aura le jour de la classe de contenu comme d'habitude, puis nous pouvons utiliser une liste pour afficher les logos. Mais alors pensez à l'aspect CSS de celui-ci. Comment allons-nous afficher ces logos ? Nous avions fait quelque chose de similaire. Nous admettons l'équipe où nous avions deux buts mais dans ce cas aura trois règles à la place. Mais va-t-il y avoir les mêmes drapeaux d'affichage et ainsi de suite et ainsi de suite. Savon, tout comme avec le défi des témoignages représenté à vous si vous voulez passer un peu de temps à transférer, Got comment nous pouvons afficher cette section par présages, mis en pause la vidéo. Allez-y et donnez-lui votre meilleur coup au minimum. Essayez de créer l'aspect HTML. Essayez donc de créer la section des Dave, la classe sur commande ainsi que les moindres éléments pour chacun d'entre eux sont des logos. Mais allons-y et faisons-le. Maintenant, je vais me diriger vers les parenthèses comme d'habitude et passons à l'index point html. Donc ici, allez-y et créez une nouvelle section et d'accord, nous allons obtenir un I D sur les clients, comme avec les ou les sections de clients. Et puis nous allons lui donner la classe hors fond de l'image parce que nous avons le sac sur l'image de deux personnes qui serrent la main. Très bien, alors créons juste un peu d'espace. Et donc nous allons obtenir maintenant et au tout premier jour de classe égale, appelons ce contenu. C' est les mêmes anciennes classes de contenu habituelles. Fermons celui-là, puis ajoutons ici le titre, qui serait l'âge, aussi. Et puis ce sera nos clients. Ok, allons de l'avant à la nouvelle ligne. Et maintenant c'est là que nous allons commencer à ajouter l'UL. Donnons à ça un cours sur notre liste de clients, accord ? Et puis à l'intérieur de cela, vous aurez maintenant le tout premier élément L. I et ensuite à l'intérieur de cet élément de liste. Allons de l'avant et ajoutons le tout premier logo l afin que nous l'utilisions comme lien. Aussi. Donc, un arbre, si égal à égal, utilisera simplement le hashtag représente le lien. Ajoutons la cible égale, puis sur le vide de l'école afin que lorsque les images sont cliquées , il s'ouvre dans un nouvel onglet. Allons-y et fermons ça et maintenant à l'intérieur. Enfin, tous nos huit je vais maintenant avoir la source de l'image égale. Et maintenant, prenons les images pour qu'elles soient à l'intérieur du dossier Assets et ensuite vous verrez des clients. Et puis vous aurez dit notre maison fille P N G. Alors laissez-moi y aller et simplement copier le nom. Copions ça. Retournons vers les parenthèses et frappons à droite. Bon, donc on va simplement dire des actifs et ensuite des images. Et ils diront clients. Et c'est tout. Ensemble de maisons. La PNG. C' est ça, juste là. Fermons ceci et ajoutons le texte Olt aussi. Bon pour S e o appellera ceci dit notre logo maison. Et voilà. Donc maintenant, la seule chose que vous devez le faire juste à côté et montrer que nous avons fermé tout ce que nous avons, les balises A fermer. On a les attaques. Fermer. Donc nous devons fermer. Rul. C' est près de toi. L qui est fermé est fermé une section aussi proche. Et je pense que nous sommes prêts à y aller. Allons-y et sauvegardons ça. Retournons à nos cloches. Ah, étaient d'abord une page et vous y allez. Donc maintenant, nous avons un tout premier logo apparaissant, donc ce sera exactement le même processus encore une fois. Je vais ajouter les nouveaux éléments de la liste pour les logos principaux sont affichés vidéo, et j'étais dans la vidéo une fois que j'ai ajouté tous sur eux. Bienvenue de retour. Comme vous pouvez le voir, j'ai ajouté tous les hommes et logos pour les entreprises restantes donc déjà aller de l'avant pour sauver cela. Revenons à propos de votre Mais j'ai été ah simplement rafraîchi la page. Et voilà. Donc nous avons maintenant tous les logos qui apparaissent. Donc Billy Koweït dans l'aspect HTML, n'est pas vraiment si difficile. À ce stade, vous devriez être à l'aise de créer vos sections, vos Dave et d'utiliser les éléments U L et L I pour afficher les logos. Mais événement allemand oeufs vidéo bien, mais va maintenant jeter un oeil à la façon dont nous pouvons styliser la liste des clients Elsie alors. 60. Styler la section clients: Bienvenue de retour. Tellement nihiliste. Regardez comment affaiblir le style de la section clients. Et comme je l'ai dit précédemment, vous devriez penser à des choses comme les drapeaux d'affichage, peut-être une direction flexible de ligne. Et puis peut-être pour supprimer également les choses de type de style de liste comme ça. Donc c'est très similaire à trop de ne pas ici pour de la viande. Ça semble donc, allons-y et commençons le spectacle. Je vais grandir tout d'abord la partie des services parce que nous allons vous faire donc exactement ce même dire, Cisco pour afficher l'image de fond. Il suffit de copier ceci et nous pouvons l'utiliser pour créer une nouvelle section quatre. Les clients. Je vais changer de service pour les clients. Et puis, bien sûr, ici va changer les services aux clients. Ok, allons-y et sauvegardons ça. Et nous allons juste nous assurer que ça marche si bien. D' abord la page et vous y allez. D' accord. Impressionnant. Donc nous avons dû demander une image montrant. Bien. Commençons maintenant à styliser la classe UL réelle tenant les logos. Et, bien sûr, cette classe est la liste des clients, comme vous pouvez le voir. Donc, c'est là que nous allons commencer à ajouter le flex d'affichage et ainsi de suite. Alors faisons ça. Oh, j'ai oublié de changer de service pour les clients. Faisons vite ça. Les clients. Ok, donc commençons tout de suite avec la liste de tirets de la classe des clients. Et comme je l'ai déjà dit, plusieurs fois, nous allons utiliser l'affichage. Ah, Flex. Et puis nous pouvons également ajouter la direction de flexion. On va aller avec le flux. Ajoutons la prophétie du rap flex et nous appellerons ça aussi notre rap. Et puis parce que le moindre type de style se souvient, nous ne voulons rien de tout ça. Donc, on va juste dire aucun. Et, ah, eh bien, n'a pas de modèles qui pourraient être disponibles dit ça. Zéro. Sauvegardons cette tête sur notre navigateur. Eh bien, d' abord de la page et voilà. OK, bien. Donc maintenant, il commence à prendre forme avec comme ça. Ce que nous devons faire maintenant, bien sûr, serait d'ajouter une couleur de fond pour les logos. Nous pouvons également définir un avec avis ici que nous avons quatre logos sur chaque rangée, donc nous devrions penser à qui, comme peut-être 23% ou 24% bien à avoir à ajouter une marge aussi bien. Vous pouvez voir que nous avons des vidéos de bordure aussi dans le mix. Alors allons-y et ajoutez-les. Retournons ici pour que je crée une nouvelle ligne. Je vais dire les clients listes de tirets et puis l i Et maintenant, nous allons lui donner le avec je n'ai 24%. Faisons une marge. J' en ai un, ah pour cent 00 et puis 1% de la gauche aussi. Ajoutons la couleur de fond et je vais aller avec un RVB une valeur ici. OK, donc ça va être dur d'être un, uh 255 255255 et 1.8. Ok, mais tu n'oublies pas qu'on a un rayon de frontière. Vous avez cinq pixels ? Et, bien sûr, n' oublions pas la bonne vieille taille de la boîte. J' ai acheté une boîte et ah oui, allons sauver ça et voir à quoi ça ressemble maintenant. Rafraîchissez la page et voilà. Donc, ce n'est pas trop mal. Je veux dire, nous avons les logos qui affichent un peu de lumière, mais vous pouvez voir en ce moment que ce n'est pas tout à fait la même chose. Les habitants ici sont parfaitement alignés au centre. Il y a beaucoup de motifs tout autour du logo. Donc, pour y parvenir, il faudra le prendre à l'impôt A eux-mêmes. Parce que rappelez-vous, c'est l'un que je tiens réellement les images. La taxe l A détient une taxe. Mais c'est la taxe A elle-même qui détient les images. Ils veulent cibler les images. C' est bon de cibler la taxe A pour des modèles, des choses comme ça. Alors faisons-le comme si je rentrais ici. Et maintenant, je vais dire, Client Dash. Moins une balise. Et la première chose que nous pouvons faire ici est l'affichage de Legis Forcible comme un bloc en ligne. Ok, et ensuite on peut ajouter un pad et on va faire 20 pixels tout autour. Donnons-lui aussi un avec de 100%. Ah, 100%. N' oublions pas la bonne vieille taille de la boîte, mais ah, boîte et ah, c'est tout. Allons-y maintenant et sauvegardez ceci et vous devriez voir quelques améliorations majeures. Revenons ici, rafraîchissons la page et que vous allez dire, du point de vue de Dexter, les images semblent parfaitement bien. Ils ont l'air aussi bien que ce que nous avons ici. Cependant, j'allais reporter la discussion à ce sujet jusqu'à ce que nous passions à la section réactive du cours. Mais faisons ça. D' accord, mais d'après une expérience, je vais minimiser la fenêtre ici. Et vous pouvez voir que lorsque nous minimisons la longueur de l'avec hors de notre navigateur, vous pouvez voir en ce moment que les locaux regardent pour commencer tête. Cependant, si nous allons à notre vue mortelle, jetez un oeil à cela. Ça a l'air parfait, non ? Donc, si cet ensemble a été vu sur un téléphone mobile, c'est exactement à quoi il ressemblerait. Mais Oz en ce moment ressemblerait à ça. C' est très, très mauvais. Qu' est-ce qui pourrait se passer ici ? C' est là que nous devons maintenant cibler les images elles-mêmes. Donc j'allais le faire plus tard, mais faisons-le maintenant pour forcer nos logos à paraître beaux et réactifs. La première chose que vous devez faire, cependant, cependant, est d'ajouter la propriété de débordement pour une préoccupation de taxi en ce moment que les logos sont en train de sauter à l'extérieur de notre frontière. Alors venons ici et disons simplement débordement et nous pouvons cacher ça. Ok, allons-y. S' il vous plaît, sauvegardez ceci et revenons ici pour rafraîchir. Ok, bien. Maintenant, vous pouvez voir que les logos ne sortent plus de leurs frontières. Cependant, pour que les logos se rétrécissent avec le navigateur de sorte que comme nous minimisons le avec du frère, images aussi rétrécir en conformité devra définir un maximum avec propriété de 100% aux images eux-mêmes. Alors faisons-le comme si j'allais de l'avant ici. Je dirai la liste des clients et une image. Et maintenant c'est là que la magie réactive se produit. Nous allons dire Max avec off 100% fondamentalement ont dit juste continuer à rétrécir la viande que vous rétrécir La largeur des soutiens-gorge sont également rétrécir l'image ainsi. Et puis, pour une bonne mesure, je dirai ce bloc de jeu. Ok, allons-y et gardons la tête ici. Fait référence à Page et oh, ça ne fonctionne pas. Qu' est-ce qui se passe ? Oh, je suis désolé. J' ai mal orthographié client. Ah, mon dieu, excuse-toi. Mais je comprends comme ça quand je suis vraiment, vraiment excité. D' accord, donc c'est la liste des clients qui a sauvé ça. Et de retour ici se réfère à la page et là vous allez. Impressionnant. Impressionnant. Impressionnant. Donc, il ne ressemble pas tout à fait à ce que nous avons ici parce que c'est essentiellement deux colonnes . Alors qu'ici, nous avons encore quatre colonnes. C' est donc quelque chose que nous traiterons beaucoup plus tard une fois que nous aurons atteint l'aspect réactif. Mais pas, comme vous pouvez le voir, que les logos sont toujours conservés à l'intérieur hors de leurs frontières. C' est parce que nous avons dit au Mexique 100% et nous les affichons aussi comme des blocs. Donc c'est à peu près tout pour concevoir la section clients avec les logos. Donc l'Allemagne Vendex vidéo Bill va maintenant aller de l'avant et commencer à ajouter le formulaire de contact US. Je te verrai alors. 61. Créer le formulaire de contact: Bienvenue de retour. Donc on y est presque. Nous avons à peu près créé toutes les sections principales. Mais enfin, nous avons le contact ou la section. Et évidemment, c'est très important parce qu'en tant qu'entreprise, vous voulez que des clients et des clients potentiels vous rejoignent. Donc nous allons nous construire cette forme que vous regardez en ce moment et créer formes est une toute nouvelle bête entièrement quand il s'agit de l'extérieur, parce qu'il y a beaucoup, ah, beaucoup de formes externes. Donc je vais partager exactement comment on peut le construire. Et du point de vue de la conception, vous devriez penser à Ok, nous pourrions avoir, comme un div parent tenir dedans. Peut-être que l'étiquette dans ce cas serait nommée aurait peut-être un autre Dave tenant le champ réel lui-même et des choses comme ça. Mais on en parlera un peu plus tard. Laissez-moi vous montrer ce que j'ai fait ces loin que j'ai vraiment aller de l'avant comme d'habitude pour ajouter la section I D, qui sera contact Les bons vieux jours, bien sûr, de contenu ont ajouté la section titre H deux tags nous contacter et J'ai aussi ajouté l'intro Vous avez quelque chose à nous demander. Vous savez, vous voulez juste dire bonjour plus haut à propos de je donne à cette classe des intrus qui vont faire un peu de voile là-dedans. Bon, maintenant, commençons à construire le formulaire lui-même maintenant pour créer un formulaire avec HTML. Eh bien, nous allons commencer par l'étiquette elle-même appelée mousse. D' accord. Maintenant, le formulaire lui-même a beaucoup de différents types d'attributs que vous pouvez lui appliquer. Le premier je vais appliquer ici mais sera appelé la méthode. Et la valeur pour cela va être post Maintenant, il ya deux types d'algues peuvent adhérer. Vous pouvez aller avec, obtenir ou les poster. Il suffit d'ajouter égale deux ici. D' accord, donc tu peux aller avec get ou post. Je vais suspendre l'explication de ce que ces deux-là sont pour un moment. On en parlera un peu plus tard. Mais c'est là que la plupart des développeurs inexpérimentés ont tendance à vraiment gâcher. Ils vont généralement avec get par opposition à post. Ne vous inquiétez pas. Je vais expliquer exactement ce que ce sont un peu plus tard, mais nous allons juste un rapide pour la méthode égale post, et puis je vais lui donner la classe très simplement sur un formulaire de contact d'alphabétisation. Ok, d'accord. C' est la première étiquette hors du chemin. Nous avons créé le formulaire. Maintenant, ajoutons le rôle de classe Dev off. Parce que si vous regardez le site en ce moment, ce sont essentiellement ceux-là. Donc nous sommes tombés ceux-là et nous aimons un peu à Dave dans son rôle. Donc, une étiquette de maintien diable et d'autres différents tiennent le champ d'impute et ainsi de suite. Donc nous allons utiliser la classe d'Ole. Ok, faisons ça. Hvo Et maintenant à l'intérieur de ça, Dave, au tout premier jour qui tiendra l'étiquette pour qu'ils aient des égaux de classe. Appelons cette colonne de Lee Bill, gros, et maintenant, regarde ça. Nous créons des étiquettes maintenant, donc le 1er sera le label, et je vais en dire quatre. C' est fondamentalement juste. Maintenant, nous disons, OK, cette étiquette est pour ce remplissage particulier. Donc, pour le faire correctement, je vais ajouter égal à deux et puis je vais ajouter l'i d pour le champ, ce qui ajoutera un peu plus tard. Mais pour l'instant, il est nom de contact Dash. C' est l'idée des migrants que vous utilisez pour notre nom rempli. Étiquetez donc le nom de quatre contacts. Et maintenant, je vais taper un nom. Ajoutons un deux-points et fermons l'étiquette. Ok, fermons aussi le jour de. Impressionnant. Maintenant, créons un autre jour pour le champ d'entrée réel lui-même. Alors regarde ça. Je vais dire que la classe de div est égale et qu'on peut appeler ce champ de charbon hollandais. Ok, Maintenant, regarde ça au lieu de l'étiquette. Ça va maintenant être imputé. Et maintenant le i. D. Quelle est l'identification de ce particulier rempli est le nom, non ? Donc ça va être égal à contacter le nom du tiret. Assurez-vous toujours que la valeur complète de l'étiquette et les valeurs i d d'entrée sont les mêmes. Donc nous avons le nom du contact. Contactez-le ici. Maintenant, quand il s'agit des autres attributs pour l'entrée, il y en a beaucoup, beaucoup, beaucoup hors d'eux. Ils sont probablement entre 15 et 20 d'entre eux. Évidemment, je ne peux pas couvrir chacun d'entre eux, donc je vais juste vous montrer le plus important et le plus populaire. En fait, c'est pour le carburant imputé. Donc, le 1er 1 ici nous avons ajouté l'idéal. C' est à un cours pour qu'on puisse faire un peu de stand. Ok, donc cette classe sera utilisée tout au long. Laissez-nous le champ. Ok, maintenant, le calme est le type est égal au texte. Cela montre fondamentalement, ou il indique le type off rempli. C' est Sommes-nous en attente d'un texte simple ? Est-ce qu'on attend un e-mail ? On s'attend à des chiffres ? Des choses comme ça. C' est donc très, très important. Et je te montrerai un peu plus tard. Pourquoi ? C' est extrêmement important. Donc, tapez égal au texte. Et maintenant, ajoutons le maintien de la police. Alors s'il vous plaît tendez et nous pouvons dire égaux. Et puis en manteaux. Disons ton nom, d' accord ? Et enfin, nous voulons rendre ce champ obligatoire. Vous ne trouverez jamais de contact sur Internet où il n'est pas nécessaire de fournir votre nom . C' est toujours nécessaire la plupart du temps, au moins. Donc, pour ce faire, je vais juste enregistrer me calme. C' est tout ce que nous avons besoin d'ajouter nécessaire. D' accord. Oh, certains. Allons-y maintenant et fermons simplement ça, Dev. Et puis je vais aussi fermer le Dev pour le vote. Fermons ça. D' accord ? Et n'oublions pas de fermer le formulaire aussi, et là vous allez. D' accord ? Allons-y maintenant et sauvegardez cela, mais à l'avance, revenez au navigateur. Et nous allons voir ce que nous avons fait référence à Page et voilà que vous allez. Bon, donc nous avons le premier nom de l'étiquette et ensuite le champ. Ton nom. Donc ce que je vais faire maintenant, c'est, comme d'habitude, je vais mettre la vidéo en pause et ajouter les champs restants et les étiquettes sur l'autisme. Une fois que j'ai fini, , reviens. Et, comme vous pouvez le voir en ce moment ont ajouté les remplissages restants. Nous avons donc le rempli pour l'e-mail de contact que nous avons pour le titre hors du message. Et puis ici, nous avons aussi la zone de texte eux. Le message. Lindell's Allez-y, sauvegardez ça et voyons à quoi ça ressemble maintenant. Rafraîchissons. Et voilà. C' est en gros comme ça que ça ressemble en ce moment. Laisse-moi te montrer tout le code. J' ai ajouté. C' est à peu près exactement la même chose qu'avec le champ de nom. Donc nous avons un autre bas ici. Nous avons le contact, e-mail, la classe de champ, l'idée de contact email, ce type ici, s'il vous plaît. Pip. Une attention particulière à la saisie ici a été définie sur l'e-mail. C' est très important parce que vérifiez cet avocat. Si je retourne ici et là, disons que j'essaie de remplir quelques absurdités ici et je frappe. Soumettre. Tu vois, en ce moment, ça reste. La police inclut un symbole à dans l'adresse e-mail. C' est parce que nous avons indiqué ici que le type a été assis e-mail si je suis venu ici en ce moment et je change cela en texte à la place, je sauvegarde. Je retourne ici. Rafraîchissons simplement la page. Alors je viens ici, j'enregistre encore des absurdités. Maintenant, quand j'appuie sur soumettre, il se soumet essentiellement. Vous pouvez dire que nous n'avons reçu aucun message nous disant qu'ils sont là. Vous savez qu'il y a un problème avec votre adresse e-mail. S' il vous plaît ajouter le symbole at. C' est parce que CSS ou chaque équipe d'autres à ce stade ne s'attend pas à un genre d'e-mail imputé, attendant simplement des textes. Donc, c'est ce qui est très, très important chaque fois que vous quittez vos champs de messagerie et a montré qu'il tapez ici est réglé sur e-mail afin qu'il se bat très silicium qu'en effet la personne a ajouté une adresse e-mail dans le champ tout droit donc en bas vous c'est exactement la même chose ici pour le titre de contact, le type que j'ai gardé vide. Comme un titre peut contenir des nombres, il peut également contenir du texte Il est donc préférable de laisser ce champ vide et de ne rien y ajouter. Cependant, notez une différence majeure pour le message pour la zone de texte, nous n'avons pas utilisé impute. Au lieu de cela, nous avons utilisé Text Avia, donc c'est un type différent de sensation qu'ils peuvent créer avec chaque temple. Les formes sont beaucoup d'entre elles. Donc, chaque fois que vous essayez de créer votre zone de message, toujours utilisé zone de texte et puis ici avis, je l'ai dit égal à cinq. Cela indique essentiellement à quel point le champ va être le vide il en ce moment, et je change cinq pour, disons, 10 par exemple. Maintenant, ça va le rendre beaucoup plus grand. Alors regarde la taille en ce moment. Si je me rafraîchis maintenant, vous pouvez le voir beaucoup plus grand. Mais ce n'est pas souvent ça, monsieur, parce que vous pouvez toujours cliquer et faire glisser. Ah, en utilisant la souris ici pour que vous puissiez y vivre environ cinq. Tu n'as pas vraiment besoin d'aller plus grand que ça, et c'est à peu près tout. Maintenant, ici, nous avons une classe d'entrée spéciale pour le bouton de soumission, et si vous faites attention, avons réellement aller de l'avant pour ajouter les classes pour Button et Green. Rappelez-vous cela pour les mêmes classes ont été utilisées pour le style en bas à droite apparaître pour le get dans la torche. Donc, c'est exactement le même style. Et c'est pourquoi j'ai simplement ajouté notre bouton et vert pour cela. Et bien sûr, on nous a laissé une pièce. Un étalon ici. Retournons juste ici. Et, euh, c'est à peu près tout. Donc, le type ici a été défini pour soumettre une houle. C' est pour ça que tu as ça de la viande, Tex India. Et c'est à peu près tout pour construire le formulaire HTML. Donc Avonex allemand très bien ne va pas de l'avant et commencer à styliser le formulaire de contact 62. Styler le formulaire de contact partie 1: retour dans la vidéo précédente est créé avec succès les champs pour notre formulaire de contact . Mais maintenant, nous devons faire un peu de style de céréales dans. Maintenant, avant de sauter dans leur avis ici que j'ai envoyé comme texte réel et ne pas soumettre ici. Donc, mitt est la valeur par défaut que vous êtes mais noble ont toujours. Cependant, si vous voulez modifier le texte tout vous et introduit pour revenir ici où vous avez le bouton ALS classique d'entrée vert et puis types de viande ou vous pouvez faire ici est simplement fournir quelque chose connu comme le cas de valeur contre l'utilisation valeur égale et puis juste dans le capital comme envoyer Enregistrer ceci, Revenons en arrière. Ici fait référence à la page et là vous allez. Donc maintenant, il est envoyé. C' est ainsi que vous pouvez personnaliser le texte de votre bouton. Jetons un coup d'oeil à ce style que nous devons faire. Et ici en ce moment, vous pouvez voir qu'il semble y avoir une sorte de max avec pour le formulaire de contact. Tout est aligné au centre aussi. Alors faisons ça, je vais reculer deux crochets. Maintenant, rappelez-vous, nous avons donné la classe de formulaire hors formulaire de contact. Alors faisons ça. Je vais aller de l'avant, prendre des SMS et venir ici, coller ça et on changera de client pour contacter. Et alors on va se fissurer. La classe va être forme. Je suis désolé. Contact. Forme néerlandaise. Ouvrons les accolades de nos collègues. Donc on va fournir un maximum avec, et ça va être 680. Les pixels s'appliqueront également. Donc, la marge pour essayer de l'amener au centre pour qu'ils puissent aller. C' est un Teddy pixels de la voiture supérieure. Donc, cela va maintenant centraliser l'ancien assistant au milieu. Et nous allons ajouter en Mars de 20 pixels pour le bas et, comme toujours, taille du livre dans. Je vais aller avec nos billets de frontière. Ok, allons-y maintenant et gardons ça. Retournons vers lui. Mais j'étais ah. Fait référence à la page. Et voilà. D' accord. D' accord. On y arrive. Donc maintenant, c'est un peu comme un lion d'un autre centre, mais nous devons étirer les champs, les rendre un peu plus longs, et aussi ajouter beaucoup de motifs. Donc, avec la structure en ce moment, essentiellement avec une classe hors du tableau de bord libéral, appeler et remplir le charbon de tableau de bord, ils auront beaucoup des mêmes propriétés et exactement les mêmes valeurs. Alors faisons ça. D' accord ? Je vais créer une nouvelle déclaration ici. Appelons donc ce charbon d'étiquette point et puis virgule afin que nous puissions ensuite ajouter l'autre, qui est le charbon de tiret de champ. Ouvrons les accolades de nos collègues. Donc la première que je vais faire ici, c'est ça. Ajoutons quelques marges. Non, il Donc je n'ai 1% zéro, puis 1% et puis un autre 1%. Ok, ajoutons un motif aussi. J' ai donc cinq pixels tout autour. Je pense que ça devrait être bien. Allons-y. Certains livres de taille dans la zone de bordure et moins, mais pas les listes allaient faire un peu flotter, alors nous allons les flotter vers la gauche. Ok, mais maintenant c'est là que les choses deviennent intéressantes, vous savez, pour les avoir sur la même ligne, il faudra les mettre avec eux. Et, bien sûr, commençons par le tiret de l'étiquette. Cool. Maintenant les étiquettes elles-mêmes, elles ne sont pas si longues ? Voyons voir. Donc les étiquettes ici peuvent être comme, disons, 25%. Peut-être, et puis le réel se sent être plus comme, disons, 70% ou quelque chose comme ça. Alors revenons ici si niveau. Mais le charbon aura un avec off. Allons-y 25 %. Ok pendant que j'ai Lay Bill, je suis désolé, pas l'étiquette, mais le champ. Dash Coal va maintenant avoir un avec nous ne allons pas aller avec le centre 5% parce que nous voulons un peu espace. Alors allons avec, disons, disons, 72% à la place. D' accord ? Et, ah, allons de l'avant et sauvegardons ça et voyons comment ça va ressembler Revenons ici. Étaient d'abord une page et là vous allez. D' accord. Ok, très bien. Maintenant, vous pouvez le voir maintenant sur la même ligne parce que nous les avons donnés avec, et nous les avons également flottés vers la gauche aussi. Ok, Maintenant, allons de l'avant et commençons à concevoir les étiquettes réelles elles-mêmes et aussi le champ. Donc ce que j'ai ici, c'est que nous allons voir, c'est un peu grand. Jetons un coup d'oeil à ce que nous avons. Il est un peu grand poids avant de peut-être 300 couleur et ensuite remarqué quelque chose de très, très intéressant lorsque nous survolons sont souris sur l'étiquette. Vous voyez comment il se tourne maintenant vers la main avec le doigt pointant vers le haut, mais assez pour faire quelque chose comme ça ? Parce qu' en ce moment, on ne comprend pas ça. Donc je vais vous présenter un nouveau genre de propriété. Alors faisons ça. Je vais retourner ici. Donc, tout d'abord, ciblons l'étiquette elle-même. D' accord ? La balise d'étiquette. Alors regarde ça. Je vais ajouter une taille formée. Je vais y aller avec 18 pixels. Un poids avant de 300. Ah, ajoutons une couleur de 555555 Et maintenant, jetez un oeil à cette propriété appelée le curseur. Ok, C'est ainsi que nous pouvons changer le symbole de apparaît quand nous survolons sur l'étiquette elle-même. Donc, la valeur ici va être pointeur. D' accord, c'est le volume par jour. Alors allons-y. Enregistrez ceci et voyons, nous allons rafraîchir. Et maintenant je peux, tu sais. Donc, lorsque nous survolons maintenant sur l'étiquette, le symbole passe de la flèche à la main. C' est donc exactement comme ça que vous pouvez utiliser la propriété cruciale et la valeur hors point. OK, donc c'est tout pour l'étiquette. Regardons le sentiment. Oui, les carburants ont. Voyons voir. Ah, un peu comme une taille de téléphone qui tape quelque chose à l'intérieur. Ok, si une taille culo avec nous, eh bien, nous devrons nous contenter de, disons, un 100% ajouter comme un rayon de frontière. Ajoutez aussi quelques bordures. Ok, faisons ça. Je vais retourner ici et jeter un oeil à ce qu'on va faire. Ajoutons la classe de champ, parce que rappelez-vous, nous utilisons le champ hors classe pour tout le champ de classe imputé et C ici, champ rempli et ainsi de suite. Alors revenons ici. Retournons à Minden CSS. Et faisons ça. Ok, le premier que nous allons faire serait d'ajouter une taille de téléphone et pour la taille amusante que je vais aller avec, disons, 17 pixels à la place. La même couleur. Reste avec le 555555 Nous allons ajouter un rembourrage ici de 10 pixels et 12 pixels ainsi, et nous avons une bordure et le corps va être un pixel va être solide. Et puis l'appelant va être de de de de de de ha 60. Nous avons un rayon de bordure de trois pixels. Et n'oublions pas la bonne taille de vieux livres dans laquelle va être la boîte de bordure. Ok, je veux d'abord jeter un coup d'oeil et voir ce que nous avons. Sauvons ça. Retournons ici. Étaient frais et OK, donc en ce moment, vous pouvez voir que les champs ne vont toujours pas plein avec donc très simplement va ajouter avec off 100%. Donc ce droit, ça devrait faire l'affaire. Allons-y, sauvegardez ce gamin ici. Actualiser. Et voilà. Donc, dans d'autres domaines vont plein avec génial. Maintenant, nous allons juste styliser l'espace réservé considéré ici a son poids avant de 300. Il est n style talic et la couleur ressemble à un c C. Donc faisons ça très, très rapidement que la tête de retour ici nous allons le faire c'est juste très simplement va taper champ. OK, mais maintenant je vais ajouter le pseudo élément à nouveau. Et cette fois, il va maintenant être un espace réservé. C' est comme ça que nous pouvons prendre le détenteur de la place dans nos sentiments. Alors ouvrez les accolades de couleur et juste très simplement, ajoutez la vague avant de 300. La couleur ici va être si, si, si, si, si, si, si, si. Et moins banal, c'est que nous avons le style des fonds mis en italique. Ok, en sécurité. Retournons ici pour une page. Et voilà. Génial. Donc allemand Avonex vidéo caution va maintenant continuer à stylisé et en fait, finition stylisée dans le formulaire de contact. Je te verrai alors. 63. Styilng le formulaire de contact partie 2: bienvenue. Finissons le style dans notre formulaire de contact, nous devons faire quelques changements au bouton d'envoi parce que juste ici remarque qu'il a, comme, une belle radios frontière, mais aussi et nous espérons plus sur elle remarque que le sac sur Calo genre de changements autour de là. Nous avons, comme, une ombre buck au beurre de couleur change aussi toujours si légèrement. Nous allons donc apporter quelques modifications au bouton d'envoi. Et bien sûr, le texte intra doit également être des alliés de style. Alors faisons ça. On va retourner ici maintenant. Ici, un autre style de deux, le bouton pour notre formulaire. Je vais y ajouter une classe unique. Bon, donc je vais commenter tout de suite et où nous avons biblique comme fond vert. Je vais ajouter submit en tant que classe supplémentaire pour le séparer des autres boutons. OK, alors sauvegardons ça. Revenons ici maintenant et commençons à styliser les boutons. Donc je vais aller avec le bouton, ne soumettez pas. Ouvrons. Bon vieux accolades Kohli et j'ai avec moi juste ici avec des ensembles à auto, nous avons des marges que zéro aussi bien. Et on va aussi ajouter le curseur. On va y arriver, pointeur. D' accord ? Et puis un refroidisseur de bordure. Et j'ai développé avec Bada Koloa ici ensembles à sept b neuf et puis un 00 Et c' est tout. Ok, faisons vite les effets de vol stationnaire aussi. Donc, bouton qui soumettent. Et maintenant, quand nous survolons dessus, faisons quelques changements. Allons ici et on va changer. Tout d'abord, la frontière Coehlo. Ok, en fait, devine quoi ? Nous allons rester avec la même couleur mais allons appliquer une transition. Alors restons avec le Barnacle de 7 B A 900 Ok, livres, livres, Shadow. On va dire ça à personne. Donc, pas d'ombres de livres pour cela. Et maintenant, c'est là que nous allons faire le changement réel. Couleur d'arrière-plan. Nous allons changer l'arrière-plan. Coehlo à un d. D 247 Ok, ok , allons-y et sauvegardons ça. Et voyons juste les nouveaux effets en action. Rafraîchissons et OK, sorte que vous pouvez voir juste là que lorsque nous survolons, cela fait un changement. Cependant, remarquez, bien sûr, la transition C'est beaucoup plus lisse que nous avons actuellement ici. C' est juste instantané. Alors ajoutons la transition. Ok, je vais jouer la transition directement au cours de soumission. Donc, ici va juste dire transition. J' ai fait la transition vers la couleur de fond, et ça va prendre 0,2 seconde et on va juste s'en sortir. Ok, allons-y. Sauvegardez ça. Retournons ici. Fait référence à Page et là vous allez. C' est beaucoup mieux que ce que nous avions au départ. D' accord. D' accord. Donc, la dernière fois que vous le faites maintenant serait juste de styliser le texte d'introduction. Alors faisons ça. Je vais retourner ici. Allons jusqu'au sommet parce que c'est la classe AP de cela juste ici. On peut faire l'intro p dot. Ouvrons notre collègue accolades et OK, donc la taille du téléphone. J' ai eu une taille amusante sur 19 pixels ici, avoir un poids avant. 0 500 et puis une couleur de 777777 Et un alignement de texte à puces est aussi au centre. Et enfin, nous avons les marges. Nous allons un jeu Certaines marges et un donc j'ai sont 35 pixels, 14 pixels, puis 14 pixels. Ok, sauvegardons ça. Retournons ici. Rafraîchissons la page. Et voilà. Impressionnant. Impressionnant. Impressionnant. Donc c'est à peu près nous stylisant le formulaire de contact hors formulaire maintenant en conclusion, nous n'avons pas encore fait le formulaire réellement actif parce que maintenant tel qu'il est, si quelqu'un vient ici et remplit le formulaire et le hit send, rien ne va se passer. Donc, pour que nous puissions réellement rendre le premier actif afin que nous recevions le contenu de l'ancien par e-mail, nous devrons ajouter du code supplémentaire. Mais ce sera le code P. H. H. P va jeter un oeil à cela un peu plus tard et le coût de s'inquiéter. Je n'ai pas oublié ça. J' ai également mentionné que nous avons les deux types de méthodes de formulaire post et get. On en parlera un peu plus tard aussi. Mais je veux aussi profiter de cette occasion pour vous inviter à jeter un oeil aux tutoriels de formulaires HTML sur les écoles publiques afin que vous puissiez en prêter plus sur les types de commandes hors de nos champs d'impute . Par exemple, nous avons seulement regardé le champ e-mail, le champ de texte, un texte jamais rempli. Mais vous avez également accès à, comme la radio remplie, par exemple, où la personne devra choisir entre. Cela devrait en fait choisir une seule option parmi un ensemble d'options différentes. Donc, par exemple, ici, vous savez quel genre de genre êtes-vous ? Miller Femelle. Vous pouvez utiliser la vidéo de Poutine pour ça. Vous avez accès à deux autres types hors attributs, dont nous parlerons un peu plus tard, en particulier l'action. Nous allons monter l'action beaucoup plus tard, mais ici, mais ici, où vous avez des éléments de formulaire HTML comme je l'ai dit, nous avons utilisé l'élément d'entrée, l'élément select. Mais vous avez également accès à plusieurs sélections ainsi que des textes dont nous avons parlé. Vous avez accès aux éléments de bouton que nous avons utilisés, mais dans le vôtre sont le carburant, ladite liste de données de légende Certains d'entre eux, vous n'avez peut-être pas besoin de les utiliser en tant que tels, mais c'est toujours une bonne idée de vous familiariser avec tous ces différents types hors types d'impute. Donc oui, l'image que vous avez mot de passe, recherche, et ainsi de suite et ainsi de suite afin que je puisse vous garantir que peu importe la complexité de votre tentative de créer, vous trouverez l'impudence nécessaire et les attributs et les éléments avec HTML. Donc, je vais vous inviter à vouloir. Ils vont passer du temps et juste la famille s'élever. Il est plus hors de ces types d'imputes disponibles ainsi que des éléments. Alors c'est tout. Nous avons fini à peu près terminé le ou l'ensemble du site Web. Il reste juste la nourriture que nous avons besoin de créer. Donc, nous allons le faire dans la toute prochaine vidéo. Je te verrai alors. 64. Créer le pied de: bienvenue et nous en sommes arrivés à la dernière section. Nous devrons construire le FOTA pour le site Web. Jetons un coup d'oeil à ce que nous avons. Nous avons ce qui ressemble à deux menus différents. Celui sur la gauche a des liens deux autres pages ou côtés externes, puis celui vers le blanc a les icônes des médias sociaux. Et puis ci-dessous, nous avons tous les droits réservés texte. Ok, alors continuons et commençons à construire la structure. J' ai déjà ajouté l'étiquette de pied. Donc, de la même manière que vous utilisiez la tête un tag tout le chemin vers le haut pour votre tête. Vous utiliseriez également pied de page pour la section de pied, évité la classe de contenu, puis aussi large. Rappelez-vous, nous avons utilisé une classe de blanc également dans notre en-tête pour le logo et pour le menu principal. J' ai donc appliqué exactement la même classe ici aussi juste pour rendre le continent un peu plus large que l'Occident de notre page. Alors faisons ça. Je vais ajouter le tout premier Dave ici, qui serait le rôle hors classe OK, et maintenant faisons ça. D' accord. Je vais créer le SIDA la première classe, et ce sera pour la liste U L jusqu'à présent forcée va être ul classe égale. Appelons celui-ci le pied. Notre menu. D' accord. Et maintenant, ajoutons le premier l. et puis à l'intérieur, nous allons ajouter un tag huit riff égal donc nous n'avons pas vraiment de liens . Persists va juste utiliser le hashtag à un endroit qui, puis nous allons également ajouter les cibles. Les attributs sont égaux et puis ça va être, bien sûr Ah, vide. Et puis continuons maintenant et ajoutons blawg au texte. Ok, alors allons-y. Fermez la balise a. Fermons aussi la balise alliée. Et ah, voilà. DuL non divulgué aussi. Alors voyons juste. Comment ça ressemble ? Allons en sécurité. Oups. Mais sauver la tête Docteur Broza se réfère à l'espoir de page. Désolé. Un mauvais site web. C' est celle-là. Ok, actualisez la page. Allons ici et vous y allez. D' accord. Donc, nous avons blogué maintenant apparaissant bien. Nous pouvons encore faire beaucoup de Stelling, ce que nous allons faire, mais nous allons aussi créer le premier élément de liste pour notre social, beaucoup à droite. Ce qui va être Facebook. OK, alors retournez ici et faisons ça bien. Lendl attrape tout ici. Copions ça. Et puis je vais descendre jusqu'ici. Accédez au rythme, livrez à nouveau. Instantanée. Maintenant, je vais changer le pied un menu. Alors allons avec le menu social, accord ? Et maintenant, ici, c'est exactement la même chose. Mais je vais changer. Je vais ajouter des attributs supplémentaires ici, et ce seront les attributs de titre. Le titre ici sera égal à Facebook. D' accord ? Et on n'aura pas de SMS ici. Fermons ça comme il est. Ne vous inquiétez pas. Vous verrez ce que je ferai un peu plus tard. Alors voyons ton cours un mensonge. Ils l'ont fait et euh Ok, fermons juste le dernier jour d'ici pour le rôle. Sauvons. Retournons ici. Qui d'abord la page Et OK, Je sais que vous pouvez voir le Facebook, mais nous allons utiliser une image pour représenter le lien. Donc ce que je vais faire maintenant, c'est que je vais mettre la vidéo en pause, et j'ajouterai les éléments restants de la liste pour le menu Food Thai et aussi pour le menu social . Bienvenue de retour. Et comme vous pouvez le voir en ce moment, j'ai ajouté les tentatives de liste restantes pour le menu du pied A. Nous avons des événements carrière comme si les politiques accusés et puis pour le menu social ont également ajouté pour Twitter, LinkedIn et dribble. Ok, allons-y. Sauvegardez ça. Retournons ici. Eh bien, d'abord la page et le Hey, vas-y. Impressionnant. Ok, Last but not least, nous avons le 2020 sera impact, tous les droits réservés. Et nous avons le symbole du droit d'auteur là-bas aussi. Alors ajoutons ça. Donc je vais juste faire ça. Voyons voir. Donc juste ici après le U l. Je vais venir ici et ajouter simplement une balise de paragraphe et puis pour ce symbole pour le copyright, c'est le simple juste là. Donc ça va être copié demi-points. Donc, cela va afficher le symbole de copyright pour nous, et puis je vais dire 2020 point d'impact Web et puis il y a juste taper tous les droits réservés , et je pense que c'est tout. Ok, allons-y. Garde cette tête ici. Actualisez la page. Et voilà. Impressionnant. Ainsi, l'Allemagne rednecks Video Web ne commencera pas à coiffer notre nourriture. 65. Styler le pied de: Eh bien, comebacks et la vidéo des gens créé avec succès ou pied de page. Mais maintenant, il est temps de faire un design sérieux, et c'est l'objectif final ici. Voyons ce qu'il faut faire. Nous devons ajouter une couleur de fond pour le pied. Nous devons trouver un moyen de faire flotter le premier menu vers la gauche, puis le second vers la droite. Et il remarque également que le menu éléments les éléments de texte. Le texte ici est tous les majuscules verrouillables. Ils n'ont pas de liste dans le style qu'ils n'ont pas les tripes ou les cercles autour eux. Ce sont des choses que nous devons faire, mais ce n'était pas l'intention. Retournons aux parenthèses et passons à une main que la CIA dit que je vais créer une nouvelle section comme d'habitude pour le pied de page. Allez-y et collez ça, puis je changerai de contact à deux pieds de page. Donc, nous ajoutons notre sac sur la couleur et nous allons cibler l'étiquette de pied parce que c'est l' étiquette principale, sont de tenir tous les éléments dans notre nourriture. Alors revenons aux hommes qui disent évaluer l'émigrant à taper le pied de page Et maintenant, allons de l'avant et ajoutons la toute première opportunité va être la couleur de fond. Et je sais que la valeur ici va être quatre pour 44 pour quatre et ensuite nous avons aussi un collier pour notre texte, qui va être un, puis un Laissez-moi ajouter la balise de hachage. Ok, une autre chose que nous allons ajouter sera la taille amusante. Donc, la taille très amusante off pour 10 pixels. Ok, allons-y et sauvegardons ça. Jetons un coup d'oeil à ce que nous avons et voyons ce qui a été fait. Ok, donc nous avons la couleur de fond là-dedans maintenant essayons de concevoir les moindres objets eux-mêmes. Devra supprimer la décoration de texte, Supprimer la liste. Je vais taper changé la couleur ainsi sur transformer les attaques elles-mêmes en majuscules comme nous l'avons fait ici. Vous devez également ajouter un avis d'effet de vol stationnaire. Lorsque nous survolons sur les éléments de la liste, la couleur devient bleue, puis nous avons aussi un sur la ligne. Alors revenons à maine dot c Évaluer Noter maintenant ici index point html être ajouté une classe hors pied notre menu. Nous allons donc utiliser ce cluster pour obtenir les éléments alliés ainsi que les éléments r A r eux-mêmes. Retournons dans le Maine. voir évaluer Et puis ici, je vais dire menu de tableau de bord de nourriture. Ah, OK, Donc le premier d'un bon à faire ici est que nous allons tous supprimer le type de style le moins et nous allons juste dire aucun. Nous ne voulons pas de style de liste dans, et ensuite nous allons le flotter vers la gauche, OK, parce que c'est à gauche, tandis que les icônes des médias sociaux sont à droite. Et puis ajoutons une marge de 15 pixels pour son fond ouvert et zéro pour gauche et droite. Et puis Padden Bull a dit ça à zéro. Ok, Maintenant, allons vite de l'avant et aussi cibler les éléments alliés eux-mêmes. Donc pied un menu de tableau de bord l Je vais aussi avoir à les flotter. Est-ce qu'ils sont partis aussi. Ils ont donc dit qu'ils pouvaient être en ligne, puis les commandes à une certaine marge. J' ai cinq pixels ainsi que huit pixels. Ok, sauvegardons ça. Et voyons à quoi cela ressemblera. Retournons ici. Actualisez la page. Et voilà. OK, alors on y arrive. Donc maintenant, nous avons juste besoin de cibler la taxe A réelle eux-mêmes, prêts à supprimer le texte sur la ligne, les transformer en majuscules et ainsi de suite. Alors revenons ici, et on va aller de l'avant et faire ça. Je vais dire Pied de page, menu de tiret. Et maintenant, c'est là qu'on va faire un design sérieux. Donc, la première chose ici va être la transformation du texte, qui va être en majuscules. Oh, c' est vrai. Nous avons un collier ainsi qu'une décoration puis texte. Ce serait une telle nonne. Nous n'avons pas besoin de décoration de prises du tout. Et, ah, gardons cette tête en arrière. Laissez-moi rafraîchir la page. Et d'accord, donc on est presque là, ils sont moins de deux minutes. Faire maintenant est d'ajouter comme les effets de vol stationnaire. Tu sais que c'est ici que nous avons ce joli effet sur le dessus. C' est aussi une transition en cours. Alors faisons tout d'abord ça. Ok, je vais retourner ici. Menu à deux pieds de page. Ajoutons un fond de bordure. D' accord ? Ça va être solide de deux pixels. Mais alors il est bon d'être transparent. D' accord ? Et maintenant, ajoutons l'effet de transition. C' est une transition. On va changer l'appelant. Rappelez-vous, en changeant la couleur pour comme un érudit bleu, alors nous allons faire 0,2 seconde et nous allons relâcher. Il va y avoir l'effet. Mais aussi maintenant la couleur de la bordure elle-même. Ça a changé le beurre Coehlo. Et cela va être de 0,2 seconde ainsi et ensuite soulager aussi. Ok, alors maintenant, allons de l'avant et ajoutons les effets de vol stationnaire réels. Il va y avoir pied de page, bord, menu A, puis sur le vol stationnaire. Ajoutons maintenant nos effets. Donc le 1er 1 changement ici va être la couleur, la couleur réelle du texte, et cela va être plein zéro b sept f f f Et puis maintenant l'appel de la frontière. Oh, c'est ce que nous allons changer. Et ça va aussi être 40 b 7 f f Allons-y maintenant, gardez cette tête sur nos coups, Professeur Page et que vous y allez. Alors, voilà. Maintenant, nous avons l'effet de vol stationnaire lorsque nous survolons sur nos éléments de liste. Alors c'est tout. Pour une partie, avertir l'Allemagne en partie à Bill. maintenant aller de l'avant. Et notre style, nos icônes de médias sociaux ainsi que le reste du pied de page. Je te verrai alors. 66. Obtenir nos icônes sociales dans la police Awesome: Bienvenue de retour. Donc, le temps a des offres communes pour ajouter nos réseaux sociaux, Aikens. Mais si vous remarquez que nous utilisons ce qui pourrait ressembler à des images, mais ce sont en fait des icônes, accord ? Et vous remarquez aussi qu'ici nous avons Aikens sur d'autres sections aussi, comme avec la marche du fil avec nous. Vous avez X actions pour le domaine de la recherche, les données analysées, etc. et ainsi de suite ici aussi. Nous avons plusieurs icônes pour les services fournis. Donc, dans cette vidéo, je vais vous montrer d'où vous pouvez obtenir ces icônes. Et c'est le site web juste ici. Ça s'appelle la police Awesome Doc home, et c'est essentiellement des représentants. American Obtenez des milliers et des milliers d'icônes gratuitement. Et laissez-moi vous montrer exactement comment vous pouvez commencer avec le front. Impressionnant. Tout ce que vous avez à faire, c'est juste aller à la page de connexion pour vous montrer Laisse-moi revenir à l'avant. Impressionnant. Très bien, donc c'est la première page que tu verrais. Donc, vous verrez le début pour le bouton gratuit juste ici. Il suffit de cliquer sur le bouton Démarrer gratuitement, puis vous serez des actes pour fournir votre adresse e-mail. Elle vient récemment ici à votre adresse e-mail, puis cliquez sur le code Sand Kid. Maintenant, une fois que vous avez fait cela, c'est le genre d'e-mail que vous recevrez. C' est essentiellement un moyen pour vous de confirmer votre adresse e-mail et de commencer à mettre en place les choses. Alors allez-y, cliquez sur pour confirmer votre adresse e-mail, puis vous serez redirigé vers une autre page, et ceci devrait être la page vers laquelle vous êtes redirigé. Si vous ne voyez pas cette page, il vous suffit de cliquer sur le lien stat dans le menu de navigation principal. Et puis juste ici, vous devrez ajouter un nom pour votre projet ou votre site web. Donc, vous pouvez soit lui donner un nom spécifique, soit vous pouvez simplement ajouter le nom de votre site Web, puis cliquer sur, créer et utiliser ce kit afin que vous soyez présenté un lien. Laisse-moi te montrer la mienne. Bon, maintenant c'est celui que j'ai eu et c'est le nom juste ici. Donc, vous verrez le lien juste ici. C' est le lien devra copier puis coller dans notre fichier html point d'index. Je vais aller de l'avant maintenant cliquer sur copier le code enfant. Et puis revenons aux parenthèses et ici sur notre fichier html de point d'index, je vais ajouter un lien ici dans notre section de têtes. Et voilà. Alors n'allez pas de l'avant maintenant et enregistrez donc ce lien ici est ce qui relie notre fichier html point index à l'avant. Site Web génial. Mais maintenant, comment affichons-nous les icônes réelles ? Eh bien, retournons à l'avant. Impressionnant. Voyons ce qu'ils ont. Alors allons-y et fermons ça. Donc à partir d'ici, je vais juste y aller. Je vais cliquer sur le 1588 Free Aiken, et ça devrait aller sur une page. Donc, à titre d'exemple, si vous voulez afficher notre Airbnb, nous pouvons cliquer sur Airbnb juste ici, puis vous verrez le code juste ici. Vous verrez, je classe ça appelle quelque chose comme ça. Donc, ce serait le code qui afficherait réellement cette icône sur notre site Web. Mais nous essayons d'afficher l'icône pour Facebook Twitter, LinkedIn et dribble. Alors faisons-le comme si je rentrais ici et où nous avons la barre d'icônes. Je vais chercher Facebook. Cherchons et laissons ou C nous allons défendre les résultats. Ok, donc on a 12 résultats correspondants, mais on va aller de l'avant et prendre le 1er 1 ici. Alors cliquez sur l'icône, puis juste ici, je vais cliquer sur ce lien pour copier le HTML. Vous pouvez voir qu'il a été copié. Donc maintenant je vais retourner à notre index avec HTML. Refroidissons tout le chemin ici et puis, mais nous avons Facebook. Je vais ajouter une nouvelle ligne, puis coller le code. C' est ça. Je vais y aller maintenant. Sauvegardez ça. Retournons en arrière. Trump monte, Rafraîchissons la page. Et voilà. Maintenant, nous avons Facebook là-bas. Faisons l'un très, très rapidement pour Twitter aussi. Donc nous avons Twitter et encore une fois nous allons juste aller de l'avant et aller au tout premier besoin. Alors, nous allons cliquer sur Twitter et nous allons cliquer sur ce lien juste là. Retourner à l'index html. Mais nous avons Twitter rythme ce code. Sauvez-le. Retournez à ah, le site a rafraîchi la page. Et voilà. Alors maintenant, nous avons Facebook et Twitter qui apparaissent. Donc ce que je vais faire maintenant, c'est notre vidéo positive. Et ajoutez rapidement ceux pour LinkedIn et dribble tous les droits. Bienvenue de retour. Je vais devoir ajouter les icônes restantes pour LinkedIn et dribble. Et, bien sûr, si je retourne à mon navigateur, vous pouvez voir que maintenant j'ai un LinkedIn et dribble affichage aussi bien. Alors c'est tout. Allemagne Vendex vidéo. Eh bien, nous allons maintenant finaliser le style off, ce qui a vu beaucoup que je te verrai alors. 67. Styler le pied de page partie 2: Oh, c'est une balle revenir à la deuxième partie hors style dans notre FOTA, et auparavant nous avons été en mesure d'ajouter le contenu que nous avons, ah, menu de navigation, mais aussi un menu social aussi. Essayons donc de faire en sorte que les images ressemblent exactement à ce que nous avons ici. Et nous allons festival Tackett, les médias sociaux Aikens, et vous pouvez voir la différence énorme menu de décision juste ici est à droite, donc nous allons devoir flotter les minutes de droite. Mais nous devons également changer la couleur des éléments des médias sociaux, augmenter les tailles de téléphone ainsi. Nous devrons supprimer le style de liste par défaut, mais aussi remarquer que lorsque nous survolons sur les éléments de menu, vous pouvez voir que nous avons un calo d'arrière-plan qui apparaît. Et aussi, nous avons quelques couleurs pour les icônes elles-mêmes sur. Twitter et Linda, pas le dribble bleu est lu. Facebook est le bleu des médecins, donc nous devons essayer de comprendre comment nous pouvons obtenir nos nombreux à ressembler exactement à ce que nous avons ici si allumé ou commencer le processus. Je vais retourner aux parenthèses, et c'est ce qu'on a. Nous avons une classe hors menu social, donc nous pouvons l'utiliser pour cibler nos alliés ainsi que notre balise A. Alors faisons ça. Je vais frapper sur deux principaux ne pas CSS. Et comme d'habitude, je vais prendre du fota. Même si techniquement nous concevons toujours le pied haut. Créons une nouvelle section pour nos médias sociaux. Donc on appellera ça. Ah, donc elle va manger menu et OK, donc, mais les prêteurs s'assurent qu'on a tout attrapé. On n'a pas attrapé la Ford Slash. Très bien, allons-y. Mais venons ici et commençons ce spectacle. Donc la première chose qu'on va faire est de cibler la classe sociale. Ouvrons les accolades de nos collègues. Donc, faisons rapidement cela, comme vous l'auriez deviné, devra faire un peu float dedans. Donc on va transférer ça aux droits. Supprimons tous les motifs. Alors gardez ce zéro Ah, le type de style de liste. Nous ne voulons pas de style Lee, donc tous disent pas comme d'habitude et sortons une certaine marge. Nous avons sept pixels, puis zéro. Bon, allons-y et sauvegardons ça et voyons ce que nous avons et OK, si bien. En ce moment, le menu est à droite. Commençons maintenant à styliser les éléments de menu réels eux-mêmes. Donc pour faire ça, on va retourner sur les parenthèses et on s'arrête. Ou d'abord, en ciblant la maladie de l'allié elle-même. Donc on va dire le menu social, et puis moi et puis vous allez les flotter vers la gauche pour qu'ils puissent s'asseoir de côté. Alors couler vers la gauche, puis les marges ajouteront le libéralisme, la marge zéro et ah, allons-y. Nous deux pixels. Ah, OK, maintenant, commençons. C' est que je reçois l'étiquette A. Donc, nous avons un menu médecin social par an et ce que nous allons faire ici, Tout d' abord, ajoutons quelques pixels Padden 10, puis il ajoutera également l'affichage du bloc en ligne et ensuite la dernière mais pas d'autres. On va ajouter un rayon de bordure de 20 pixels. Maintenant, nous ajoutons les vidéos de bordure parce que nous avons remarqué qu'ici, quand nous espérons plus sur les éléments de menu, vous pouvez voir le cercle qui apparaît autour d'eux. Donc c'est parce que le frère vidéos yeux en effet et 20 pixels descendre. Ou alors revenons ici. Nous avons ajouté le modèle. 10 pixels, nous avons affichage dans le bloc de ligne. Mais ensuite, nous avons aussi une bouteille. Vidéos sur 20 pixels lettres. Rapidement. Allez-y et ajoutez les effets de vol stationnaire. Ok, laisse-moi fermer celui-là. Donc, nous avons un menu de tiret social a et et survolent donc ils survolent. L' effet que nous avons ici est la couleur de fond et nous allons ajouter que Ah, nous avons hashtag f a f a f a f a. Allons-y. Maintenant, sauvegardez ceci et revenons ici et voyons ce qui se passe. Je serai d'abord la page et vous y allez. Et puis, lorsque nous survolons les éléments de menu en ce moment, vous pouvez voir que nous avons le fond blanc apparent et qu'ils sont si loin, si bons. Mais notez qu'ici les icônes sont beaucoup plus grandes. Donc, nous devrons faire un peu de taille de fonds. Et gardez à l'esprit que ce ne sont pas en fait des images. Ils sont des icônes de fond, sorte que vous pouvez appliquer régulièrement avant ah, propriétés à eux comme vous le feriez pour le texte régulier afin que nous puissions appliquer la taille du téléphone, donc je dois les rendre un peu plus grand. Et nous devons également ajouter quelques effets de couleur lorsque nous ho sur les éléments de menu eux-mêmes sur les icônes réelles. Mais dans une force pour cibler les icônes réelles elles-mêmes, nous devrons créer une classe pour eux, est-ce pas ? Donc lettres devoirs comme je vais retourner Teoh index dot html et puis pour chacune de ces icônes, nous allons ajouter une classe hors icône. Alors ajoutons Icône pour Facebook pour Twitter. Nous en ajouterons un pour Lincoln aussi. Et puis dernier Panelist ajoutera 14 dribble. Allons de l'avant et économisons cool. Maintenant, nous pouvons cibler les icônes elles-mêmes. Retournons ici. Je dirai le menu social Dash, puis l'icône de classe off. Et maintenant cela va commencer à faire le vrai style. Unser premier et premier est de changer la couleur et la valeur va être un a a. une lumière. Ensuite, ici va être la taille de la police. Maintenant, je sais que ça va faire 20 pixels. Donc, à 20 pixels, ajoutons aussi une hauteur de ligne de 20 pixels, juste pour une bonne mesure. Et puis nous pouvons également ajouter un texte aligner hors centre. Ok, allons-y et gardons ça et voyons ce que nous avons maintenant. Retournons ici. Fait référence à Page et là vous allez. OK, donc on y arrive peu à peu et on remarque quand on passe la souris sur les icônes, ça a toujours l'air bien. Mais alors nous devons aussi maintenant ajouter le changement dans l'effet de couleur. Alors faisons ça. D' accord. Lorsque nous revenons aux parenthèses, faites-nous savoir les effets de vol stationnaire koweïtien pour chacun d'eux. Donc plein peut commencer par dire le menu de tiret social, puis un et puis nous allons dire hover. D' accord. Et dans l'icône de canard point f un livre de phase de tiret Dash F. C'est ce que nous ciblons étaient spécifiquement des cibles dans les icônes elles-mêmes. Droit ? Rappelez-vous donc que lorsque nous survolons, les icônes planaient également sur la balise A. Techniquement, donc nous devons prendre le tag a en plus de nos classes d'icônes aussi bien. C' est pourquoi nous avons ces très, très longue vision de Thekla. Alors allons-y et faisons-le. Mais juste ajouter très, très simplement va dire la couleur ici, nous allons changer ça à trois. Soyez 599 huit et voilà. Donc, fondamentalement, lorsque nous survolons sur Facebook, je peux changer sa couleur d'un A à cette valeur. Allons-y et essayons ça. Sauvons ça. Retournons en arrière. Rafraîchissez et ok, on ne peut pas vraiment voir parce qu'il fait sombre. Allons vite essayé horrible tweet up. D' accord, lisons-le pour toi très vite, alors attrape ça. Copions-y un. Venez ici, collez. Confirmons la classe pour Twitter. C' est en fait l'icône est en fait f un tiret Twitter. Ok, revenons ici pour un tweeter et puis l'appel de valeur ici va en fait être 55 à c e. Et maintenant, laissez-nous voir si vous ne voulez pas est un changement. Voilà, tu y vas. Voilà, tu y vas. Donc maintenant, Twitter fonctionne correctement. Concluons la même chose pour LinkedIn et dribble donc encore, je vais juste aller de l'avant et prendre ce code. Il suffit de descendre ici, coller, descendre ici, de coller aussi. Et confirmons les icônes pour LinkedIn, c'est F A. En fait, prêteurs nous ont attrapés, je pourrais oublier, parce que ma mémoire est vraiment, vraiment mauvais. Donc Linda a attrapé ça juste là. Retournez pour rester ça. Voyez, évaluez. Et là, je vais changer ça pour FA Dash Wingman. Et puis enfin, les 14 jours dribble F un tiret dribble. Ok, alors faisons-le Aziz. Eh bien, allons coller ça. Et Ah, trouve. Donc, le 14 LinkedIn sa valeur est en fait 0077 b cinq, puis le dribble 14 va être e un C 89 complet Allons de l'avant et sauvegardons ceci. Retournons ici. Actualisez la page. Et voilà. Impressionnant. Génial, génial. Cependant, nous n'avons pas fini. Nous sommes toujours dans l'air comme un bel effet de transition parce que nous remarquons ici que nous avons effets de transition très doux. Alors faisons-le ça, d' accord ? On va retourner ici, et quand on aura l'icône des médias sociaux, ajoutons notre effet de transition ici. Donc, nous allons dire que la transition va être couleur et et comme d'habitude, allons-y 2,2 secondes et j'aimerais dire, Apaise-toi . Et voilà. Allons en sécurité. Retournons en arrière, rafraîchissez la page. Et maintenant, nous avons ce bel effet d'assouplissement. Cependant, vous avez peut-être remarqué que l'icône de Facebook semble un peu différente lorsque nous survolons dessus des autres. Les autres ont, bien, bien, beauxcercles arrondis, cercles arrondis, comme vous pouvez le voir. Mais Facebook n'est pas tout à fait aussi arrondi. Donc, ce que nous pouvons faire dans une situation comme celle-ci est simplement de fournir un avec et une hauteur pour nos icônes. D' accord ? Et idéalement, vous voulez aller avec la valeur de étant donné la taille de la police. Maintenant, jusqu'à présent, nous avons donné une taille de téléphone de 20 pixels pour l'icône. Alors faisons ça comme si je vais aller de l'avant maintenant et dire simplement que la hauteur est de 20 pixels , puis avec 20 pixels de cette façon. Je suis désolé, Edna. Renverser correctement avec tout droit. Alors que de cette façon, les vidéos de bordure auront maintenant sur réelle propre notre cercle de l'ancien Rappelez-vous les vidéos de corps où ici était 20 pixels. Donc, en étant donné nos icônes une hauteur de 20 pixels avec les 20 pixels et à l'avant des pixels du train, il va correspondre correctement. Alors sauvegardons ceci et revenons à un Broza d'abord une page, puis attendons juste quelques secondes. Allons ici. Et maintenant, vous pouvez voir que Facebook a maintenant le même effet de cercle de vol stationnaire, comme avec Twitter, LinkedIn et dribble. Donc, à la fin de cette vidéo devra encore concevoir le droit d'auteur. Tex et aussi ajouter, sont beaucoup de marges et de motifs. Comme vous pouvez le voir, il y a beaucoup d'imagination et de motif entre les deux sont des sections de menu ainsi que le texte du copyright. Donc la première chose que nous devons faire, cependant, est que nous devons corriger une légère flèche. Et c'est parce que par ici et je fichier html juste ici. Le texte du copyright est en fait à l'intérieur de la journée de congé de classe, donc il devrait être à l'extérieur. Alors corrigeons ce problème. Ok, je vais aller de l'avant maintenant et couper ça et leurs niveaux collés dehors de la classe des sourds hors route parce que c'est alors le droit d'auteur. Tex est seul. La classe de la mort de Roe est celle qui contient le menu du pied de page ainsi que le menu social. Donc, si nous voulons que le pied soit seul comme il est ici, il doit être dehors le jour de la tenue de la nourriture. Menu thaï terminé menu social. C' est pourquoi tout ce que nous faisons ce changement. Alors allons-y maintenant, économisez. Et si nous retournons à la Poza, nous devrions remarquer un changement immédiat. Et voilà. Donc maintenant, vous pouvez voir le texte complet est tout seul là-bas. Alors, qu'est-ce qu'on a besoin de changer ici ? Nous devons faire une transformation de texte. Nous devons également nous aligner dans le vers le centre, et aussi ajouter beaucoup d'imagines et de motifs. Alors faisons ça. Je vais retourner pour rester ce CSS. Et là, on a de la nourriture. Je vais juste venir ici et dire Fu tha et puis p d'accord. Et puis je vais tout d'abord dire la transformation du texte. Allons envoyer la ligne d'une ligne de sexe pour l'envoyer et ensuite des textos. Il y a transformation va être majuscules ou câble, mais va aussi ajouter des marges et des motifs. Mais allons de l'avant et sauvegardons cela d'abord et voyons à quoi ça ressemble. Rafraîchissons et voilà, OK, OK, Alors essayons d'ajouter des marges et le contenu entier de l'étudiant modèle parce que l'avis ici, le pied sur les menus. as eu combien ? Quelques marges du haut même, du pied vers le haut. Donc, ce que nous pouvons faire est que nous pouvons cibler le principal Dave qui détient tout, ce qui est la classe de mort réelle du contenu à l'échelle. Alors nous allons cibler cette classe. Je vais retourner ici et juste après la nourriture, je vais maintenant venir ici et dire de la nourriture et ensuite du contenu. Et maintenant, c'est là que nous pouvons ajouter des motifs sérieux. Donc, il y a des tapotements. Allons avec 15 photos du haut 20 pixels à gauche et à droite, 35 pixels à partir du bas et dans la marge pour une bonne mesure ira zéro auto, Sauvegardons, et nous devrions voir quelques grandes améliorations en ce moment. Le frais et voilà. Donc c'est à peu près tout. Il y a quelques légères différences ici, mec. Peut-être le texte de l'entreprise. Il y a un peu plus petit que ce que nous avons ici, mais c'est parfait. Je ne pense pas qu'on ait besoin de l'être. Nous allons dans Masters correspondent exactement à ce design, mais c'est comme nous avons été en mesure de concevoir ou de construire et d'installer avec succès notre nourriture. Nous avons également été en mesure d'obtenir des icônes de l'avant, génial aussi. Donc c'est tout pour construire et démarrer le pied. Une cloche vidéo allemande Avonex va maintenant ajouter le reste de nos icônes à l'avant Awesome. 68. Ajouter les icônes restantes: Bienvenue de retour. Alors maintenant, il est temps pour nous d'ajouter les icônes restantes de l'avant. Impressionnant ! Maintenant, ici sur un site de modèles, notez que nous avons des icônes pour l'qui. Nous sommes ce que nous faisons, mais remarquez qu'ils sont de couleur verte, puis pour les services. Nous avons neuf Aikens différents, et ils sont tous violets et de couleur. Et enfin, aux Émirats arabes unis, marchez avec nous. Nous avons également quatre icônes différentes. Nous en avons un qui est le plus clair bleu, orange, vert à nouveau et puis lire. Nous avons donc besoin d'un plan et ce que nous allons faire ici est juste d'abord, créer des classes pour chacune de ces icônes, en particulier en utilisant leurs couleurs. Et Dan va juste attribuer à l'hexadécimal des valeurs pour ces propriétés de couleur. Donc voici exactement ce qu'on va faire. Retournons nos deux crochets. Continuons à rester ce CSS. Et nous allons trouver un bon endroit pour ajouter Aikens et tout ce que nous pouvons faire ici Nous avons des boutons. Prenons ça. Laisse-moi nettoyer ces espaces vides et, ah, on va aller de l'avant et ajouter une nouvelle section, mais on appellera ça la section des icônes. Alors je viens et ah, faisons-le ça. D' accord, donc le 1er 1 ici va être vert. Ok, donc disons, euh je peux et puis un point vert donc cette icône particulière aura l'appel de la valeur et ça va être huit c b sont neuf portés trois. Ok, allons-y et copions ça. Allons-y et collons. Changons rapidement cela en violet afin que nous ayons le violet et puis la valeur de la couleur de l' icône violette va être, ah, CC 72 et puis f Allons de l'avant dans le rythme de la pièce que n'importe qui est pour sont rouge, orange ainsi que bleu. Bon, donc, donc, comme vous pouvez le voir, j'ai ajouté beaucoup de couleurs pour le bleu, orange et le rouge, mais remarquez qu'il y a deux autres propriétés que nous pourrions avoir besoin d'ajouter. Vous pouvez voir la taille du téléphone. On ne peut pas vraiment dire à quel point ils sont grands, mais je vais aller aux quatre pixels pour les icônes. Mais j'ai aussi remarqué qu'il y a un peu d'espace entre le texte réel et dans l' icône afin que nous puissions donner cela peut être une marge droite de, disons, cinq pixels. Alors faisons ça. D' accord ? Les icônes sont en fait à l'intérieur d'une étiquette H three. Laisse-moi te montrer ça très vite. Si nous revenons à notre index de HTML sont, par exemple, ici où nous avons tout ce que nous sommes, vous pouvez voir en ce moment il est dans. C' est dans un H trois ils Ce que nous faisons est dans un H trois développement Web pour les services est un H trois. Donc ces icônes vont être placées à l'intérieur hors de notre âge. Trois. Impôt. C' est pourquoi nous viendrons ici et au sommet. Nous allons maintenant dire R H trois, puis l'espace, puis l'icône point. J' espère qu'aucun sort je peux correctement, donc cela aura maintenant. Tout d'abord, allons lui donner une taille de téléphone et nous allons aller aux quatre pixels, puis la marge à droite de cinq pixels est aller de l'avant et enregistrer cela et tout K. Alors comment pouvons-nous maintenant jouer les icônes ? Commençons par le 1er 1 et celui-ci est en fait un roi d'échecs. J' aime jouer aux échecs. Je ne sais pas pour toi, mais j'adore jouer aux échecs. Donc, pour ajouter le roi de la poitrine, nous allons la tête d'un dos à l'avant. Impressionnant. Passons à la page des icônes. Et par ici, on va juste taper. Ah, le roi des échecs. Et voilà. Donc c'est celui juste ici, alors on va y aller. Copiez ceci. Cliquez dessus, et nous allons simplement copier le code pour l'afficher. Faisons la tête des fesses à propos de vos supports. Donc, ce sera là où on aura ce qu'on est. C' est très bon à la classe comme un jour. Mais rappelez-vous, nous devons toujours ajouter l'icône hors classe, puis vert car il a la couleur verte. C' est vrai ? Alors allons-y, sauvegardez ça. Retournons ici à nos cloches de la Page intéressée. Et voilà. Pour que nous puissions voir une ICANN. Mais il y a un sac de course Kahlo couvrant son problème de maniabilité. Eh bien, si on retourne à nos parenthèses, rappelle-toi que là où on a les contacts. Voir ici, nous avons aussi la classe de fond. Mais alors vert, non ? Alors où est exactement la même chute de classe ? Ils entrent en bouton tactile avec l'icône pour le roi de la poitrine. Il y a dans la même classe de vert. Et si nous avions environ deux principaux membres SS nazis ici, où nous avons vert, nous avons une couleur de fond sur huit CB 913 Donc, fondamentalement, en ce moment, l'icône obtient la couleur de fond de la classe off green qui donnerait d'abord pour aller vers le bas. Donc, pour éviter ce genre de problème ou juste faire un léger ajustement Ah, allons-y et nous allons juste dire Revenons à la première Enciso originale . Nous avons bouton puis vert afin que nous puissions simplement dire bouton et puis vert pour cette propriété particulière . Les soldats qui viennent ici, disons qu'ils sont achetés, puis verts. Donc fondamentalement, tout élément qui a la classe hors Bolton et Green devrait avoir la couleur de fond police HCB 9. Donc, n'importe quelle classe avec n'importe quel autre élément avec juste une classe de vert n'aura plus cette couleur d'arrière-plan. Alors allons-y. Sauvegardez ceci un peu, voyez si cela change quelque chose de frais. Attendons encore quelques secondes. Et voilà. Impressionnant. Donc maintenant nous pouvons voir l'icône juste là tandis que la torche Gettin le Baghran vert est toujours intact. C' est donc un ajustement que nous avons fait. Les deux se souviennent que nous avons également fait quelque chose de similaire avec les Nos services qui ont le violet sont de retour sur Coehlo, et nous allons également utiliser la classe de violet pour les services que je console. Faisons aussi que l'ajustement se dirigera vers l'arrière d'un deux crochets. Donc très ont violet. Il suffit de dire aussi, notre bouton violet. C' est ça. Sauvons ça et on devrait aller bien. Donc, ce que nous devons faire à partir d'ici maintenant est d'ajouter les icônes pour notre service, dit une liste. Voulons-nous juste un exemple. Donc, celui-ci ici est fondamentalement notre code pour le développement Web. Alors revenons ici. Cherchons du code et voyons ce que nous pouvons obtenir de formé Awesome. Et celui-là est juste là ? Donc, c'est fondamentalement juste du code. Alors, nous allons cliquer ici et voyons. Je vais aller de l'avant, attrape ça. Retournons aux parenthèses. Passons à l'index de html. Alors faisons celui ici pour le développement Web. Allons de l'avant, mais bien sûr, va maintenant ajouter la classe hors icône et puis sont également violet. Et allons-y, sauvegardez ça. Retournons à nos cloches d'abord à la page. Et voilà. Juste comme ça. Nous avons maintenant l'icône pour un violet, donc ce sera fondamentalement le même, notre processus pour tous les Aiken restants. Donc, ce que je vais faire maintenant est simplement mettre la vidéo en pause et ajouter les Américains restants à nos droits de page de tous les autres hommes et icônes pour ces services section, ainsi que la section Pourquoi marcher avec nous et, bien sûr, le reste de notre icône ici, où nous avons ce que nous faisons. Donc, si je jette un coup d'oeil à mon site Web, c'est essentiellement à quoi il ressemble maintenant. Nous avons toutes les icônes juste là, Donc si vous êtes intéressé, vous pouvez facilement obtenir les noms de toutes ces icônes à partir des fichiers de Shed avec vous les fichiers pour le site Web. Vous pouvez simplement trouver les noms bon jour et sont simplement copier-coller. Cependant, nous devons encore ajouter ceux pour les témoignages. Comme vous pouvez le voir, on n'en a pas eu ici. Laissez-moi vous montrer comment en ajouter un pour le témoignage. On va retourner ici et on sera heureux en manteaux et il est parti. Ok, donc ce sera le 1er avant le tribunal lui-même. Donc, c'est là, juste là. Ça s'appelle Gauche. Alors, nous allons cliquer sur celui-ci. Et voici le code. Alors allons de l'avant et copions que maintenant la tête d'un retour entre parenthèses et faisons cela à nouveau. Cherchons la section des témoignages et Ah, OK, OK, donc c'est juste ici. Donc on va ajouter ça juste après la classe hors manteau. Ajoutons ça. Mais alors ce sera les classes d'icônes. Eh bien, n'oubliez pas après en classe ICANN, puis rouge aussi, parce que les premières couches sont rouges. Mais ensuite, nous devons aussi y aller. Nous allons devoir aussi faire un peu de design. Ajoutons donc une autre classe appelée courts, que nous pouvons utiliser pour être étrange à imaginer et peut-être même augmenter la taille de la police si nécessaire. Donc c'est tout pour le premier rhume. Retournons en arrière et ajoutons le manteau de droite pour qu'on puisse juste dire notre manteau bien ? Alors, fouillons. Et bien sûr, ce serait celui à la fin du témoignage. C' est celui juste ici. Alors, cliquons sur les droits de la cour et ah, eh bien, copions ça et nous ferons exactement la même chose encore une fois. Allons ici juste avant le Dev. Nous ajoutons cela et, bien sûr, ajouterons la classe Eiken, la classe rouge et ensuite les manteaux. Alors allons-y et sauvegardons ça. Et voyons le changement que nous avons maintenant. Rafraîchissons et voilà. Ok, donc nous avons maintenant les manteaux rouges. Tout ce que nous devons faire maintenant, c'est juste d'ajouter une certaine marge. Comme vous pouvez le voir, c'est une certaine marge entre l'Aiken et le texte. Alors faisons ça. On a déjà ajouté la classe hors cour, alors allons-y dans le Maine. C' est ES dit. Regardons notre section de clous de témoignage. C' est juste là, donc on peut juste dire Grincheux, plus de Nal et ensuite on peut ajouter la classe hors des manteaux et on va faire ça, ok ? Nous allons juste ajouter la marge et les valeurs qui ont ici sont cinq pixels et 10 pixels. Allons de l'avant et sauvegardons ceci et actualisons la page. Et voilà, air très, très bien. Donc tout ce que je vais faire maintenant, c'est juste d'ajouter les codes restants pour le vert,le vert, bleu et l'orange. Je vais à travers les vidéos visuelles et CV Une fois que je les ai ajoutées. Bienvenue de retour. Donc vous pouvez voir que j'ai ajouté les codes restants pour les trois témoignages. Et bien sûr, si je vais sur le dos aux cloches sont rafraîchis la page. Eh bien, voilà. Nous avons maintenant toutes les icônes sur notre page qui apparaissent. Donc, c'est fondamentalement tout pour ajouter des icônes à partir de fonds. Impressionnant. J' espère que vous avez apprécié la vidéo. Je te verrai la prochaine classe 69. Ajouter les liens d'ancrage de navigation: Eh bien, reviens. Donc, à ce stade, nous avons à peu près construit nous-mêmes un site web assez beau. Mais maintenant, nous devons aussi ajouter Welcome back, monsieur. À ce stade, nous avons à peu près construit nous-mêmes un beau site Web. Nous avons toutes nos sections. Nous avons, ah, ah, conception du contenu est intacte et à peu près tout semble bien. Cependant, nous pouvons encore améliorer la fonctionnalité de notre côté en ajoutant quelques boutons de navigation, en particulier ceux ici. Notez que chaque fois que quelqu'un clique sur ces flèches, il les emmène directement en haut de la page. C' est donc un excellent moyen d'améliorer l'expérience utilisateur sur un site Web, en particulier sur les pages qui sont très, très longues, comme celle que nous avons ici, sorte que l'utilisateur ayant à l'école ancienne chemin vers le haut, ils peuvent simplement regarder ces boutons et cela les mènera jusqu'au sommet. Nous devons donc créer quelque chose connu sous le nom et appelé des liens. Fondamentalement, nous devons quitter un oncle quelque part autour de la première section ici pour que chaque fois que quelqu'un clique sur ces heures, il les emmène à cette cheville. Donc nous devons créer l'oncle ici et ensuite lier ces oncles Lynn cet oncle, soit à toutes les heures de navigation que nous avons dans chaque section, comme vous pouvez le voir. Alors faisons ça, c'est que ça va être un peu amusant. Allons de l'avant sur les parcelles des électeurs. Et la première chose que nous allons faire maintenant est de créer un peu d'espace pour les boutons ici . Alors faisons ça. Ok, Allons-y maintenant et ajoutons le 1er 1 ici aussi, où nous avons l'idée sur. En fait, faisons celui-ci pour les services d'abord. Ok, je pense à ça un peu trop près du sommet. Alors passons à la section pour ça. Jusqu' aux services. Bon, donc on va faire ça. Je vais ajouter un nouveau tag parce que, bien sûr, c'est une Linda, mais en cliquant sur Donc nous devons utiliser une taxe, donc je vais dire h ref est égal à nous allons ajouter des manteaux pour l'instant, le lien réel va être l'oncle à Baltika. Regarde ça un peu plus tard. Ajoutons un cours parce qu'on va faire un peu de style. Alors appelons-le bouton, puis en haut. Donc c'est fondamentalement bas vers le haut. Et maintenant, créons une travée qui contiendra le contenu réel lui-même. Alors, travée. Et puis on peut dire que la classe est égale. Et puis on appellera ça. Ah, flèches ! Flèches vers le haut ! Ok, je pointais vers le haut et c'est tout. Ok, allons-y et gardons tout ça K. Maintenant, nous devons aller de l'avant et afficher les Avalos. Les heures qu'on a ici. Maintenant, pour afficher cela, nous pouvons utiliser quelque chose connu sous le nom de CSS NTT. Et bien sûr, ici vous pouvez voir que nous avons tellement de types différents d'entités. Tout cela symbolise votre péché ici. Ce sont les entités. Et puis ceux-ci ici sont les codes avec lesquels nous pouvons utiliser pour afficher l'entité. Donc celui que nous recherchons spécifiquement est celui que j'essaie de voir où il est. Ok, donc après avoir passé près de cinq minutes, je l'ai enfin vu. Celui est juste là ? Le point droit 00 B entre guillemets double angle. Maintenant je sais qu'ici, ils pointent vers le haut. Mais si c'est le cas, nous n'avons pas une entité réelle qui le fait. Mais nous pouvons appliquer à l'utilisation de certains CSS pour tourner l'autre pour pointer vers le haut, donc je vais vous montrer comment faire cela. Alors allons de l'avant et saisissons simplement le code. Donc il 00 BB. Je pense que je m'en souviens. Alors faisons-le bien. Une chose que vous devriez également savoir avant de continuer est que les entités d'affichage. Vous pouvez utiliser le contenu, la propriété commune pour les afficher. Cependant, le contenu prétendu ne marcherait que sur des pseudo-éléments comme la classe avant ou après. Donc, en conséquence, nous devons le faire. Je vais retourner aux parenthèses. Allons vers le Maine que CSS et les lentilles créent une nouvelle section. Je pense que juste sur les boutons Faisons ça comme je vais venir ici et je vais dire , Ajoutons d'abord la nouvelle section et je vais voir au lieu de boutons. Je dirai : Ah, Ah, flèches vers le haut. Ok, puis Ah, bouton, puis espace, puis flèches. Et maintenant, nous allons ajouter cette classe basse avant d'ouvrir nos accolades collègues, et maintenant nous allons utiliser le contenu délibérément pour afficher l'entité, et nous les avons dans les manteaux va être slash inverse et maintenant 00 BB. Donc, c'est exactement comment vous pouvez afficher un contenu d'une entité. Donc, vous devrez utiliser un pseudo élément comme avant, après et ensuite simplement utiliser le type de propriété pour couper, puis la valeur de ce particulier et continuons. Maintenant, sauvegardez ceci et voyons si je remarque un changement et ah, OK, donc c'est juste ici. Vous pouvez voir qu'il est juste là. Donc c'est l'entité, cet avion. Mais d'une manière ou d'une autre, il n'est pas nécessaire d'obtenir cela juste ici à droite de notre âge pour taxer hors cours. C' est là que certains styles CSS vont entrer pour jouer. Alors, allons-y, je vais retourner ici. Créons un peu d'espace juste au-dessus ici. Donc nous allons cibler les étiquettes A tenant les heures. Et bien sûr, les huit qui me préoccupent sont notre classe de bas à haut niveau. Donc on va venir ici et je vais dire les fesses et ensuite point top je dirais à un haut et maintenant commençons à ajouter un peu de style. Et tout d'abord, ajoutons simplement le collier. Ok, donc ils appellent ici va être 555555 Nous avons une couleur de fond, alors ajoutons celui-là aussi. Et quand je t'ai, c'est juste des blancs purs. C' est F f f f f f f. Ok, ajoutons aussi un peu de rembourrage. Nous avons donc cinq pixels. 12 pixels. Avez-vous cinq pixels ici et ensuite des pixels ? Oh, cape et dernier panéliste. Ajoutons un rayon de bordure de trois pixels. Ok, allons-y et sauvegardons ça. Retournons à l'intérieur. Ici fait référence à la page et là vous allez. OK, donc ça commence à paraître mieux. Mais maintenant comment on peut amener ce type à la lumière ? Vous devriez penser à la position, à la propriété et en particulier à la valeur hors AB. Donc, les regards devront utiliser la propriété glissée de l'application pour obtenir cela là-bas vers la droite. Alors revenons ici. Hum, je vais maintenant dire que la position va être ab so luth, et ensuite nous allons simplement sauver les TIC en fait, beaucoup sur la valeur hors. Droit ? Pourtant, les balles vont avec peut-être 10 pixels et ensuite on verra. Ok, allons-y et sauvegardons ça. Revenons d'abord une page et voilà. OK, donc c'est juste là. Donc, nous devons peut-être le pousser un peu plus loin vers la droite, et ensuite nous pouvons aussi dire top zero. Maintenant, il est une bonne chose que si vous remarquez, est la tenue Dev dans la classe de contenu. Nous lui avons déjà donné la valeur off relative pour la position. C' est pourquoi nous sommes toujours en mesure de voir l'entité juste ici. Si nous enlevons ce voile de position, vous pourriez voir dès maintenant qu'il commence tout simplement à sortir des frontières. C' est pourquoi c'est généralement une bonne chose de simplement ajouter de la personnalité à votre contenu. Dave est juste au cas où vous vouliez marcher avec des éléments à l'intérieur de ces Dave qui pourraient avoir la position hors ab donc luth. Allons-y maintenant et faisons quelques changements. Je vais utiliser l'inspecteur pour éclairer ici aussi. Je vois. Alors venons ici et disons blanc, 20 pixels à la place, et ensuite nous dirons top off zero. Voilà, tu y vas. Ça a l'air beaucoup, beaucoup mieux. Je me sens bien, alors faisons-le parce qu'on aura 20 pixels droit et ensuite zéro. Donc, nous allons enregistrer les droits 20 pixels, puis vers le haut, nous avons zéro comme valeur. Et puis ajoutons aussi une bordure. Alors va être solide d'un pixel, et ensuite la valeur de notre d cinq d cinq d cinq d ? Ça va être la valeur. Ok, allons-y. Maintenant, enregistrez ceci et nous allons voir ce que nous avons fait référence à la page et OK, donc voilà que vous allez. D' accord. Nous devons faire d'autres changements. Notez que les heures pointent ou versent le un peu plus grand et ils ont aussi un peu de motif . Donc, nous devons réparer ça. Alors revenons ici, on va faire, c'est qu'on va prendre la classe qui détient l'entité, les heures et ça va être la classe hispanique pendant les voyages, bonnes heures. Alors allons-y et faisons-le. Je vais ajouter nos nouveaux vêtements ici, puis Avalos. Et maintenant, nous allons ajouter la toute première propriété ici, ce qui serait la taille amusante. Maintenant, je sais que la taille du téléphone ici va être de 28 pixels. OK, allons-y et sauvegardons ça. Jetons un coup d'oeil à ce que nous avons maintenant. Rafraîchissez la page et voilà. Ok, donc ça a l'air plus grand en ce moment. Mais c'est ce que le temer est maintenant obligé de faire une certaine transformation. Donc, nous devons trouver un moyen comment nous pouvons aller prendre les flèches de sorte que le point vers le haut maintenant il ya une propriété connue comme la chance de propriété spécifiquement pour tel, cependant, notez que la propriété transformée Onley marche sur dans des éléments de ligne comme des images. Vous pouvez appliquer la propriété de transformation sur les images. Pas de problème. Les deux pour le texte normal des entités, vous devrez les afficher sous la forme d'un bloc de ligne avant que la propriété de transfert ne puisse fonctionner. Alors revenons ici et revenons tout d'abord, disons simplement l'affichage, puis dans le bloc de ligne. Ok, sauvegardons ça. Retournons ici. Rafraîchissons. Et maintenant, nous allons utiliser l'outil d'inspection pour faire la transformation. Alors regarde ça comme si je vais aimer regarder ici, aller inspecter, et ensuite juste ici, vérifier ça encore. Je minimise juste un peu cela. Ah, de la drogue par ici. Buvez celui-là. Ok, donc c'est la classe, mais je viens ici, donc je vais dire, transformer, transformer. Et maintenant, nous allons tourner, donc ça va tourner. Et puis à l'intérieur, nous pouvons maintenant ajouter le degré hors de la rotation. Donc, dans ce cas, moment, nous pouvons aller avec, disons, 45 d e g. Donc maintenant vous pouvez voir qu'il est tourné de 45 degrés. Maintenant, il pointe une sorte de diagonale vers le bas. Tout ce qu'on aurait pu faire avec peut-être 90 degrés à la place. Maintenant, c'est un point vers le bas. Qu' est-ce qui est complètement ? Oh, on peut aller jusqu'à 70 degrés. Et maintenant, il pointe vers le haut, comme vous pouvez le voir. Mais une autre valeur que nous pourrions simplement donner au lieu de 70 degrés serait négatif 90 degrés. Donc, ce serait comme le mouvement anti-horaire. Je pense que je suis désolé. Je suis très mauvais en maths, environ 2,2 heures ou projet, et vous allez avec 70 degrés ou 90 degrés négatifs. C' est comme si c'était exactement comme ça que vous pouvez transformer vos entités si bien, mais ce n'est pas l'inspecteur ? Essayons également d'ajouter quelques CSS supplémentaires pour rendre ce look vraiment, vraiment bon. La première nuit fera ici est d'ajouter une hauteur de ligne de, disons, 20 pixels. Ok, donc ça a l'air un peu mieux. Nous pouvons aussi désordre, connu sous le nom de la verticale de notre ligne et puis au milieu de sorte que les heures de position au milieu leurs frontières et, ah, que pouvons-nous faire d'autre ? On peut ajouter un monstre. Et je pense, essayons une marge à gauche. Peut-être. Allons aux pixels. En fait, allons-y un peu plus. Cinq pixels. Je pense que ça a l'air bien. Oui, j'aime bien ce qu'on a ici. Je le fais. J' aime ça. D' accord, allons-y. En fait, cinq pixels, c'est trop. Je suis désolé. Je suis en train de faire son temps réel, donc ok, je pense que trois pixels semblent Ah, plus comme c'est maintenant sont alignés juste là au centre. Alors on y va. La marge gauche est de trois pixels s. Alors revenons ici et faisons ça à droite. Donc je vais dire transformer et bien sûr, il va tourner. Et puis entre parenthèses. Donc, nous avons 90 degrés négatifs, et ensuite nous avons la marge gauche, qui était de trois pixels de hauteur de ligne. N' oublions pas la cachette de ligne, nous avons ajouté. Et je crois que c'était 20 pixels si je ne me trompe pas. Lisbonne, toujours. Nous avons le milieu de l'alignement vertical. Ok, allons-y et maintenant et gardons cette tête ici. Fait référence à Page et là vous allez. Ok, presque là. Presque là. Deux autres choses que nous devons faire, c'est que nous avons l'effet de vol stationnaire ici, comme vous pouvez le voir. Alors ajoutons rapidement l'effet de surchauffe. Retournons ici et nous devrons cibler la classe. Les étiquettes A tiennent les heures, donc ça va être le baht dans nos deux top. Alors venons ici et ah, accord, donc juste ici. Je vais juste dire, Ah crosse dedans et puis en haut et puis planer dessus. Donc, nous allons faire très, très simplement sera de changer la couleur de la bordure donc il va être frontière Coehlo puis développeur. Avoir ici est le zéro complet B sept f f. Et puis nous pouvons aussi ajouter une ombre de boîte juste pour améliorer l'effet. Donc, développez votre pixel 0001 et puis vous pouvez également ajouter exactement la même couleur. Encore Oliver. 40 B sept Ah f Allons-y et sauvegardons ceci. Retournons ici. Eh bien, d' abord la page et voilà. Donc maintenant, vous pouvez voir que nous avons un effet très agréable là-dedans. Mais maintenant la question est, comment créer la cheville pour que lorsque nous cliquons sur cette flèche, elle nous emmène jusqu'ici ? Eh bien, ce qu'il faut faire, c'est créer la cheville, certains autour de la section d'en-tête. Ok, alors retournons dans les poches. Et mon index de tonalité HTML utilisera la balise head out parce que c'est la balise qui tient essentiellement les éléments de menu et le local. Donc, ce serait un bon endroit pour ajouter la cheville. Je dirai donc que je suis égal. Et puis je vais simplement dire, Ah,à Ah, la maison. Ça va être l'idée de la cheville. Donc maintenant, pour lier cette cheville avec nos étiquettes A, je vais venir ici et vous avez la réf h. Je vais simplement dire balise de hachage et ensuite à la maison. Donc, cela va maintenant lier la cheville dentée. Allons-y. Maintenant, sauvegardez cette toile de fond de tête souffle notre rafraîchissement de la page et ne jamais venir ici. Et je clique sur la flèche. Vous pouvez voir que ça nous mène jusqu'au sommet. Donc tout ce que je vais faire maintenant est juste d'ajouter le reste sont des liens de cheville sur la page si bien, revenez. Et comme vous pouvez le voir maintenant, j'ai ajouté la longueur de la cheville restante. Et bien sûr, quand vous cliquez dessus, il faudra un droit en haut de la page, et c'est à peu près tout. Mais je sais qu'ici, du côté du modèle, vous pouvez voir que la cheville est très, très lisse quand elle fait défiler vers le haut. Le nôtre en ce moment est juste instantané. Vous cliquez sur le lien et il va tout le chemin vers le savon haut. Nous devons trouver un moyen de rendre le mouvement très, très lisse. Ce que nous avons ici donc événement allemand exsuder plus va maintenant finaliser l'amélioration hors sont longueur de la cheville. Merci d'avoir regardé 70. Ajouter des animations: Eh bien, les retours. Dans une vidéo précédente, nous avons ajouté avec succès les flèches de navigation pour nos différentes sections. Mais la seule chose maintenant, c'est que lorsque nous cliquons sur ces flèches, la navigation de l'école vers le haut de la page n'est pas lisse. Ce n'est pas comme si ce que nous avons ici était un exemple. Tu vois, quand je clique sur le, j'ai toujours vu ses écoles tout le chemin du retour en douceur. Mais ici, c'est instantané. Donc nous devons réparer ça. Mais remarquez aussi que lorsque nous survolons sur l'image juste ici pour le logo, il tourne autour comme la roue de la fortune. Droit ? Mais Oz ne fait pas ça. Donc, dans cette vidéo, nous allons résoudre ça à des problèmes comme nous allons ajouter un comportement de défilement très lisse pour nos îles de navigation. Et puis nous allons également ajouter une animation à notre local qui est gérer ce futur de refroidissement premier, Donc c'est très, très facile. Tout ce que nous devons faire est essentiellement de cibler la balise html parce que nous faisons défiler sur une page, les écoles d'heures sur une pizza. Fondamentalement, vous ne ciblez pas un élément spécifique. Tu le prends en gros dans toute la page parce que ton école s'ouvre. Donc, nous allons cibler la taxe HTML Lester. Je vais me diriger vers les parenthèses, puis au sommet du très, très, très haut Bordeaux. Dites html ok, puis ouvrez les accolades de l'université. Et puis la propriété ici sera appelée une école comportementale. Auto est la valeur par défaut. Mais maintenant, mais similaire. Je vais aller avec lisse. Oh, oui, opérateur lisse, allons-y. Maintenant, sauvegardez ça. Revenons pour nous opposer à notre étaient d'abord une page et maintenant vous pouvez voir l'école en vigueur. Oui, c'était vraiment aussi simple que ça. Je suis presque sûr que vous pensez probablement, Oh, il va falloir beaucoup de code pour que nous obtenions cet effet. Mais, hé, ce n'était qu'une ligne, et c'est tout. Donc ajouté avec succès l'école cool en vigueur pour nos flèches de navigation. Mais maintenant qu'en est-il du local ? Comment pouvons-nous animer le logo de sorte qu'il serait Tates quand nous survolons dessus pour animer le logo, je vais devoir vous présenter tout un ensemble de nouvelles propriétés sœurs qui traitent principalement de l'animation. Maintenant, ils sont semblables à la transition supposée de Wilfredo a marché avec dans le passé, mais maintenant ce sera purement l'animation des sens, et je suis vraiment excité. Mais avant d'entrer dans ça, que s'est-il passé exactement ? Donc, quand on passe le curseur sur le logo, il est censé tourner autour. Donc, évidemment, nous savons maintenant devrait créer la classe off hover lorsque l'utilisateur, vous savez, sur l'image qu'il devrait maintenant prendre. Donc, nous allons tout d'abord devoir, revenons à un parenthèses et regardons la section logo, et je crois qu'il devrait être ici. Ok, donc c'est là, juste là. Alors ajoutons-le. Juste souffler la marque. Donc ce que nous allons faire, c'est que nous allons voir la marque dans la classe de la marque, puis passer le vol stationnaire, et ils ne diront pas le logo de la classe du logo. C' est là que se passe la magie. Une lumière. Le premier que je vais dire est le nom de l'animation. Vous devez donner un nom à votre animation ou ça pourrait être n'importe quoi dans mon cas, parce que nous tournons le local, tous ces cool. C' est la douleur. Ok, ça va être le nom de notre animation. Mais maintenant, nous sommes censés fournir la durée. Combien de temps l'animation devrait-elle prendre avant qu'elle ne commence et se termine par la durée totale présumée  ? Donc, je vais voir la durée de l'animation. Dans ce cas, allons-y 1,2 secondes. Ok, alors nous avons aussi celle-là connu sous le nom de fonction de synchronisation d'animation. Fondamentalement, il s'agit d'une transition demi-finale où vous avez Lini A. Vous avez la facilité d'assouplissement est fondamentalement que vous dictez la vitesse de l'animation du début à la fin. Nous voulons demandé Gilenya, donc il commence essentiellement avec la même vitesse se termine avec la même vitesse, non ? Mais il y a aussi une autre propriété, qui est l'animation. C' est le nombre d'orations. Fondamentalement, nous disons combien de fois l'animation devrait-elle se répéter dans notre cas va être infinie parce que revenons ici. Vous pouvez voir en ce moment, tant que la souris tient sur le logo, elle continue à tourner et tourner et filer et filer. Donc c'est infini, non ? C' est donc une Bible choisie, la valeur infinie. Retournons ici. Ce sont donc les valeurs complètes que nous allons utiliser. Cependant, juste pour que vous sachiez, nous pourrions même raccourcir cela, mais je vais vous montrer comment faire ce que je veux donc je ne le fais pas avec l'animation, venons tout le chemin ici. allons créer juste dans une nouvelle section Et nous pouvons appeler cela la section animation. C' est là que la vraie animation commence tout. Alors changeons le nom ici aussi, en mission. Et OK, maintenant la propriété que je vais présenter c'est vous est une propriété extrêmement puissante connue sous le nom de propriété at key frames. Avec cette propriété, nous pouvons indiquer plusieurs animations que l'élément est censé passer du début à la fin. Il est extrêmement puissant, alors vérifiez ceci. D' accord ? Je vais maintenant indiquer le nom de l'animation, qui est spin. Donc, un autre pour les images clés à marcher, vous devez avoir un nom pour l'animation avec prêt à condition qu'il ait spin. Donc, j'ai Espagne accolades. Et maintenant, regarde ça. D' accord, on peut d'abord indiquer que je vais m'ouvrir. Un autre ensemble d'étalonnages est à nu avec moi. Ok, donc à l'intérieur de la première de notre collègue, nous pouvons indiquer le début. Ok, dans ce cas en ce moment va être zéro pour cent c'est un moyen de sortir, indiquant de commencer par la tache physique au tout début, non ? Ce qu'on va faire maintenant, c'est qu'on va transformer le logo. Ours avec moi. On va faire pivoter, mais on commence à zéro degré. D' accord ? Fondamentalement tout l'ouest juste ici est que lorsque nous espérons plus sur le logo et certains des hobos sur le logo commencent à tourner, mais commencer à partir de zéro degrés, puis statue, tourner. Ok, Maintenant que nous avons indiqué le début, nous pouvons maintenant aussi indiquer la fin. Dans ce cas, moment, ce sera 100%, ce qui est fondamentalement maintenant à la toute fin. Et puis nous saurons, disons, transformons. Il va tourner à nouveau. Alésage Maintenant, à la fin de la rotation supplémentaire de 360 degrés. J' espère vraiment que cela a du sens. Fondamentalement, toujours en ce moment est que, au tout début, à 0% lorsque l'utilisateur plane sur la statue de la souris, tourner mais commencer à partir de zéro degrés et puis à la fin de la rotation ont généralement transformé par 360 degrés. C' est exactement ce que ça a. Ne tombe pas à cheval. Donc, mais tous perdent plus de temps. Allons-y maintenant. Sauve ça. Retournons ici. Rafraîchissez la page et voilà. Maintenant, le logo tourne et il est infini. Alors à Bennett, expliquez-lui. Donnons. Permettez-moi de vous donner quelques exemples plus anciens. Ok, revenons ici et juste comme exemple, très, très vite. Jouons avec la situation un compteur, non ? Alors nous allons juste changer celui-ci pourrait dire l'infini. Allons avec trois, par exemple. Ok, donc l'animation va se répéter trois fois, alors actualisons. Et maintenant, nous en avons un, deux et trois. Là, vous allez a après la troisième fois qu'il s'est arrêté. Alors faisons aussi un autre changement. Au lieu de zéro degré, nous pouvons commencer avec peut-être 45 degrés, puis finir. Disons même à 70 degrés, sorte que vous verrez maintenant que le logo qui connaîtra Tate pleinement. Rafraîchissons. Donc maintenant, vous pouvez voir que ce n'est pas tout à fait tournant complètement. Il arrête le à 70 degrés. Comme vous pouvez le voir, il n'est pas 45 puis arrête un à 70. Et voilà. Donc, ce n'est pas seulement la fonction de rotation que vous avez réellement une transformation. Vous pouvez en faire d'autres comme l'échelle d'inclinaison. En fait, faisons l'échelle. L' échelle signifie simplement que vous allez faire le local. Tu vas agrandir l'image. Ensuite, il y a différents types de compétences aussi. Allons avec les trois D donc à partir de trois dimensions, allons-y avec l'échelle de 1,2 ah deux. Et disons aussi. Donc vous allez mettre à l'échelle 1.2 sur le X X est d'y exister deux et Z existe. Et puis la même chose ici aussi. Faisons la même chose. Échelle. Ah, trois D Mais maintenant disons ah, 0,52 et ensuite Ah, 0,5. Ça va être fou. En fait, n' ai aucune idée de ce que je fais. Allons-y et sauvegardons ça. Ça va être une veine, une sorte d'animation folle. Rafraîchissons et ah, eh bien, voilà. C' est l'animation juste là, en fait. Donc, tout ce qui vous encourage vraiment à passer un peu de temps et de vérifier toutes les sortes de transformations que vous pourriez faire. Vous pouvez jouer sur les animations et oh, avant de partir, laissez-moi vous montrer très, très rapidement Le raccourci pour écrire vos propriétés d'animation. Alors revenons à notre logo et ah, c'était bon. Donc c'est juste ici. Donc, la façon dont vous pouvez raccourcir cela très facilement serait juste de dire l'animation. Ok, ce sera maintenant la propriété elle-même. Animation, vous commencez par le nom de la propriété. Ce sera toujours le 1er 1 Et puis nous pouvons voir Ah, une 0,2 seconde. Parce que cela, bien sûr, sera notre temps dans la durée. Et puis nous saurons, disons linéaires, ce qui sera le temps en fonction. Et enfin, on va aller avec l'infini parce que ça va être le compte de la situation. Infini. Voilà, tu y vas. Donc, c'est la façon abrégée d'écrire votre animation là, bien sûr, les propriétés de la nation mère aussi, mais ne vont pas entrer dans cela. Donc, Linda fait défiler ici et a changé les valeurs ici à ce qu'il était. Donc, nous avons eu les rotations et nous avons eu zéro degré, et bien sûr, nous avons eu quel état à nouveau. Et nous avons aussi eu ça à 300 et 60 degrés. C' est bon, ça devrait le faire. Allons-y. Sauve la tête en arrière, Teoh. Factures up renvoie la page. Et là vous allez maintenant pour vous donner un dernier exemple avant autour de cette vidéo, je suis déjà allé de l'avant pour créer un Dave vide très spécial classé ici appelé notre échantillon. C' est juste pour vous illustrer ce qui est possible avec les animations, n'est-ce pas ? J' ai donc cette division appelée Classe of Sample. Et là, je ne pouvais pas les entreprises clés et je l'ai appelé couleurs. C' est ce que vous avez maintenant le nom de l'animation juste ici des couleurs. Mais maintenant, jetez un oeil à cela. D' accord ? J' ai indiqué les différents types d'animations que les autres particuliers Dave doivent passer par. Donc, au tout début, sa couleur de fond est rouge. Et puis, environ 1/4 du chemin à travers l'animation, la cheville du sac devrait changer en noir après un autre quart, ce qui serait à mi-chemin des rideaux au bleu, 3/4 de la façon dont il devient orange. Et puis, à la toute fin, votre langue est de retour pour conduire. Donc, juste là, vous pouvez voir les propriétés supplémentaires ont appliqué avec un 100% de sorte que le Dave occupe le plein avec hors de la page, tête de 100 pixels. Ajout de la position relative. Je vous donne le sac et refroidir rouge ainsi et invité. La division d'admission est de six secondes, mais ils ajoutent également le délai d'édition et d'animation de trois secondes, donc fondamentalement trois secondes devront s'écouler avant que l'animation ne commence réellement. C' est ce que le retard d'animation de notre propriété est. Jetons un coup d'oeil et voyons ce qui va se passer ici. Je vais rafraîchir la page. Appelons et refaisons-le. Alors, laissez-vous voir. Maintenant, il a commencé. Considérez ça. Maintenant, ça change. Il est en train de revenir à l'orange et sont enfin de retour à la tête. Essayons encore une fois. Donc, il commence à Weird et Mission Division of Three Seconds s'est écoulée, pas l'animation, commence noir, bleu, orange et enfin revenir à elle. Donc, ce n'est qu'un exemple de ce que vous pouvez réaliser avec la propriété d'animation hors CSS est extrêmement puissant. Vous pouvez combiner différents types hors propriétés ainsi, sorte que vous n'avez pas à rester avec juste le dos sur Kahlo. Vous pouvez si vous appliquez ceci, par exemple, disons que notre texte, par exemple, vous pouvez changer les panneaux téléphoniques pour financer Attendez la hauteur de ligne tous à la fois utilisent l' animation. Donc, j'espère vraiment que vous avez apprécié cette vidéo que nous avons récupéré, dit animations. Et aussi nous avons ajouté le lisse valide pour la propriété de comportement scolaire. Alors c'est tout. Merci beaucoup de fortune. Je te verrai dans le prochain cours. 71. Ajouter des effets de filtre: bienvenue dans la vidéo précédente est ajouté avec succès ces effet lisse de l'école pour nos liens de cheville, et nous avons également été en mesure d'animer notre logo. Mais si vous avez prêté une attention très étroite, vous remarquerez peut-être que ici sur un modèle dit quand nous planons sur le logo, il y a un peu d'un effet de sang. Vous voyez, juste là, vous voyez l'image que vous pouvez voir très, très clairement. Mais quand vous Hoffer sur l'image en ce moment, il y a un petit, peu flou efficace juste là. nôtre, d'autre part, ou il n'y a pas de coup. C' est clair tout le temps. Donc, ce que je veux est un peu rapide est de vous montrer ou de vous présenter une nouvelle propriété connue sous le nom de propriété CSS Filter, où nous pouvons ajouter des choses comme les effets sanguins, la luminosité, la luminosité, contraste et ainsi de suite. Alors faisons ça. Je vais retourner ici et contrairement à ici où nous avons la classe de vol stationnaire pour le logo, je ne vais pas se filtrer. Et ce droit là est la propriété. Et puis nous avons différentes valeurs pour le filtre. Dans ce cas en ce moment, je vais aller avec le flou d'un pixel qui sera la valeur d'un pixel fait. Allez-y, sauvegardez la tête ici fait référence à la page, et maintenant vous pouvez voir cet effet sanguin juste là. C' est ainsi que vous pouvez y parvenir. L' effet sanguin avec la CIA dit. Mais bien sûr, il y a d'autres valeurs disponibles pour filtrer. Donc, par exemple, laissez-moi aller de l'avant et supprimer le flou et essayons autre chose. D' accord ? Je peux dire luminosité et nous pouvons donner une valeur de pourcentage ici. Peut voir n'est pas comme 200% juste à titre d'exemple. Allons-y, sauvegardez ceci, et si je rentre ici, rafraîchissez la page et que vous allez contre. L' image est maintenant 200 % plus lumineuse qu'elle ne l'était initialement. Vous pouvez faire d'autres choses afin que vous puissiez combiner par la façon dont vous pouvez combiner la valeur. Alors soyons luminosité. Je peux aussi dire flou, puis notre pixel, Donc tout ce que vous devez faire est juste d'ajouter un espace entre vos deux valeurs différentes. Allons-y, sauvegardez ceci, et maintenant nous devrions voir plusieurs effets. Voilà, tu y vas. Donc maintenant, c'est 20% plus lumineux, mais c'est aussi du sang d'un pixel. Une autre valeur très intéressante pourrait ajouter ici. Laisse-moi bouger. Tout cela va être en niveaux de gris. Cela va réellement transformer votre image froide en noir et blanc. Donc si nous disons 100% en ce moment, ils deviendront noirs et blancs. Nous survolons le logo et voilà. Je vous le dis, CSS est étonnant. Et vous penseriez que vous auriez besoin d'un code très avancé pour obtenir tous ces effets. Mais vous ne le faites pas. Voilà, tu y vas. Nous avons maintenant cela à 100%. En fait, je suis Chris pour voir ce qui se passera si on est frères à, disons, 50%. Je suis curieux. Allons dire ça et voir ce qui va se passer. Rafraîchissons et OK, donc c'est 50%. Pas mal, pas mal du tout. Alors revenons ici et revenons à ce que c'est censé être. Donc c'est le filtre Ah, flou. Et puis, bien sûr, sont portés pixel. Et allons de l'avant et sauvegardons ça. Je viens de rentrer ici. Rafraîchissez et voilà. C' est ainsi que vous pouvez créer des effets supplémentaires sur vos images à l'aide de la propriété filter. Merci beaucoup de fortune. Je te verrai dans la classe suivante 72. Examen de la section du projet: Eh bien, c'est ce que nous sommes arrivés à la fin de cette section du projet, et nous avons construit nos cellules. Cette page entièrement usée a été bouleversée par les instances HTML, et j'espère que vous avez eu beaucoup de téléphone, et j'espère que vous avez beaucoup appris sur HTML et CSS. Mais il y a une chose que nous devons encore faire, c'est que nous devons rendre le site réactif dès maintenant. Il a l'air bien sur les arrêts de pont, mais quand vous visualisez ce site sur un téléphone mobile, ou peut-être même sur la table, vous pourriez découvrir que les choses ont été calmes comme elles semblent. Vous pourriez voir beaucoup de colonnes, cette tête de joint. Peut-être qu'un Texas serait trop grand. Ça ne va pas être aussi beau. Nous devons donc nous attaquer à la réactivité. Et c'est exactement ce que nous allons faire dans la section suivante. Je te verrai alors 73. Aperçu de la section conception réactive: d' accord. Juste un accueil officiel à la section réactivité. Et notre objectif ici est de veiller à ce que notre site Web soit aussi bien sur les tablettes et les téléphones mobiles que sur un texte vers le haut. Maintenant, sur le Dexter, ça a l'air bien. Tout semble parfaitement bien tel qu'il est. Mais l'objectif ici est quand nous commençons à minimiser la taille de l'écran. Donc, par exemple, moment, juste ici, ce serait la taille typique de squint sur une tablette et vous pouvez voir en ce moment. Mais tenez à voir quelques changements. Nous ne pouvons plus voir le menu de navigation, mais maintenant nous avons les menus traditionnels de hamburger. Lorsque vous survolez dessus, vous avez maintenant accès aux éléments du menu principal. Et si je commence à l'école vers le bas, vous remarquerez quelques changements dit fourni Maintenant est maintenant deux colonnes avant qu'il ne soit trois en marchant. Ce sont maintenant deux colonnes de l'équipe est maintenant trois colonnes et ainsi de suite et ainsi de suite. Et si je vais jusqu'à la fin à la petite taille d'écran, ce serait celui pour un téléphone mobile. Vous pouvez voir les nombreux changements, dit fourni est maintenant une seule colonne. Pourquoi Walk With Us est également une seule colonne que l'équipe est maintenant deux colonnes. Nos témoignages sont une seule colonne. Il a toujours été une seule colonne sont nettoyés maintenant. Deux colonnes sont supposées quatre colonnes sur la prochaine et, bien sûr, quelques changements dans l'avenir ainsi et sur l'en-tête. Donc, l'objectif ici est de vous montrer comment vous pouvez rendre votre contenu adaptable de sorte que lorsque l' écran, les menaces de l'écran, change le contenu. En outre, la taille du contenu change également les modifications de structure pour refléter qui changent les écrans que c'est le point entier de cette section entière. Alors asseyez-vous, détendez-vous, et j'espère que vous trouverez dans cette section utile. Commençons. 74. Introduction à la réactivité mobile: donc bienvenue à cette nouvelle section. Will va jeter un oeil à la réactivité mobile et avant de commencer à faire n'importe quel code et jetons un oeil à ce que nous avons actuellement. Et en ce moment, c'est exactement à quoi ressemblerait le site sur une tablette. Et essayons de faire défiler vers le bas. Jusqu' à présent, la tête. Ça a l'air bien. On a un logo. Nous avons le menu principal. C' est bon. La section héros est bien sur notre section est toujours bien. Les services fournis sont corrects. Le pourquoi avec mon livre de ces sections. Je pense que nous pouvons améliorer cela en affichant peut-être. Deux colonnes sont supposées quatre colonnes. Ah, tout simplement avec peut-être fait l'équipe nous pouvons faire Mitt L'équipe est trois colonnes au lieu de quatre colonnes. Le témoignage a aussi l'air bien. Les clients ont toujours l'air OK. Contactez-nous très bien. Continuons vers le bas. En fait, allons tout simplement jusqu'à la petite taille de l'écran. Donc ce serait pour un téléphone portable et juste ici la photo. Vous pouvez voir que nous avons besoin d'apporter quelques changements ici. Allons tout le chemin vers le haut. Oui, nos clients, nous pouvons certainement améliorer ici en affichant peut-être les logos sur deux colonnes chacune par opposition aux points focaux que nous avons ici. Témoignages semble en fait bon par défaut. Je ne pense pas qu'on ait besoin de changer quoi que ce soit pour le témoignage. Mais c'est parce que nous affichons déjà les témoignages sur des lignes individuelles. Ils sont juste une colonne ne va pas par opposition aux autres sections qui ont, peut-être, comme, comme, deux colonnes, trois lignes et ainsi de suite. Donc définitivement en place. Désolé pour ça. Rencontrez certainement l'équipe. Doit être considérablement amélioré sur le mobile. Notre taille d'écran. Vous pouvez voir maintenant. Cela n'a pas l'air bien du tout. Continuons à monter. Oui, je marche. Ça a l'air terrible. Le combat sensé. Il a aussi l'air terrible. Donc probablement ici devra afficher deux colonnes. Ou peut-être même une seule colonne devra attendre et voir. Oui. Ah, qui nous sommes. Ce que nous faisons devra aussi être des colonnes simples. Et bien sûr, la tête. Ah, eh bien, nous devrons apporter des améliorations majeures ici. Surtout le menu, comme vous pouvez le voir. Et c' est, idéalement, idéalement,à quoi ça devrait ressembler. Pour que vous puissiez voir. moment, nous avons le menu, et il n'apparaît que lorsque nous survolons sur l'élément de menu, vous pouvez voir en ce moment vous pouvez voir tous les sont nombreux éléments ici. Défilons vers le bas et voyons ce que nous avons d'autre pour que vous puissiez voir comment ils sur toute la section est qui nous sommes, ce que nous faisons. Donc, les services fournis que vous pouvez voir en ce moment est une seule colonne A. Chacun semble beaucoup mieux de cette façon. Même avec pourquoi marcher avec nous fait l'équipe est dans deux colonnes H et témoignages et clients. Les conséquences en deux vient par opposition aux quatre, et le reste reste reste le même, sorte que ce sont les améliorations devront faire. Mais avant de sauter dans le codage réel, laissez-moi vous montrer comment vous pouvez ajouter vos tailles d'écran. 75. Créer les points de pause: Eh bien, reviens. Alors parlons maintenant des tailles d'écran, comment nous pouvons cibler la taille des squints pour une tablette et aussi comment nous pouvons le prendre Est-ce que la taille de la reine pour un appareil mobile ? Un téléphone ? En gros. Donc, nous avons cette chose appelée points de brique quand il s'agit de réactivité CSS et un point de rupture est défini par quand il y a un changement majeur de notre style. Donc ce que je dis, c'est bien ? À ce stade, tout reste le même, est-ce pas ? Même si je fais défiler vers le bas, vous pouvez voir que le contenu est à peu près le même à structurer. C' est à peu près la même chose qu'à pleine taille. Mais alors si nous continuons à minimiser la taille de l'écran et alors il arrive ici. Donc ici, juste là où vous avez le Hambourg, en Allemagne, ici, c'est ce que nous appelons un point de rupture. Il s'agit de la taille de l'écran particulière où un nouveau changement de design s'introduit. Et vous pouvez, bien sûr, que le changement aurait maintenant un menu hamburger. Si nous faisons défiler vers le bas, vous pouvez voir en ce moment que violet sensible est maintenant fondamentalement deux colonnes dans chaque rangée, et vous avez d'autres changements ici aussi, avec marche blanche avec nous et l'équipe. C' est ce que nous appelons un point de brique. Donc, ce que nous allons faire ça dit réactivité, c'est que nous allons indiquer que, une fois que , l'écran, qui est cette taille d'écran, initiera ces nouvelles modifications de conception et ensuite si nous continuons à minimiser l'écran, continuons à continuer. Continuez à continuer. Pas de changement, pas de changement, pas de changement. Et puis tout à coup ici, il y a une autre grande, parce que maintenant vous pouvez voir le sens fourni n'est pas une seule colonne ainsi que quelques autres sections ici. Donc il va y avoir un autre point de rupture. Donc idéalement, vous devriez avoir un minimum de deux points de pause. Un serait pour votre table. C' est la taille de la reine, et l'autre serait pour votre téléphone portable taille de notation. Mais vous pouvez aller à ses trois plus hauts, ou peut-être même pour nos différents points de rupture. Tout dépend du type de contenu que vous possédez et de son apparence. Alors voici la Faneca. Allons-y et ajoutons les gaufrettes. Cause 0.4. C' est la taille de la reine autour de cette plage particulière qui est d'environ 1000 et 24 pixels. Alors faisons ça. Je vais y aller. Allons au Maine à CSS. Allons tout le chemin ici et je vais attraper. Il y a du contenu parce que nous créons une toute nouvelle section. Je vais accélérer ça et on pourra appeler ça. Appelons juste les lettres mobiles appelées sa réactivité, au lieu de cela, réactivité. Et maintenant, nous allons pouvoir dans une nouvelle ligne. Et ici, je vais dire, Ajoutons un nouveau commentaire. Ah, quatrième slash hystériques et maintenant je vais froid est le point de rupture des comprimés. Très bien, donc une autre barre oblique hystérique et maintenant voici le code réel pour créer une pause quand on va dire à Media, puis sur l'écran Lee, et on va maintenant s'asseoir dans le max avec. Donc, tant que ce contenu est vu sur une taille maximale d'écran de 10 24 initiatives pixels , nouveaux changements, je vais devoir ajouter les accolades de collège juste là. Alors c'est tout. Nous avons créé la première table 14, mais maintenant nous pouvons faire exactement la même chose encore une fois. Tout copier Solyndra ici une copie Venez ici coller à nouveau et puis a changé tablettes pour Allons avec notre téléphone. Et maintenant ici, nous pouvons changer la taille de l'écran à 768 pixels. Maintenant 10 24 pixels et 768 pixels sont en quelque sorte comme les tailles d'écran standard sont une taille d' écran plus petite pour 76 Ce serait notre 4 80 C'est, si vous voulez aller cela. Je pense que c'est vraiment l'écran minimum, dit que l'on peut réellement cibler pour 80 pixels. Mais pour les besoins de cette cause, nous allons créer deux points de rupture, soit 10 24, puis 768 pixels. Donc ce serait pour les appareils Taylor. Ce serait pour le téléphone, notre appareil mobile. Donc, c'est tout pour créer sont des points de rupture. Allemand Advantix Video disponible maintenant commencer à appliquer quelques modifications de conception réactives avec CSS 76. Créer l'en-tête partie 1: Eh bien. Comebacks dans une vidéo précédente est créé avec succès nos points de rupture pour notre design mobile . Alors maintenant commençons à créer nos changements CSS pour la réactivité. Et la première fois dans une cible sera le mobile. Beaucoup, qui est généralement l'une des parties les plus difficiles de la réactivité amable. Donc, en ce moment, c'est à quoi ressemble le nombre qu'il ne change jamais de tableau Essayer de faire est d'obtenir le plus de ressembler exactement à ceci. On a donc trois barres. Et quand on tient ces trois dollars, c'est à ce moment que les éléments du menu apparaissent maintenant. Mais notez également qu'à la taille plein écran, nous ne voyons pas ces barres. Ils ne sont pas là. C' est sur Lee. Quand nous arrivons à un ensemble dans la taille de l'écran, c'est là que c'est ici. C' est là que les trois barres apparaissent, puis le menu normal disparaît. Alors, comment allons-nous obtenir cet effet ? Eh bien, la première des minutes faire en ce moment est de créer huit ces trois barres. Créons-les tout d'abord. Ok, donc voilà ce qu'on va faire. Regardons en arrière pour maintenir CSS et nous allons faire est de nous diriger vers l'index point html et puis juste ici. Juste en dessous de la classe des hommes de la Naff. C' est là que nous ajouterons ces trois, patron. Donc, pour faire ça, regarde ça. Comme si je vais dire la classe Dev. Et appelons ça. Ah, appelons cette poignée. Ok, tu peux appeler cette poignée. Ce sera le nom du menu hamburger. Fondamentalement, allons-y et fermons ça. Maintenant, à l'intérieur de cette classe de poignée, ils vont ajouter trois dibs. Trois vies vides, en fait. Alors faisons ça. Donc ça va être le 1er 1er le 2e 1 et, bien sûr, 1/3 1 parce qu'on en a trois. Patron, c'est ce qu'on a trois vies vides. Alors allons-y maintenant et sauvegardons ça. Et bien sûr, si nous avions de retour à notre Broza, nous ne le verrons pas parce qu'il est vide. Il n'y a rien que tu vois. Alors revenons au Maine que CSS et puis d'ici, allons tout le chemin vers le haut et regardons la section de menu et c'est juste ici. Alors laissez-nous faire ça. Ok, allons-y maintenant et ajoutons un peu de style à ces creux vides. Et qu'est-ce qu'on essaie d'accomplir exactement ? Eh bien, jetons un coup d'oeil. D' accord ? C' est ce que nous essayons d'accomplir. Donc, chaque jour de maintenant, comme vous pouvez le voir a un fond Kahlo. Il semble avoir son état défini avec une hauteur définie, et il y a aussi une marge pour séparer les trois lignes. Alors faisons ça. D' accord ? abord, je vais dire, voici ciblons le menu, puis la poignée de points, puis la div. Bon, donc nous ciblons les creux vides maintenant. Donc, la première annonce rentable va être le fond. Kahlo et moi avons ma couleur Bragan ici réglé sur ah E cinq c cinq e cinq. Et maintenant, nous avons un avec chacun. Dave a une largeur de 22 pixels, puis très courte hauteur de deux pixels. Et puis ajoutons aussi une marge, cinq pixels et zéro. Ok, allons-y pour sauver ça. Retournons à notre Boza. Allons élargir ça. Nous allons faire référence à Page et là vous allez. OK, donc pour une raison quelconque, cela va plein avec pas sûr de ce qui se passe. Retournons ici. Oh, je suis désolé. Je n'ai pas orthographié correctement. Ah, oui, que c'est le genre de chose qui arrive quand vous codez. Et nous avons appelé des vidéos en même temps. Je m'excuse. Donc avec 22 pixels, revenons ici. Fait référence à Page et là vous allez. Ok, donc maintenant vous pouvez voir que nous avons maintenant le menu des hamburgers apparent. Impressionnant. Mais nous avons besoin de l'identité. Les nombreux articles ici à droite. On doit mettre le menu à droite. Donc, évidemment, ce moment, vous devriez penser à flotter. Nous allons donc faire couler le menu sur la droite. Alors faisons ça. D' accord ? Je vais rentrer. Deux principaux que CSS. Mais maintenant, nous allons cibler la prise principale de Dave dans les trois plongées. Et bien sûr, ça va être la classe hors de la main. C' est la classe. On va flotter à la lumière. Alors faisons-le ici. Je vais dire poignée de points de menu. Et puis juste ici, juste comme ça, je vais dire des flotteurs aux lumières. Ok, allons-y. Enregistrez ceci et voyons à quoi cela ressemblait à rafraîchir. Et voilà. Ok, donc maintenant vous pouvez voir qu'il est là-bas à la lumière, mais nous ne voulons pas encore l'afficher. Donc, nous voulons cacher le menu. Le menu hamburger Jusqu'aux scrimmages, la taille de l'écran de nos tablettes devra utiliser quelque chose comme ça. Jouez aucun. Mais nous allons également utiliser la position relative parce que nous allons positionner les éléments de menu . Ces nombreux éléments ont commencé à les positionner, absolument. Donc, nous allons devoir créer un point de cheville. Tout ce que nous pouvons ajouter le hamburger beaucoup de personnalité de et en faire le point d'ancrage pour les moindres articles. Donc des leçons que je vais retourner ici. Donc je vais dire que cette pièce n'est pas pour le cacher. Et puis ajoutons la position pour relative parce que nous allons créer. Nous allons l'utiliser comme point d'ancrage pour nos menus. Ok, c'est cette poignée. Maintenant, passons à notre section responsive et puis ici, nous allons maintenant voir où nous devons 10 dans le football maintenant voir, afficher la poignée de menu comme un bloc, donc fondamentalement faire le contraire maintenant parce que ici cela va contrôler le vue pour l' appareil mobile pour les tablettes sera donc simplement dire Bloc, Donc essentiellement allé il y avait dit, Veut l'écran, qui est un maximum avec attention pour les pixels, afficher la poignée affichée comme un bloc. Maintenant, notez que sauf si nous venons ici pour le téléphone et puis écraser ce style de particules , quels que soient les styles que nous incluons pour l'écran de lettre dit, sera automatiquement hérité par ce petit cul coïncide juste pour que vous le sachiez. Donc, il n'est pas nécessaire que nous venions ici et aussi exactement à la même chose. Il n'y a pas besoin de ça. Alors allons-y. Sauvegardez ça. Retournons ici. Rafraîchissons. Et maintenant, si nous minimisons la reine maintenant, vous pouvez voir que nous avons le menu qui apparaît juste là. Vous pouvez voir qu'il est maintenant apparent génial. Cependant, nous avons maintenant besoin de faire flotter notre menu principal sous le hamburger. Beaucoup de choses comme ce que nous avons sont ici, comme vous pouvez le voir. Donc, la chose est en ce moment, la seule raison pour laquelle nous avons les nombreux éléments de nombreux articles par défaut sont des éléments de bloc. Mais la seule raison pour laquelle ils montrent qu'il y a des blocs de terre, c'est parce que notre flotteur leur est appliqué. Vous voyez, ici, nous avons flottant à gauche. Donc, si vous retirez le flotteur gauche maintenant, vous pouvez voir là apparaître maintenant comme ils tirent. Mais nous pouvons également appliquer la propriété hors texte aligner, comme vous ne pouvez pas, comme vous pouvez le voir. Donc maintenant, nous sommes prêts à ressembler exactement à ce que nous avons ici. Les éléments de la liste, mais le texte sont mentis à la lumière, puis aucun flotteur. Alors allons de l'avant et appliquons ces changements ici. Je ne vais tout simplement pas dire menu, puis Ally, et ensuite on va dire flotteur. Aucun. Mais Daniels ont aussi un texte aligné vers la droite. Allons-y maintenant, Sauvegardez ça. Retournons ici. Rafraîchissons la page. Désolé, longue, longue page. Rafraîchissons cette page et voilà. Impressionnant. Donc maintenant, nous avons nos éléments de menu ressemblant à des éléments de bloc, prend une ligne à la lumière. Donc tout ce que nous devons faire maintenant, c'est de trouver un moyen de les positionner pour qu'ils apparaissent juste sur le menu des hamburgers de la Navy. Mais puis Onley apparaissent quand nous ho var sur notre humble menu obtenu. Donc, nous allons aborder cela dans la vidéo Vertex 77. Créer l'en-tête mobile partie 2: bienvenue à la deuxième partie pour le style dans notre tête mobile. Aussi donner avertir, nous avons été en mesure de faire un bon travail Jusqu'à présent, nous avons été en mesure d'obtenir le hamburger, beaucoup à afficher une seule fois, ce qui est une taille d'écran de 10 24 pixels comme il est en ce moment sur la technologie Stop, il est parfaitement bien. Mais puis, une fois que nous obtenons dents, sont déposés vue. C' est ce que nous avons actuellement. Donc, ce que nous devons essayer d'accomplir maintenant est de trouver un moyen de masquer tous les éléments de la liste de montrer. Fondamentalement, on va devoir en parler sous le menu des hamburgers et ensuite Onley les montrer quand on souris sur le menu des hamburgers. Donc, comme je l'ai laissé entendre dans une vidéo précédente, nous avons déjà fait la position du menu hamburger relative parce que nous allons absolument position sont les moins éléments. Alors faisons tout d'abord ça. Ok, je vais aller ici et inviter ici. Voyons voir, juste au-dessus ici, je vais dire menu point et puis vous l ok, et maintenant disons que la position va être sel application. Ok, allons-y. Sauve ça. Voyons maintenant le changement. Actualiser. Et voilà. Ok, donc maintenant vous pouvez voir qu'il est positionné. Absolument. Mais alors vous pouvez aussi voir que c'est fondamentalement maintenant sortir hors. C' est la limite pour l'élémentaire. Et ouvrez ça une seconde. Donc maintenant, nous devons faire défiler ici jusqu'au blanc pour les voir. Donc, la façon dont nous pouvons nous assurer qu'ils ne sortent pas de la frontière pour l'humble gouvernement est simplement de sauver la lumière zéro. Alors faisons ça. Je vais retourner ici. Deux principaux qui cesse et inviter ici. Je vais sauver zéro droit. Ainsi, cela verrouillera les éléments de position absolue dans la bordure. Retournons ici avec du frais. Et voilà. Génial. Donc maintenant, nous avons les éléments de menu, position absolue juste là à la frontière, large du hamburger, beaucoup génial. Donc la prochaine étape en ce moment serait de trouver un moyen de cacher les nombreux objets et ensuite Onley les montrer quand on est sur le hamburger. Beaucoup pour que nous puissions le faire. Bon, revenons ici pour qu'on puisse dire le juste ici. Mais nous avons notre menu ul. On peut juste dire que ce jeu n'est pas. D' accord ? Et maintenant on peut dire « show ». Donc c'est sur le menu, le menu. Et puis quand nous survolons sur un menu maintenant pour l'U L afficher le, um Ok, malgré le moins d'éléments affichés comme un bloc, à droite. Donc, par défaut, nous allons cacher notre liste. Éléter l'avis de poignée. Au fait, ils gèrent les classes. Celui qui affiche les trois barres. Il y a donc cet avion comme un bloc. On ne parle pas de ça. Nous parlons de la moindre tentative réelle eux-mêmes, qui est la classe UL. D' accord, donc c'est celui que nous avons vu n'afficher aucun. Mais maintenant affiché comme un bloc sur l'ensemble, sur notre hamburger. Beaucoup. C' est exactement ce que les yeux se passent ici. Alors allons-y. Sauve ça. Il y a la tête ici pour d'abord une page et attendons et voyons. Bon, pour qu'ils puissent voir qu'il a disparu. Le Hambourg, en Allemagne, est toujours là. Mais quand nous survolons le menu des hamburgers, maintenant vous pouvez voir que nous avons maintenant la liste. Les objets sont Pierre comme ça. Regarde ça. Bêche. C' est génial. Ah, tu y vas. Ok, donc, être presque là, mais la note est une chose que je ferais quand on voit sur les éléments de menu la façon subtile qu'il apparaît est comme si c'était une transition en cours. D' accord. Tu vois ça ? C' est très, très, très lisse. Ce n'est pas comme ce que nous avons. Ah, je suis désolé. Laisse-moi remettre ça. Ce n'est pas comme ce qu'on a ici là où c'est instantané. Il y a donc un effet de transition en jeu ici, mais les transitions ne fonctionnent pas sur la propriété d'affichage. Donc, fondamentalement, nous pouvons dire affichage de transition et facile. Et il est sorti des trucs. Je sais que ça ne marchera pas. Alors, comment pouvons-nous appliquer l'effet de transition tout en restant masqué dans les nombreux éléments ? Et puis sur Lee les montrant loin ho sur le menu de navigation Mais nous pouvons faire est simplement de changer l'affichage à une autre propriété connue sous le nom d'opacité. D' accord, mais on a cette pièce. Je vais changer l'affichage ici à l'opacité, puis pour venir à ne rien montrer, je dirai l'opacité. Zéro qui va essentiellement cacher les éléments de menu et puis juste ici. Lorsque nous ho sur un menu, les éléments me permettent de changer d'affichage ici aussi, retour à la capacité. Et puis au lieu de zéro, nous en avons maintenant un. Ok, allons-y, sauvegardez ça. Actualisez la page et dit qu'elle peut voir En ce moment, les effets n'ont pas encore été lancés parce que nous n'appliquons pas la transition. Mais vous pouvez voir qu'il est toujours fondamentalement marcher de la même façon Les nombreux articles n'ont pas montré jusqu'à maintenant, sur le menu hamburger. Ok, alors allons de l'avant et ajoutons l'effet de transition. que je vais le faire là où on a beaucoup de vous ? Eh bien, tous ceux qui viennent ici et disent l'opacité de transition. Et maintenant, on peut ajouter que c'est 0,5 seconde. Et puis la fonction de synchronisation ici serait facile à sortir. Ok, allons-y. Sauve ça. Retournons à l'intérieur. Ici fait référence à la page, et maintenant vous pouvez voir l'effet de transition apparaissant. Cependant, vous pouvez remarquer un autre changement légèrement dans ce que même avant d'arriver au hamburger. Lorsque vous pouvez voir le menu, les éléments commencent à afficher essentiellement veut, les montures entre dans les témoignages, tous avec la zone que vous pouvez voir une fois qu'il arrive ici, toutes les premières tentatives commencent à montrer. Donc c'est quelque chose que nous devons réparer avec une seule liste de tentatives de montrer quand nous avons vraiment trouvé sur le panier. ai beaucoup. Donc, pour réparer ça, je vais vous présenter à nouveau l'inspecteur. Alors faisons ça. D' accord ? Tout d'abord, nous assurons que par défaut ces gars, nous ne les voyons même pas. De quoi je parle ? Faisons ça. D' accord ? Je vais retourner ici à l'IES et en fait à l'UL. Désolé. Faisons ça. D' accord ? Je vais supprimer l'opacité afin qu'ils soient toujours affichés par défaut. Mais maintenant essayons de cacher ces éléments de liste sous le menu hamburger. Ce que nous pouvons faire est d'introduire une position supérieure, mais ensuite en négatif ou, disons, 100 pixels à titre d'exemple. Alors pourquoi voyez-vous que nous ne voyons plus à propos. Donc si nous continuons à augmenter, augmenter, augmenter, augmenter, voir qu'ils disparaissent. Disparitions, apparences, apparaissant disparaissant. Allons jusqu'au bout, Teoh. Voyons voir. Ok, passons à peu près à l'étranger au pixel. Donc, 100 pixels négatifs seront par défaut. Masquer les éléments de menu. Bon, refaisons-le. Je vais retourner ici et faisons ça. Je vais dire Tup Negative. 400 pixels. Ok, allons-y. Maintenant, sauvegardez ça et je reviens ici. Rafraîchissons la page. Et maintenant remarquer que lorsque nous survolons ici, nous ne voyons plus les éléments de menu expliquer, parce que nous avons déjà poussé tout le chemin vers le haut à l'extérieur du navigateur, cependant, même re maintenant sur le hamburger. Manu, on ne les voit toujours pas parce qu'ils sont toujours à 400 pixels négatifs. Alors maintenant, nous devons dire que lorsque nous survolons sur le menu hamburger, changer la position supérieure de la classe UL. Donc moins, je vais présenter à l'inspecteur une fois de plus et faisons ça. Ok, je vais aller à la classe des hommes, vous et là où vous avez Hall of Je vais cliquer sur Hope et ensuite forcer l'état stationnaire. Ok, donc cela va maintenant montrer tous les CSS disponibles quand nous avons notre dans le menu et nous sommes spécifiquement cibles dans l' élément U. L. L.a survécu Ici, vous avez nos meilleurs pixels de financement ici. C' est là que nous planons sur le, euh je suis, je ne vais pas dire haut. Ah, disons peut-être 20 pixels. Ok, donc maintenant vous pouvez voir qu'ils font 20 pixels. Will, en fait afficher les éléments de menu correctement. Donc 20 pixels, peut-être 25 pixels. Maintenant, je pense que quand c'est très bien. Donc, juste comme ça, quand ils survolent, possédait un menu hamburger, changer la position supérieure de 100 pixels négatifs à 20 pixels. Alors allons-y et faisons-le. Je vais retourner ici et très simplement, juste ici. Je dirai juste les 20 premiers pixels. Allons-y. Garde cette tête ici. Actualisez la page. Et voilà. Nous avons créé avec succès la viande de hamburger dans ce que nous avons ici. Comme vous pouvez le voir, je suis désolé pour ça. Laisse-moi remettre ça ici. Et ah, c'est à peu près tout. Donc la seule différence majeure ici est bien sûr, les marges Vous pouvez voir ici. Nous n'avons pas vraiment de marge. Donc peut-être que nous pouvons aussi changer la marge. Peut-être aussi poussé vers le bas le menu hamburger un peu. Vous pouvez voir qu'il est un peu plus haut que le logo. Appliquons donc quelques changements ici. Je vais retourner et je vais simplement cibler la classe de menu. Donc, dites menu et puis legis sur une marge supérieure. 32 pixels ont maintenant testé ce bateau. Donc, je sais ce travail de sorte que les deux pixels Allons de l'avant. Sauver la tête de retour aux rebelles sont se réfère à la page et l'ego. Maintenant, vous pouvez voir que le menu hamburger s'est décalé vers le bas et est maintenant aligné sur tous les logos. Ok, quelques changements supplémentaires Remarqué que lorsque nous survolons les nombreux éléments ici, vous pouvez voir que le curseur se transforme en un point sont et alors nos éléments de liste n'ont aucune marge. Alors allons-y et réparons ces deux favoris rapidement. Je vais retourner ici. Allons tout d'abord tout le chemin ici où nous avons la poignée et je vais dire ici que le curseur sera notre pointeur. Ok, et puis on y va. Venez jusqu'ici et nous allons supprimer les marges de nos articles de liste. Donc, la marge est zéro. Cependant, laissez-moi noter maintenant que lorsque j'ai rafraîchi la page, nous allons tout d'abord tester le cristal pour que le cristal fonctionne. Mais maintenant, vous pouvez le voir parce que nous avons supprimé les marges. Les plats du menu sont maintenant bombardés à la frontière de Hambourg, en Allemagne, du bar de Hambourg, en Allemagne. Donc nous devons les pousser vers le bas. Voyons donc quelle valeur nous pouvons leur donner. Retournons ici à la classe U A. Retournons ici à la classe U A. Donc d'accord, alors à la place , sur les 20 sont des pixels limités stooges. Eh bien, vite, parce qu'au lieu des 20 pixels que nous avons ici, peut-être que nous pouvons réduire ça pour ça à, disons, 30 pixels. Mais je pense que les pixels seraient très bien. Allons-y et changeons ça. Je vais changer 20 pixels ici, 2 30 pixels de la tête de sécurité ici pour la première fois la page. Et voilà. Qui nous avons finalement été en mesure de finir notre bâtiment sur le Hambourg, Allemagne. Italie aux coûts sont plus de 20 minutes pour y parvenir, mais j'espère que vous n'avez pas de techniques de ville impliquées dans la création de vous-même un hamburger beaucoup. Merci beaucoup. Vidéo chanceuse. Et comme toujours, si vous avez des questions sur quelque chose de secret jusqu'à présent, faites-le moi savoir. Méchevin. Mieux vaut y répondre aussi vite que possible. Merci beaucoup. Je te verrai dans le prochain cours. 78. Réceptivité des comprimés: bienvenue. Alors continuons avec les changements réactifs et auparavant nous avons été en mesure de créer le menu hamburger et il semble bon. Je pense que cela semble bon sur toutes les tailles d'écran. C' est parfaitement bien. Cependant, Commençons à faire défiler vers le bas et jeter un oeil à ce que nous pouvons changer d'autre. La section héros semble parfaitement bien. Je ne pense pas qu'on ait besoin de changer quoi que ce soit ici. Ah, nous allons nous rafraîchir à propos d'une section semble bien. En outre, pas besoin de changer de services. Donnez des regards morts. Ok, essayons de rendre ça un peu plus petit parce que, rappelez-vous, nous sommes des cibles dans une portée. Essayons donc de rapprocher aussi près de 7 60 pixels. C' est possible. Remarquez le décideur avec la taille hors de l'écran le jour droit que je minimise , minimise, donc nous allons obtenir aussi près de 7 60 pixels. C' est possible, et vous pouvez le voir. Et ici ? Ça commence à avoir l'air plutôt mauvais autour des 7 90 pixels Lynch qui a l'air vraiment mauvais. Donc, ce que nous pouvons faire, c'est que nous pouvons créer ou modifier la structure pour devenir nos deux colonnes, par opposition à trois. Ok, donc nous devons faire un changement pour les services fournis. Pourquoi ? Marcher de ceux-là ? Certainement. Nous devons faire des changements. Eh bien, peut-être deux colonnes au lieu de quatre minutes. L' équipe peut aller à trois colonnes. Témoignages va bien. Les clients devraient aller à peut-être deux colonnes sur les trois colonnes B. Je vais nous voir et nous contacter. C' est parfaitement bien. Alors changeons. Tout d'abord les services fournis. Bon, donc pour faire ça, je vais rentrer ici. Note. On est toujours sous la section tablette. Alors lumière ici, ajoutons un commentaire, et je vais les appeler la liste des services. Ok, alors qu'est-ce qu'on fait ici ? On va parler de ces cours de services, et ensuite ça va être une liste de tirets. Et maintenant, notez. Ou tu te souviens de ça dans la section des services ? Non. Il essayait de cibler les éléments l i directement à l'intérieur de la classe de liste de services. Ce sont les éléments aériens qu'ils veulent au sommet. Comme si les hommes ciblaient les enfants alliés ici. Celle-ci est à l'intérieur d'une autre règle. Nous voulons seulement cibler ce ls particulier parce que ce sont ceux qui contiennent le contenu réel . Vous pouvez voir leur ancien H trois le titre de chaque service particulier de développement , puis l'enfant liste haute temps sous chacun. Donc, ce sont les Alliés qui veulent obtenir ce particulier ici, celui-ci, celui-ci et ainsi de suite. Nous devrons donc utiliser la grille et le symbole pour cibler directement les alliés qui sont sous la classe de liste de services. Donc on va retourner ici et on va dire plus grand que LI. Et maintenant on va changer le avec pour Allons-y avec le pied 9%. Nous devons cependant être prudents, cependant être prudents, car je crois que nous avons également ajouté quelques marges. Appelons poids apparaissent sur le pont, arrêter vue et voir. Très bien, donc c'est la section des services et de la lumière ici. Vous pouvez voir l'initiale avec restera 2.3, puis nous avons des marges en haut, puis à gauche. Nous avons 1%. Donc, pour être sûr, allons-y avec peut-être 48,5 contre 49% moins bon pour les 8,5%. Donc, nous avons assez de place pour sont la marge. Allons-y maintenant. Sauve ça. Retournons ici. Faisons allusion à Page Ah, faisons défiler ici et voilà. Donc maintenant, il a l'air beaucoup mieux. Et même si nous allons très, très près de 7 60 pixels, il semble toujours parfaitement bien. Nous avons une colonne sur debout seul, mais il n'y a rien que nous puissions y faire parce que nous avons neuf colonnes. Donc, il n'y a aucun moyen de diviser sur neuf colonnes sont également. Ça n'arrivera pas. Mais c'est parfaitement bien tel qu'il est. Oh, allons en bas ici. Nous avons la marche du vin avec nous. Ok, ça doit changer. On doit amener tous les Colombiens à partir. Peut-être 49 ou peut-être 40,5 % sont essentiellement deux colonnes dans la nature. C' est ce que nous essayons de cibler ici. Cependant, si vous vous souvenez ici où nous avons là-bas, pourquoi nous ? Nous avons utilisé le tiret d'appel sur le tiret pour la classe et nous avons donné cette classe je crois avec 24% de quelque chose comme ça. Donc, tout ce que nous avons vraiment à faire ici, c'est juste de changer la largeur de cette classe en particulier à peut-être 48,5 % et nous devrions aller bien. Alors faisons ça. Je vais revenir ici et puis juste au-dessus du service, apathique crée une autre section, appellera ses mises en page, changera l'esthétique. Donc on va le prendre appelé Dash 1-4 et maintenant on va changer à 48,5 % juste pour être du côté sûr. Allons-y. Sauve ça. Retournons ici. Fait référence à la page. Faites défiler ici et OK, alors laissez-moi juste vous montrer une erreur commune que les développeurs font. Commençons à étendre cela un peu plus loin jusqu'à la détention. Ok, donc, comme, maintenant, ça a l'air parfaitement bien, non ? Et vous pourriez penser à vous-même Oh, ça a l'air bien sur cette taille d'écran, donc ça devrait aller maintenant, non ? Cependant, lorsqu'il s'agit de tester la réactivité, vous devez toujours tester les plages pour chaque point Brit. Donc, dans notre cas en ce moment sont le point de rupture est actuellement 10 24 à environ 7 60 Nous devrions tester notre conception aux deux points de fin. Droit ? Donc à 10 ans. 24 qui est autour de Ah, ici. C' est 10. 24. Ça a l'air bien, non ? Mais alors que nous commençons à nous rapprocher de 7 60, nous commençons maintenant à remarquer un problème majeur ici. Notez maintenant que la troisième colonne exécuter efficacement est maintenant plus bas. Si nous continuons, minimisant, minimisant à nouveau, tout d'un coup, c'est maintenant de retour à l'endroit où il est censé être. Mais alors, si nous obtenons maintenant le son le plus proche 60 il est possible que nous ayons encore une fois le problème. Alors que se passe-t-il ici ? Pourquoi les hauteurs fluctuent-elles ? Et pourquoi ça va descendre ? Bien. Je descends. Eh bien, c'est simplement parce qu'à ces différents points, le champ de recherche a une ligne de texte supplémentaire par rapport à la colonne de données analysée. Remarquez le droit ici en ce moment, par exemple, nous progressons pour leur propre ligne de texte supplémentaire. Mais alors, si nous agrandissons maintenant, vous pouvez voir le nombre de lignes pour le domaine de recherche et l'analyser tout de même. C' est pour ça que ces deux blancs sont en quelque sorte équilibrés, non ? Mais puis vous développez et puis encore ici, la même chose se reproduit exactement. Donc la raison pour laquelle nous avons ce problème. En plus de cette ligne supplémentaire est parce que nous flottons les colonnes. Gardez à l'esprit quand vous flottez dans le coma, vous flottez un élément. Il y a toujours la possibilité que vous pourriez briser la structure naturelle. Mais rappelez-vous, nous avons aussi parlé de la propriété claire. Nous pouvons utiliser le Clipper Party pour empêcher de tels problèmes de se produire. Mais voici un mince. Comment pouvons-nous savoir lequel de ce Columbus était censé cibler ? Ça ne va pas avoir de sens pour nous de venir dire, OK, eh bien, eh bien, prenons juste toutes les colonnes de la section parce que dans ce cas, connus, les colonnes flotteront. Mais nous voulons que des touffes flottent alors que nous voulons que les autres ne flottent pas. Donc il était exactement ce qu'on allait faire. Nous devrions cibler les colonnes vers la droite, dans ce cas, vers la droite de celles dont la structure a été brisée dans ce cas en ce moment. Appelez-le 40 en passant, je pense que je l'ai dit plus tôt que Vision exécutée il y avait 1/3 colonne. C' est en fait la quatrième colonne. Mon plan d'erreur est la troisième colonne. Donc, dans ce cas, et vous pouvez voir que la quatrième colonne est celle qui est affectée. En tant que tel, nous voulons effacer la colonne à sa lumière. Donc, fondamentalement, nous allons effacer la troisième colonne, qui est planifiée à l'avance et aussi à l'avenir. Si nous avons décidé d'ajouter des colonnes supplémentaires, peut-être deux autres colonnes. Je peux vous garantir qu'il est possible que la sixième colonne soit affectée. Donc, dans ce cas où vous voudriez le prendre. La troisième colonne La cinquième colonne, La septième colonne, neuvième colonne, la 11e colonne et ainsi de suite. Ce sont les colonnes. Vous, il cible dans ce genre particulier de scénario. Mais comment on fait ça ? Comment ciblons-nous la troisième colonne ? La cinquième colonne sept et ainsi de suite. Eh bien, je vais vous présenter dans le nouveau sélectionné connu sous le nom de l'enfant final sélectionnable. Allons ici et voici exactement comment ça va marcher. Je vais d'abord m'asseoir. Appelez Dash 1-4 et maintenant Coolum et se termine maintenant Enfant. C' est ici le sélecteur que nous pouvons utiliser pour cibler des éléments spécifiques dans n'importe quelle structure, mais nous allons après le 3ème 5ème 7ème et ainsi de suite. Donc je vais vous présenter cette formule pour finir plus un. Je sais que ça ressemble à un grec, mais ne vous inquiétez pas. Je vais vous expliquer ça maintenant. Fondamentalement, ce qui se passe ici, c'est que nous avons créé une boucle. Tu vois cette fin juste là ? Il commencera avec une valeur off zero. Donc, fondamentalement, le tout premier élément que nous allons cibler serait le temps zéro plus un, ce qui serait essentiellement zéro plus un, ce qui serait le tout premier élément. C' est très bien. Mais alors la fin va maintenant se tourner vers un. Donc maintenant il sera deux multiplié par un un plus un, qui sera trois animaux 22 qui serait de multiplier par deux plus femme ne devrait pas être le cinquième élément et ainsi de suite et ainsi de suite. Donc c'est un moyen de cibler les nombres impairs, Theo, Theo, vieilles colonnes de notre structure. Alors je vais faire ça. Je vais venir ici. Et juste pour vous prouver que cela fonctionne réellement, changeons simplement la couleur d'abord. D' accord ? À lire. Idéalement, moment, ce ne devrait être que la première et la troisième colonnes dont Culo devient rouge. Allons à notre Broza. Allons ici. Fait référence à la page et à droite là, vous pouvez maintenant voir que les deux première et troisième colonnes la couleur a changé pour lire parce que nous ciblons toutes les colonnes impaires numérotées dans notre structure. Donc ça a été dit, je vais revenir ici tout de suite. Changer Coehlo pour effacer et nous dirons juste sont les deux. Permettez-moi de m'assurer que c'est correct à la fois. Et là, vous allez en sécurité à la tête de retour aux rebelles sont rafraîchir la page et vous y allez. Donc, nous n'avons plus de problèmes avec les colonnes sont empilées les unes sur les autres. C' est donc exactement comme ça que vous pouvez résoudre ce genre de problème, mais ce n'est pas une partie Clipper et le prendre dans les colonnes impaires de votre section. Donc c'est tout, pour la partie ne me donnera pas une deuxième partie. Disponible Now s'attaquent à la minute de l'équipe ainsi que de nos sections clients. Je te verrai alors. 79. Révolution des comprimés partie 2: Eh bien, reviens. Teoh sont un design réactif et d'accord. Jusqu' à présent, si de bons services ont été pris en charge tout en marchant avec nous a également été pris en charge. Mais maintenant, nous devons changer les structures de Mitt, de l'équipe ainsi que de nos clients. Alors faisons ça pour fait l'équipe. On peut aller avec trois colonnes, ce qui devrait aller bien. Essayons donc d'y aller en trois colonnes. Donc ça va faire ça. Je vais aller ici et juste après la liste de service. En fait, les chiffres, prenez ce code entier. Copions ça. Descendez ici, collez. Et bien sûr, nous allons maintenant changer la liste de services aussi. Notre liste d'équipe, peut-être. Appelons la liste Tim. Donc ce qu'on va faire, c'est qu'on va changer le moins. Et le classique est le membre de la liste de tableau de bord de l'équipe. Confirmez que c'est le cas. Revenons à l'index avec HTML. Et ah, il y avait Ok, donc vous pouvez voir. Oui, c'est la liste des équipes. OK, bon à savoir. Donc, nous avons équipe une liste, et puis il n'y a pas besoin d'utiliser le symbole supérieur à parce qu'il n'y avait pas d' éléments Allié enfant est juste un seul élément allié dans la structure. Donc, le avec ici va changer le avec plus de deux. Allons-y avec 32,5% parce que encore une fois, les Alliés ont aussi des marges. Donc tu dois garder ça à l'esprit. Une houle. Alors allons-y. Sauvegardez ça. Et ah, voyons ce que nous avons maintenant. Ce qui se réfère à la page. Défilons ici et oh, ok, ok, donc il semble que 32.5 pourrait avoir un peu trop de haricots. Examinons et regardons ce que nous avons. L I Ok, donc vous pouvez voir que nous avons des marges à gauche , soit 1%. Oh, je suis désolé. Cela va effectivement au-delà de 33% immédiat, parce que si vous ajoutez 1% pour la gauche à 32 point devient plus loin à la 3.5, sorte que savoir marcher. Donc, ce que nous pouvons faire est que nous pouvons peut-être changer avec ici 2/3 à 1.5% à la place. Donc, avec cela, à 1,5, nous avons maintenant cette structure particulière, qui est bon. C' est bon. C' est très similaire à ce que nous avons actuellement ici, comme vous pouvez le voir, donc les 1,5% sont vont faire l'affaire. Revenons donc à 321 0.5%. Génial. Et enfin, nous jetons un coup d'oeil à la section sur le déclin de nos clients. C' est celui juste ici. Alors qu'est-ce qu'on a ici ? Nous avons la liste des clients, et ensuite nous avons nos alliés. Ok, plutôt direct. Faisons ça. Je viendrai ici et tous ceux qui reprendront tout ce code. Copier Coller. Et puis on changera d'équipe en clients. Et puis la classe ici va être des listes de clients, liste de clients. Et bien sûr, le avec. Nous allons juste garder le avec 31,5 % aussi, juste pour mentionner une certaine cohérence. Alors sauvegardons ça. Retournons ici, c'est là que la première page. Appelons tout le chemin ici et vous y allez. Génial. Génial. Génial. Sans classe. Maintenant, les regards sont plutôt dopés. Donc c'est tout pour la table. Défilons ici. Assurez-vous que OK, donc le contact de semble toujours bon. L' avenir a l'air bon. Allons jusqu'au 760 et voyons s'il y a quelque chose qui doit être changé à nouveau. Ok, donc à ce stade, moment, nous sommes en fait dans la gamme 7 50. Voici donc à quoi ressembleraient les choses lorsqu'elles sont vues sur une extrémité de téléphone mobile. En fait, ce n'est pas trop mal de toute façon. Nous allons jeter un oeil à ça dans la toute prochaine vidéo. Je voulais juste confirmer en ce moment, là pour la vue de table à 7 62 tout semble parfaitement bien. L' âme. Nous avons été à peu près terminé avec la vue de table, et puis nous pouvons maintenant passer à la conception du site pour le téléphone hors vue. Donc, c'est un allemand dans la prochaine vidéo sur, nous allons jeter un oeil à qui vous dit alors. 80. Réceptivité du téléphone: bienvenue à la vidéo finale dans une section responsive car nous allons maintenant cibler la plus petite taille d'écran à 7 60 pixels. Et pour être honnête avec vous, c'est généralement de loin le plus facile à corriger, parce que tout ce que vous avez vraiment à faire est généralement juste de définir toutes les colonnes pour aller plein avec la plupart du temps, puis nos colonnes qui étaient trois colonnes avant de simplement les dire à aller à la colonne. Donc tu leur donnes un avec peut-être 48%. Donc, c'est assez facile. Quoi qu'il en soit, allons-y et ciblons la fin. Donc c'est aussi petit qu'il est et ils nous ont eu. Il semble bien, mais maintenant ils sont sur la section doit certainement être changé, comme vous pouvez le voir, donc nous devons aller sont pleins pour chacune de ces colonnes individuelles. Jetons donc un coup d'oeil à la structure. Revenons à l'index point html et juste ici. Donc c'est ici que nous utilisons le tiret de charbon Juan Dash pour la classe. Nous n'avons pas eu à prendre ça dans une vue tablette parce que ça a l'air bien. Mais maintenant, pour la vue du téléphone portable, eh bien, j'espère que nous devons apporter quelques changements. Alors passons par ici. Et bien sûr, on va aller jusqu'ici. J' enlève tout cet espace vide. Ok, donc juste ici à l'intérieur du max avec 768 pixels pour le téléphone, nous allons dire point appel Dash un tiret à et dans ce cas va juste dire les avecs pour aller fondamentalement plein avec, Donc nous allons juste aller avec 99%. Allons-y avec 98% parce que rappelez-vous, nous avons une certaine marge. Alors allons-y avec 98%. Sauvegardons la tête en arrière ici étaient d'abord la page et là vous allez. ce moment, ça a l'air parfaitement bien. Soixante-dix impressionnantes à condition que je pense que nous devons aussi définir cela pour aller plein avec parce qu'à deux colonnes, il ne semble pas si bon. Je pense qu'on a dit que c'était à une seule colonne. Oui, vous pouvez voir en ce moment que c'est une colonne. Ça a l'air beaucoup mieux. Alors, changeons ça. Donc je vais juste aller ici, prendre la liste des services entièrement. Copions ça. Descends ici, paie ça encore une fois. Mais maintenant va simplement changer le avec pour la liste de services de 48 à 98,5. FM cool. Allons-y. Garde cette tête ici. Eh bien, d'abord la page et vous y allez. Juste comme ça. Ça a l'air bien. Ça semble beaucoup mieux, mais comme ça, OK, pourquoi marcher avec nous aussi aurait besoin d'aller plein avec. Comme vous pouvez le voir, ce n'est pas si grand. Alors refaisons-le. Je vais saisir les changements de mise en page. Copions ça. Et en fait, collons-le juste ici en haut. Ok, on bouge cette ligne. D' accord, alors colonne, Dash 1-4, on va y aller avec 98,5%. Dites que la tête ici, rafraîchissez la page. Et voilà. Comme je l'ai dit, c'est très, très facile. Tout ce que vous devez vraiment faire à ce stade est juste changer la largeur de vos colonnes au milieu du tim. Certainement. Je pense qu'on peut aller avec deux clubs ici à la place , par opposition à un. Je pense que deux colonnes. On ira bien. Alors réparons aussi celle-là. Ah, liste de l'équipe. Allons-y. Prendons ça Allons tout le chemin en bas de la pâte. Et maintenant, nous allons simplement changer la liste de l'équipe avec le 1.5 et nous pouvons aller avec 14 9 en fait, pas pour le nom mais 48 0.5% sûr. Cette tête en arrière était d'abord une page et vous y allez, vous semblez bien. air bien. Allons tout le chemin ici. Nos clients Ok, Cela peut certainement aller aux colonnes aussi bien. Alors faisons ça. Prenons cette copie, descendons ici, collez, puis changerons simplement la liste des clients. Différent. Cela 1,5 2 48 0,5 aussi bien. C' est sûr. Retournons ici. Eh bien, d'abord la page et que vous allez. Donc ça a l'air beau aussi. Et puis dernière liste mais pas tout le chemin en bas ici. Ah, les entrepreneurs ont l'air bien. Il va changer quoi que ce soit là-dedans, mais la nourriture a besoin de changements. Comme vous pouvez le voir en ce moment, les réseaux sociaux Aikens sont à la lumière et ensuite nous avons le menu de navigation à gauche. Donc, ça a l'air déformé. Donc, ce que nous pouvons faire ici est juste de les définir pour aller plein avec et ensuite peut-être juste notre texte, les aligner au centre. Alors jetons un oeil à la structure des pièces pour le pied de page afin que vous puissiez voir que nous vous avons un menu photo de classe et dans votre classe sont menu social. Et si nous allons à notre principal point CSS, allons tout le chemin par ici. Vous remarqueriez ça. Ok, nous avons fait flotter le principal social dans les droits, et nous avons aussi flotté le pied sur beaucoup vers la gauche. Alors peut-être qu'on peut juste enlever les flotteurs et voir ce qui se passerait. Alors faisons ça. Je vais créer une nouvelle section pour le pied de page. Collons cela et nous allons juste changer la liste des clients ici à la nourriture et ensuite simplement changer la classe ici. Donc nous avons le menu Fouda Dash et nous pouvons aller avec un coma et ensuite classe de membre du menu Social Desh . Confirmez simplement que ce sont les classes réelles. Donc, nous avons le menu social et puis le menu du temps de la nourriture. Ok, génial. Donc, allons tout le chemin ici et maintenant, fondamentalement, va juste dire flotteurs. Aucun flottent Aucun. Voyons ce qui se passe. Sauvons ça. Retournons ici. Nous allons faire référence à Page et là vous allez. Ok, donc plus de flotteurs. Mais maintenant, vous pouvez voir que nous avons toujours les médias sociaux Aikens comme sur la même ligne avec le menu du haut de la nourriture. Donc, la raison pour laquelle cela se produit toujours est parce que les compagnies aériennes dans les deux menus flottent également vers la gauche. Si nous revenons à ah, principal que CSS et allons tout le chemin ici, vous pouvez voir ici que nous avons probablement le pied de page que vous pouvez voir. On a le pied, Emmanuel. Je suis en train de flotter à gauche. Nous avons aussi sous le menu social. Nous avons le social, beaucoup allié flottant aussi à gauche, donc nous pouvons simplement déplacer le flux de l'étain d'eux et simplement les afficher maintenant comme un bloc en ligne . Alors regarde ça comme si j'y allais. Je vais retourner ici et prendre tout ce code. Prenons cette copie, descendons ici, collons, collons, et ensuite on dira « Food Time Menu ». Ilyse, allié du menu social et maintenant flottant. Aucun Mais alors, si nous ne les flottons pas, ils s'afficheront comme un bloc. Mais pour s'assurer qu'ils ne déplacent pas le bloc va juste dire maintenant, afficher comme et dans le bloc de ligne. Ok, allons-y. Sauvegardez ça. Retournez ici, rafraîchissez la page et voilà. Donc pour l'instant, ils ne sont plus flottants. Mais nous avons pu les afficher en ligne parce que nous les utilisons comme dans les blocs de ligne. Si nous n'avons pas dit afficher dans le bloc de ligne, ils s'afficheront sous forme de blocs empilés les uns sur les autres. La dernière chose que nous devons faire est juste d'envoyer un texto à l'allié au centre. En gros. Donc les ordres viennent ici et sous le temps plein, un nouveau et social beaucoup sera juste un texte, ah, ah, centre de ligne virgule deux-points sauvé qui Revenez dans. Ici fait référence à la page et là vous allez. Donc, il y a vraiment ah différentes façons comment nous aurions pu résoudre ce problème particulier. Mais je veux juste te montrer cette autre façon de sortir de cet avion. Vos éléments de liste comme blocs intérieurs par opposition à les flotter à gauche ou à droite, donc c'est à peu près pour le responsive font partie de la vue téléphonique. Merci beaucoup d'avoir regardé. Et bien sûr, je te verrai dans la prochaine dernière. 81. Review de section réflexion: donc ils l'ont. Nous sommes arrivés à la fin de cette section où nous avons abordé la réactivité et à ce stade, vous commencez déjà à construire des sites Web parce que vous savez que c'est Jemele. Vous savez, CSS, et vous savez aussi comment rendre votre contenu et la structure adaptable à différentes tailles d'écran . Mais vous pouvez toujours apprendre quelques nouvelles choses que quelques nouvelles choses supplémentaires. Et dans la section suivante, je vais vous montrer comment vous pouvez optimiser et améliorer davantage la conception et la fonctionnalité de votre site Web. Je te verrai alors. 82. Aperçu de la section Optimisation du site: ce qui est le bienvenu dans cette section où nous allons aborder l'optimisation du site et l'angle des bras . L' objectif principal de cette section est d'obtenir la vie de notre site Web sur Internet. Jusqu' à présent, nous avons construit localement. Maintenant, il est temps de transférer tous nos fichiers sur Internet. Je vais donc vous montrer comment vous pouvez vous procurer un nom de domaine, comment vous pouvez obtenir un hébergement Web et, bien sûr, comment vous pouvez enfin lancer votre site Web en direct sur Internet. Mais avant de le faire, il est également important que vous abordiez certains aspects vraiment importants du développement Web tels que l'optimisation des moteurs de recherche S E O. Donc, je vais vous montrer comment vous pouvez optimiser votre site Web HTML, moteurs de recherche complets. Et bien sûr, nous nous attaquerons aussi à la vitesse. Ça n'aura pas d'importance si vous avez créé le plus beau site Web. S' il est lent à charger les gens et ne va pas aimer le site, donc vous voulez vous assurer que vous êtes bouleversé charges le plus rapidement possible, et je vais vous apprendre toutes les astuces que vous devez savoir pour assurer vos charges latérales aussi rapidement que possible. Donc, c'est un peu comme la section complémentaire de la section des prédictions, mais néanmoins c'est aussi une section très, très, très, très importante, donc sans plus tarder, commençons. 83. Optimisation du moteur de recherche: Ok, les gars, parlons des bases de S e o pour notre site Web HTML et la plupart de cela va venir vers nous en optimisant pour les mots clés qui essayaient de cibler. Donc, quand je dis des remèdes, je veux dire le genre de mots que les gens vont taper dans Google. Dans d'autres finances, vous nous trouvez. Nous sommes donc une entreprise de design Web. Mais supposons que nous sommes basés à New York. Bon, donc on devrait penser, accord, comment les gens nous trouveraient sur Google ? Typiquement, ils peuvent aller à Google et taper quelque chose comme, Ah, société de design Web à New York. Bon, allons-y. Maintenant, appuyez sur Entrée et jetons un coup d'oeil à ce que nous avons ici. Donc ici, vous pouvez voir que nous avons, Ah, Ah Big Drop, Inc. Nous avons Max burgers, nous avons des médias Blue Fountain. Imaginons donc que nous essayons d'obtenir l'impact sur le Web pour être sur la première page de Google. Comment allons-nous faire ça ? Eh bien, comme je l'ai dit, ça commence par les mots-clés. Donc les mots-clés essayaient d'optimiser notre entreprise de conception Web à New York, donc il était exactement ce que nous pouvons faire. Nous pouvons revenir à notre index de HTML et un blanc ou vous avez votre section méta. Je vais aller de l'avant maintenant et coller ce code et il est là, juste là. Donc, nous avons le contenu de la description de nom metta, puis nous avons des mots-clés de nom metta, puis les numéros de continent vont de l'avant et suppriment effectivement ce contenu parce que ce n'est pas ce que nous essayons de cibler. Alors commençons. Tout d'abord avec celui sont en dessous des mots-clés. La clé était dans cette affaire en ce moment va être une société de design web à New York, non ? Ce sont les mots-clés qui essayaient de cibler. Donc, c'est exactement comment vous indiqueriez les mots-clés un tel ciblage avec votre document HTML . Maintenant, la description que c'est sera maintenant fournir pour les détails sur qui nous sommes et ce que nous faisons . Et vous pouvez voir la méta-description de toutes ces entreprises. Par exemple, Big Job a son pas beaucoup d'une description est juste Cesar Web design société à New York étaient à côté des développements grande chute. Ok, mais Max Burns a une bien meilleure description. Ils disent au point de rapport Max First complet jusqu'à la conception du site, développement d'un service de marketing Web pour les entreprises de différentes tailles et ainsi de suite. Donc, c'est ce que nous appelons la méta description, c'est donc un excellent moyen d'optimiser et de classer le ciblage par mot clé. Mais c'est aussi un bon moyen de fournir plus d'information aux clients potentiels. Et vous pouvez voir l'autre notre idée de liens. Avoir quelque chose de similaire. Notre ami bleu et dire qu'il est une agence numérique créé des dépenses qui connectent problème. D' accord, c'est bien. Retourne ici. Donc ce qu'on va faire ici, c'est pour la méta-description. Contenu affaiblir, dire quelque chose comme primé et maintenant société de design Web à New York. D' accord. Et puis nous construisons des sites Web fantastiques à ah Ford Able Prices. Et bien sûr, vous pouvez aller ajouter un peu plus, mais vous ne voulez généralement pas aller au-delà de 160 caractères. C' est généralement le maximum donc, mais ici, nous avons ajouté les mots-clés à nouveau société de design Web à New York. Mais nous avons également fourni quelques informations supplémentaires sur son obeah et primé How about design company ? Et bien sûr, nous construisons des sites Web fantastiques à des prix abordables, donc ce sera notre méta-description. Boy a aussi ajouté. Les quartiers clés étaient des cibles dans lesquelles est la société de conception Web à New York. C' est donc généralement l'étape 1. La deuxième étape va maintenant être le titre réel. Il est évident que la balise title juste ici représente le titre de notre page. En ce moment, c'est une construction d'impact zweiri. Des avantages incroyables. Ok, c'est bon. Mais nous pourrions optimiser cela en ajoutant, sont les mots-clés étaient ici aussi. Donc, au lieu de dire serait la construction d'impact est vers la science. Si on peut dire impact sur le Web et ensuite attribuer, en fait. Mais disons simplement Web ah, société de design à New York. Bon, donc à ce stade, nous avons maintenant nos mots-clés à trois endroits différents. Nous les avons dans les méta-mots réels nous les avons dans une description, mais nous les avons tous maintenant aussi dans le titre de notre page. Donc, ceci ici est déjà un très bon début pour S C O. Mais l'autre question traite maintenant de la structure de notre page. Google et d'autres moteurs de recherche, ils aiment la structure. Ils veulent nous voir avoir h un tags âge deux tags. C' est avec des pédés parce que ça montre structurel. Voilà toutes les raisons pour lesquelles le tout premier texte principal que nous avons sur notre site, qui est , bien sûr, celui ici, qui est le niveau de votre entreprise. Construisez un impact, leur présence si vous remarquez que nous avons utilisé des balises H one pour eux parce qu'ils sont tous là en haut de la page. C' est pour ça qu'on a utilisé H1 maintenant. Techniquement, nous pourrions venir ici et essayer d'ajouter exactement les mêmes mots-clés à nouveau. Donc, au lieu de dire au niveau de votre entreprise, bâtissez une présence prospective sur l'impact, nous pourrions simplement dire, World Design Company à New York. Cependant, vous ne voulez pas que vous surcharger votre page avec les mots-clés parce que Google peut réellement vous pénaliser pour cela. Alors soyez prudent. Utilisez vos mots-clés. Je veux dire, tu veux vraiment optimiser pour eux. Mais ne commencez pas. Ce que j'ai dit c'est, ne les optimise pas trop. Fondamentalement, si vous leur avez votre description dans vos mots-clés et ensuite votre titre, c'est bon. Ok, c'est tout à fait bien comme ça. Ok, continuons à défiler vers le bas. Donc, il a fallu sur les mots clés que nous avons pris sur la structure, ce qui est bien comme il est, cependant, un autre que nous pourrions faire pour l'optimisation. Notre document externe pour Seo est quelque chose que nous avons déjà fait, et ce sera les anciens tags pour nos images. Souviens-toi, on a parlé de l'ancienne étiquette. L' ancien type est très, très important parce qu'il aide, ah, logiciels utilisés par les aveugles pour leur indiquer ce qu'est l'image. Jetons donc un coup d'oeil à certaines des images que nous avons. Nous avons, ah, ah, l'écriture de l'image. Par exemple, pour les membres de l'équipe, vous pouvez voir les anciennes balises, une idée que vous avez rouillé les équipes d'alerte. Print se sent fondamentalement l'ancienne taxe. Voici les noms des membres de l'équipe, mais plus loin ici aussi. Mais nous avons des clients. Vous pouvez voir les vieux chars ont tous des descriptions, par exemple, a dit que le logo Holmes ah, grandir logo secrétaire, hyper hyper kit, logo vérifié, finances, regardez, logo et ainsi de suite. Donc, une autre façon d'optimiser vraiment votre site pour un sceau sera d'optimiser vos images en leur fournissant simplement toutes les balises Google aime cela Et vous voulez vraiment vous assurer que toutes les images de votre côté ont de vieilles balises ? Une dernière façon d'optimiser notre site Web XML sera d'améliorer la vitesse, s' assurer que la vitesse est aussi rapide que possible et que quelque chose viendra de notre prochaine vidéo d'entrevue . 84. Optimisation de vitesse partie 1: Parlons donc de l'optimisation de tous les sites Web. La vitesse et la vitesse est importante, pas seulement pour s PDG, parce que Google et d'autres moteurs de recherche aiment quand votre site charge très, très rapidement. Mais c'est aussi important pour l'expérience utilisateur. Lorsque les gens visitent votre site, vous voulez qu'ils passent un bon moment. Et l'une des façons dont vous pouvez vous assurer qu'ils passent un bon moment est de veiller à ce que vos pages et leur contenu se chargent le plus rapidement possible. Ainsi, les sites Web l'un des meilleurs moyens d'optimiser leur vitesse est en optimisant les images de leur côté . Et dans son offre, je vais vous montrer comment vous pouvez optimiser vos images HTML. Comme l'enfer a dit maintenant, nous avons plein d'images. Nous avons des antécédents. Nous avons des images pour les membres de notre équipe. Nous avons aussi des images pour les clients, les logos et ainsi de suite. Donc, en général, quand il s'agit d'optimiser vos images, la chose la plus importante est d'essayer de s'assurer qu'elles sont de petite taille que possible. Ensuite, il n'y a pas pourquoi vous voulez que les images soient une taille plus petite possible est parce que plus la taille des images est petite, plus vite il chargerait une image de 10 kilo-octets de taille va charger beaucoup, beaucoup plus rapide qu'une image qui est, disons, 500 kilo-octets en taille. Donc, le tout premier voyage ici, quand il s'agit d'optimiser vos images, est simplement d'utiliser des piquets J aussi souvent que possible. Vous avez généralement soit des pings ou J picks images gratuites, et il va jeter un oeil à tous les dossiers que vous voyez ici. Notez que l'icône cinq n'est pas elle est au format rose. Le logo est au format rose, cependant, cependant, l'image du héros est une cheville J. Les membres de notre équipe sont tous les piquets J, comme vous pouvez le voir et puis arrière-plan tout le sac anime conception J. Pegs, mais et enfin les clients, les images, les logos, si je dans les formats roses maintenant, si vous ne le saviez pas, le format rose d'une image est généralement haut a une meilleure qualité que le format Jay Peak. Mais avec la meilleure qualité vient un commerce de meilleure qualité signifie que l'image va être commencée en vue. Ainsi, comme de tels pings chargent généralement la slaw, puis J piquets qu'ils sont de meilleure qualité, mais ils se chargent plus lentement. Donc, en conséquence, de cela. Vous voulez vous assurer que la plupart des images que vous utilisez sur votre site Web R J. Pegs utilisent des pangs pour votre logo pour votre icône cinq et pour les types de logos de votre côté. Parce que, comme je l'ai dit, nos douleurs ont tendance à être de meilleure qualité. Donc, pour votre petite fille, les logos des clients, vous voulez qu'ils soient hors de bonne qualité. C' est pourquoi nous avons utilisé des pings à la place des piquets J, mais pour les arrière-plans des membres de notre équipe, nous n'avons pas besoin d'images pour être de cette qualité de grille. C' est pour ça que nous avons utilisé J. Pegs. Donc ça va être le tout premier conseil ici. Utilisé des pics J pour la plupart des images utilisées pings pour les logos, puis pour les cinq icônes. Maintenant, avec tout cela étant dit, une autre façon de réduire la taille est éteinte. Nos images sont en veillant à ce que cela signifie que nous ne téléchargeons pas d'images surdimensionnées en premier lieu. Maintenant de quoi je parle ? Vous dites que si nous prenons un exemple au MIT la section équipe, regardons notre mer ou M. Roster Dela Cruz. Je vais à droite ? Cliquez ici et je vais inspecter. Ok, regarde ça. Donc ici, vous pouvez voir que nous avons les liens vers l'image. Mais voyez-vous deux dimensions distinctes ? Le 1er 1 est l'arbre à tomber par 200. Mais dans Beckett, nous avons intrinsèque 9 50 par 8 50 Intrinsic indique la taille réelle de l'image dans notre dossier qui est 9 50 par 8 50 cependant, étaient en fait afficher cette image particulière à une dimension de 22 pleine par 200. L' utilisation de la discordance massive ici nous sommes téléchargés une image qui est de 9 50 par 8 50 mais en affichant seulement cette image en fait à U quatre par 200. Donc, dans une telle neige, ce moment, l'image de Mr Dela Cruz est surdimensionnée parce que vous voulez généralement la taille téléchargée. L' original dit que l'image est aussi proche que possible des dimensions que nous allons utiliser pour afficher l'image sur notre site Web. Donc, vous voulez vous assurer, ou si nous voulons nous assurer que le téléchargement il taille est aussi proche de 2 à 4 par 200. Mais avant de le faire, ne faites pas l'erreur. Je vais y penser. Oh, les énergies à l'un d'entre vous sont les plus grandes. Non, même nous utilisons l'écran dit juste ici, hein ? Retournons ici. Allons jusqu'à la vue du modèle. OK, continuons. Continuons. Donc je ne suis pas là pour l'instant. Vous pouvez voir que l'image semble maintenant être un peu plus grande, car maintenant ils sont en trois colonnes, au lieu de quatre colonnes. Si je fais un clic droit et inspecte le numéro d'avis, l'image a maintenant été affichée à 258 par 231 OK, continuons à minimiser la taille de l'écran et puis autour ici Avis. Maintenant, c'est à deux colonnes. Donc, si je vais revenir en arrière et faire un clic droit ici en ce moment, vous pouvez dire qu'il n'a pas été affiché à 303 par 271 Donc continuons à continuer et voir s'il devient plus grand. Et non, il semble être seulement plus petit que nous réduisons la taille de l'écran. Mais ici, c'est là que l'image ou les images des membres de notre équipe sont affichées à leurs dimensions les plus grandes à environ trois ou quatre d'ici 2 72 Donc, avant de commencer à recadrer vos images, assurez-vous de trouver le plus grand avec des images plus riches seront affichées sur votre site Web. Donc, ça va. ce moment, il est autour de trois ou quatre d'ici 272 Cependant, avant de commencer à recadrer vos images, Limoges vous avertit que nous avons des écrans haute résolution, et ce sont généralement ceux d'IOS des ordinateurs Apple, Appareils Apple. Donc, la recommandation est que vous recadrez vos images deux fois, deux sur le plus grand écran qui mentionne. Donc si nous les avons, la dimension de legis affichée en ce moment est que ça va être une chute de 272 ? Ensuite, nous devrions coupler des images à environ 60 attendre par 544 Si mes calculs sont corrects juste pour qu' ils aient également l'air bien sur les appareils Apple. Donc, quand il s'agit de recadrer vos images et de changer décide un Billy tout dépend de ce que vous utilisez les valeurs dans un Mac. Je sais que vous avez, comme un outil intégré pour ça. Vous pouvez l'utiliser. Je suis sur un PC, et j'ai ma bonne vieille peinture. Je vais utiliser l'outil de peinture pour simplement redimensionner. Donc je vais aller par ici, Teoh, Teoh, il suffit de cliquer sur redimensionner l'interrupteur à partir de pourcentage de deux pixels. Donc on va aller avec 6 10 et il allait être 6 10 pour 5 pour 5 pour 5. OK, allons-y. Maintenant, cliquez sur. OK, donc ce que je vais simplement faire maintenant c'est que je vais enregistrer l'image et je vais télécharger l' image dans le dossier « équipes ». D' accord. Donc, comme vous pouvez le voir en ce moment, j'ai applaudi le nouveau de l'image rouillée. Il s'appelle Rusty Dash New, et vous pouvez voir en ce moment que l'image originale de la taille ici était de 118 kilo-octets. Mais parce que nous avons réduit les dimensions, nous avons maintenant la nouvelle taille à 62,4 kilo-octets. Donc, ce que je peux simplement faire ici est juste d'aller de l'avant maintenant et de supprimer l'image huilée. Et, bien sûr, assurez-vous que le nom de votre nouvelle image est le même nom que celui utilisé dans le fichier HTML. Donc, c'est rouillé point jpg. Donc, si vous laissez optimiser les images restantes pour les membres de votre équipe. S' il vous plaît aller de l'avant et de le faire Vous pouvez faire la même quatre les clients. Mais la vérité est que ces images sont déjà très, très petites en taille contre elle. Celui-ci fait 8,6 kilo-octets, euh, juste 1 12,5 donc ils sont déjà vraiment, vraiment petits. Et il n'y a vraiment aucun intérêt à vous essayer pour la réduction de la taille de ces images parce qu'ils sont déjà très, très, très petites. Donc vous pouvez simplement ignorer celui-ci. Cependant, un groupe d'images que nous pourrions avoir besoin d'optimiser serait les images de fond, parce que celles-ci sont un peu plus grandes que toutes les autres qui peuvent voir les clients est que 600 Kilo-octets Services est à fonds de 51 kilo-octets, puis celui de l'équipe est un 328 kilo-octets. Maintenant, au lieu de réduire les dimensions, ce que nous pouvons faire, nous pouvons essayer de compresser les images, et pour ce faire, nous pouvons utiliser cet outil appelé l'Image, Compresser It off. Les comètes appelaient « optimiser illah ». Donc, vous allez à l'image compressible calme et juste ici vous verrez le bouton vert pour télécharger des fichiers. Je vais aller de l'avant maintenant, télécharger les fichiers. Allons à propos de vos antécédents et continuons maintenant et téléchargeons les trois d'entre eux. Mettons-les en ligne. Le premier dans a téléchargé deuxième, puis le 3ème 1 a téléchargé ou K. Donc, ici, vous pouvez maintenant commencer à voir les résultats possibles, ceux pour les clients. À titre d'exemple, Il n'y a pas eu 601 kilo-octets, mais et si nous les comprions, il a maintenant forcé à 468 kilo-octets maintenant parce que la qualité de ces images ne sont pas si important, ce que important, nous pouvons faire est juste par ici. Avec la qualité, nous pouvons réduire davantage la qualité, et en réduisant la qualité, nous sommes également en mesure de réduire davantage la taille de l'image. Donc on l'a ramené à 88. Voyons ce qui va se passer. En fait, continuons. Pour une raison quelconque, cela prend un peu plus de temps, forcé de voir les nouveaux résultats pour l'image compressée à 88% de qualité. Très bien, il y a plus de cinq minutes maintenant, et je suis toujours coincé sur cette page, et ça semble être une sorte de bug. Je ne sais pas pourquoi cela se produit, mais chaque fois que j'essaie de réduire la qualité de l'image, vous avez simplement cette roue de rotation et rien ne s'est passé. Alors peut-être que quand vous essayez le vôtre, vous pourriez réussir. Peut-être qu'ils ont résolu le problème. Peut-être que je fais quelque chose de mal, je ne sais pas. Mais malgré tout, même avec cela, nous avons toujours été en mesure d'optimiser les images. Vous pouvez voir les clients a été utilisé dans la taille par entre 2% sources par 24% et l'équipe par un maigre 1%. Mais je suppose que l'équipe que nos images Baghlan optimisent déjà. C' est pourquoi. Donc, je peux tout simplement aller de l'avant. Maintenant, cliquez sur télécharger tout et cela me fournira un dossier Zip. Je consens est un dossier, puis il suffit de décompresser le dossier sur mon ordinateur, puis simplement remplacer les images compressées sont avec celles qui sont déjà. Sur le HTML, je vais classer, donc c'est beaucoup comment optimiser vos images à nouveau. Piquets J utilisés dans la mesure du possible. N' utilisez que des pings pour votre logo et votre icône de cinq. Essaie Teoh. Réduisez la taille de vos images désespérées pour correspondre au tout ne correspond pas à Bobby. Deux fois sur les dimensions les plus légères sont avec lesquelles ils seront affichés sur votre site Web . Et puis, bien sûr, vous pouvez également utiliser le compresseur d'images qui viennent pour compresser vos plus grandes images. Donc c'est tout pour la vitesse qui vous optimise à l'envers pour la vitesse. Une partie de tambour trop bien optimisera notre cordon. 85. Optimisation de vitesse partie 2: Bienvenue de retour. J' espère que vous appréciez nos aventures d'optimisation du site et ce que je vais vous montrer ensuite est comment vous pouvez optimiser votre code CSS. Et tout comme avec les images, nous pouvons également compresser notre code CSS, et nous pouvons utiliser un outil appelé CSS. Beaucoup se sont calmes. Donc, ce que cela fait est que vous fournissez simplement votre code de villes, Vous l'exécutez à travers le moteur et vous aurez une version optimisée de votre code CSS Maintenant, la chose ici, cependant, est que vous voulez généralement le faire lorsque vous tous prêts à lancer votre site Web parce que cela ne va pas avoir de sens pour vous d'optimiser votre code CSS. Et puis vous commencez à ajouter un peu de froid supplémentaire plus tard. Non, vous voulez optimiser le produit final. Mais vous voulez aussi attendre que vous soyez sur le point de lancer lorsque vous êtes prêt à lancer, car la sortie que nous allons obtenir ne sera pas facile à lire. Donc ce que je vais faire ici, c'est juste pour vous donner un exemple. Je vais aller de l'avant et simplement prendre certains du code que nous avons. Alors allons-y. Mais Teoh Main ce CSS et je vais prendre ici du numéro un. Allons jusqu'au 133. J' étais un nombre très aléatoire. Allons-y et copions ça. Retournons à notre Mais j'étais Ah, je vais aller de l'avant maintenant, coller ça. Et maintenant, vérifiez ça. Je crois que je vais cliquer sur les hommes si vous y allez. Donc en ce moment, c'est la version compressée off ou nous avons ici et vous pouvez voir en ce moment que c'est beaucoup plus petit en taille, mais les ordres qu'il a appelés en ce moment sont pratiquement illisibles. Ça va être très, très difficile à lire pour nous. Mais c'est l'avantage si vous compresser votre code CSS afin qu'il se charge plus rapidement et vos absolus plus rapidement. L' échange ici est que le code CSS va être plus difficile à vraiment, Parce que pourquoi encore ? Vous voulez seulement faire cela, veut que vous tous prêts à lancer votre site web. Donc je ne vais pas aviser le tribunal parce que nous ne sommes pas encore prêts à lancer notre site. Mais je voulais juste te montrer ça. Donc c'est dans le futur. Si vous vouliez lancer vos clients à l'envers ou votre seul site Web juste avant de le faire, vous pouvez optimiser la vitesse en utilisant l'outil CSS many fire. Alors c'est tout. Merci. Tellement de fortune. Je te verrai dans le prochain cours. 86. Créer nos favicons: Très bien, donc nous sommes presque proches de la longue chaîne de tous les sites Web sur Internet. Mais avant de le faire, nous avons rapidement pris environ cinq icônes. Et si vous ne savez pas quoi si j'ai Icône est C'est essentiellement le je peux vous voir sur les onglets de votre navigateur. Alors, juste ici, ouvre. Vous pouvez voir ceci est l'icône cinq pour notre site Web. J' ai d'autres sites Web que j'ai ouverts. Nous avons Amazon. Vous pouvez voir le signe A et jaune sont juste là. Tu as Mars. Si vous ne connaissez pas Mars, sont des spécialistes en S e o. Assurez-vous de consulter le site, mais vous pouvez voir le leur. Perricone est un M avec un fond bleu. Vous avez aussi le cyber-labo sur le bouclier noir et vert. Et ce n'est pas terriblement important que tu dois avoir. Si je l'ai fait, je peux. Mais c'est bon d'avoir. Ça fait preuve de professionnalisme. Il montre également la classe maintenant. Nous avons déjà une icône de cinq, mais je ne vous ai pas montré comment vous pouvez réellement créer la vôtre. Il existe plusieurs outils sur Internet que vous pouvez utiliser. Un de mes favoris va être le rial cinq icône générer tous points Net. Donc, ce qui se passe ici, fondamentalement, c'est que lorsque vous allez ici, vous pouvez sélectionner votre tissu sur l'image et simplement choisir l'image que vous voulez utiliser. Maintenant, ils vous recommandent d'aller avec une image qui est d'environ 60 à 60. Il y avait au moins un de ses 70 par 70. Notez qu'il s'agit de carrés, les dimensions sont carrées. Alors s'il vous plaît, quel que soit le tissu lorsque vous voulez utiliser, assurez-vous que les images dans un format carré. Donc je vais juste aller de l'avant et utiliser le logo que j'ai et allons de l'avant vers le bas et le télécharger. Maintenant, si votre image n'est pas de 60 à 60, vous allez à ce message vous disant que Hey, vous savez, nous avons l'ordre de réussir jusqu'à 60 ans. Je vais juste aller de l'avant et ignorer ça et continuer avec cette photo. Très bien, donc juste ici, vous pouvez commencer à voir les résultats comment je peux ressembler à différents outils et nous dit donc tout peut voir. Ceci est pour le prochain et Google, il semble bien si vous faites défiler ici, c'est à quoi il ressemblera sur IOS vous avez le sac de sang sans appel là-bas avec l'icône. C' est bon. Vous avez celui pour les comas appréciés. Eh bien, vous avez celui pour Windows Metro dans ce cas en ce moment. Je n'aime pas ce fond parce que je pense que c'est une sorte de chevauchement avec la couleur de la lumière pour que nous puissions aller avec disons, bleu plus foncé comme exemple. Donc, en ce moment, vous pouvez le voir maintenant les regards sont tellement mieux. Donc ça continue de descendre. Et, ah, ouais, donc vraiment, c'est tout ce que tu dois faire à ce stade. instant, vous aurez la dernière étape où vous devrez choisir où vous voulez les afficher . Vous aimeriez que les cinq icônes se trouvent dans le droit de ce gars maintenant vous avez la possibilité de dire qu'Abu joue des fichiers américains sur le bois de mon site Web. C' est recommandé, mais je ne vous recommande pas de le faire réellement, parce que cela signifie que vous allez avoir vos cinq icônes à l'intérieur ce dossier particulier dans le déroulement exact tiennent votre index de HTML, et je préférerais que My fabric vienne dans un dossier appelé Five Icônes à l'intérieur du dossier assets , si elles Sauf que voici exactement ce que nous allons faire. Ok, je vais retourner ici, et je vais dire que je ne veux pas le placer à la racine de mon dossier. Au lieu de cela, je vais le placer dans les actifs, puis les cinq Aikens sont pliés. Laissez-moi juste confirmer que je renverse les actifs correctement parce que je renverse la tablette, donc c'est OK. Je savais que quelque chose ne allait pas quand j'ai vu ça. D' accord, ce n'est pas l'esprit des biens, non ? Actifs A s s E t s s s s s s s s Je dois me souvenir de ça. Donc nous allons faire maintenant c'est que nous allons placer les cinq icônes à l'intérieur de ce répertoire auront des actifs, puis cinq icônes. Bon, alors allons-y. Maintenant. Cliquez sur Generator Fabric possède et code HTML. Et, euh, c'est qu'en attendant, je vais retourner ici maintenant au lieu de notre dossier d'actifs. Je vais aller de l'avant et créer un nouveau dossier. L' emblématique s'est fait appeler. Les cinq icônes se replient. Ok, alors revenons en arrière. Teoh factures vers le bas. Alors, juste ici. C' est écrit avec ton paquet, d' accord ? Et puis à l'intérieur de ce code dans la section tête de vos pages, je vais juste aller de l'avant et prendre ce tribunal tout d'abord, alors ramenons cette copie à M. Brackets. Alors, comme si j'allais y aller. Et maintenant nous déplaçons le tissu original en ce que nous avions le lien tout ce que nous bougeons celui-ci, créons un peu d'espace. Et maintenant, je vais aller de l'avant et coller tout ce code. Permettez-moi de m'assurer que tous ces liens sont correctement onglets. Voilà, tu y vas. Et OK, donc, prêteurs, supprimez ces espaces vides. Retirez le dernier espace vide ici également. Ok, c'est bien. Maintenant, sauvegardez la tête en arrière. Teoh explose. Alors maintenant, je vais simplement aller de l'avant et télécharger le paquet de 5£. D' accord. Donc, comme vous pouvez le voir, j'ai téléchargé le paquet. Allons à mes dossiers. Et il est en ce moment à l'intérieur des cinq dossiers icônes que vous pouvez voir c'est le fichier zip. Donc, ce que nous devons faire maintenant, c'est simplement extraire. Je vais aller de l'avant et extraire tous les fichiers. Et maintenant, vous trouverez un autre dossier avec les cinq réels un concert après être allé ici et puis nous déplaçons à nouveau. Je vais couper tout ça et m'assurer qu'ils sont vraiment à l'intérieur du dossier des cinq comptes . Donc je vais aller de l'avant maintenant, les paie ici. Supprimons le fichier zip et aussi le dossier du paquet. Alors, c'est ça. Donc, assurez-vous que si vous faites votre de la même façon assurez-vous que les cinq comptes eux-mêmes sont à l'intérieur directement hors. Vos cinq icônes sont dossier. On nous a donc dit que tout devrait marcher correctement. Mais si je retourne à mon navigateur maintenant et je rafraîchis cette page, vous remarquerez que nous ne voyons plus l'icône des cinq. Maintenant, je ne sais pas pourquoi cela n'arrive pas localement, mais j'ai déjà testé ceci. Et je sais que si nous lançons notre site Web en direct sur Internet, vous verrez l'icône des cinq et en fait, laissez-moi le faire rapidement. Je vais aller de l'avant et ouvrir un de mes exemples de sites et vous pouvez dire que c'est exactement le même code que nous avons. Mais notez qu'il s'agit d'une tâche réelle de site Web en direct un pivot venir et Pourquoi pouvez-vous voir Nous avons maintenant. Les cinq sont là et j'ai utilisé exactement la même couleur que nous avons ici. Donc il y a quelque chose que je ne sais pas ce que c'est exactement. Mais quand nous allons de l'avant pour lancer notre site Web en direct sur Internet sont les cinq icônes seront ici de sorte que si un cinq icônes espèrent que vous avez apprécié la vidéo, Je vous verrai dans la prochaine classe. 87. Validation de Markup HTML: déjà vraiment presque prêt à maintenant enfin lancer notre site Web. Mais avant de le faire, il est important de vérifier que tout notre code a été vérifié et a également été optimisé. Maintenant, nous avons déjà parlé de l'unificateur CSS précédemment. N' oubliez pas de le faire juste avant que vous soyez prêt à vous lancer ici imputer tout votre CSS obtenir une sortie unifiée, puis les copier dans la sortie d'effet sur votre style qui dit ce fichier. N' oublie pas de faire ça. Si vous voulez optimiser la vitesse de votre côté, ce n'est pas obligatoire. Ce n'est pas nécessaire. Mais cela aide à augmenter la vitesse de votre site. Je vais aller de l'avant et fermer ça, mais c'est pour le CSS. Maintenant, pour le document HTML que nous avons, il existe un autre service appelé Valider tout. Et fondamentalement ce que cela fait est qu'il vérifie sont le fichier html pour s'assurer qu'il n'y avait pas coudes, il n'y a pas de liens cassés. Et c'est juste un très, très bon outil à utiliser juste avant de lancer votre site. La vie sur Internet. Donc, ici, il y a les différentes façons de vérifier. Ce qu'on va faire, c'est qu'on va valider par téléchargement de fichier. Je vais cliquer là, et puis je vais choisir notre index point html final. Allons-y. Ouvrez ça et ah, allons cliquer sur vérifier et voir ce que nous avons et Oh, eh bien, nous avons en fait trois flèches. Wow. Ok, je ne m'attendais pas à ce que ça soit honnête avec toi, Ok, Voyons voir. Donc, nous avons une mauvaise valve pour les attributs. Heure en ligne 491. Ok, passons à notre fichier html point d'index et voyons, donc il reste en ligne. 491 et c'est le dénouement. Ah, où est-il ? Ok, donc par ici, la ligne 491 est aux yeux. Alors, quel est le problème, Laisse-moi revenir ici. Il dit est mauvaise villa pour le réel mais tapez sur l'élément impute. Ok, voyons voir. Ah, ok. Je vois quel est le problème. Donc j'ai entendu dire que nous n'avons pas spécifié le type de champ que le titre est censé être. Donc, dans ce cas en ce moment va juste être texto. OK, texto. Retournons en lui et voyons ce qu'étaient les deux autres. Donc, le numéro deux est également couché pour 91 Il dit que l'espace réservé est autorisé qu'un seul type MP est numéro d' e-mail. Mot de passe Ok, ok, parce que nous avons spécifié le type comme texte. Ça devrait prendre soin de toi. Et enfin, l' enregistrement n'est autorisé que quand ? D' accord. D' accord. Donc, le seul problème que nous avons eu ici était parce que nous avons oublié de spécifier le type de champ que c'est censé être. Et par conséquent, c'était le tout premier Aargh. Et deuxièmement, vous ne pouvez pas ajouter des choses comme requises pour tout type de, ah champ qui n'a pas de type. C' est pour ça que nous avions les messages du diable. Et vous pouvez également ajouter une place plus ancienne pour toutes les sensations qui n'ont pas un type spécifié. Donc Maley en spécifiant que ce champ ici est un champ de texte. Je pense qu'on devrait aller bien. Alors allez-y. Maintenant, enregistrez ce fichier. Retournons ici. Je vais revenir en arrière et choisir le même est tombé à nouveau parce que c'est la même version . Ouvrons ça et vérifions. Donc Ok, il va voir en ce moment, nous n'avons plus de niveaux aussi, et c'est sur HTML. Document est bon à aller, et nous sommes prêts à télécharger tous les fichiers sur Internet. Alors événement allemand. Prochaine vidéo. Eh bien, nous allons maintenant aller de l'avant par Ah, nom de domaine, obtenir l'hébergement et enfin lancer notre site Web. La vie sur Internet. Je te verrai alors. 88. Lancer notre site Web en direct: Ok, donc nous sommes tous prêts à lancer toute la vie sur Internet. Mais nous avons besoin de choses. Nous avons besoin d'un nom de domaine, et nous avons aussi besoin d'un hébergement. Maintenant, il y a plusieurs sociétés d'hébergement là-bas, et l'un de mes favoris est côté terre. J' accueille avec eux depuis de nombreuses années maintenant, et ils sont, à mon humble avis, l' un des meilleurs chevaux et compagnies du monde. Si vous voulez Dans son alternative, je ne utilise également des moyens de cloud que les hommes différence ici est que Cloud Way se spécialise dans l' hébergement cloud . Donc l'hébergement ici est beaucoup plus rapide, mais c'est aussi un peu plus cher maintenant. Side ground offre également l'hébergement cloud, mais leur hébergement cloud est un peu plus cher que les solutions cloud. Très bien, donc une raison pour laquelle un commentaire externe. Tout d'abord, que vous commencez avec des pistolets latéraux parce qu'en plus d'avoir dans notre hébergement cloud, ils ont le type d'hébergement régulier, qui serait l'hébergement partagé. Laissez-moi vous montrer par exemple de ce dont je parle ici. Ils ont des paquets différents. Ils ont ce genre de poste grandissent et ensuite deviennent geek. Donc, la principale différence entre ces trois, bien sûr, est le montant de la fonctionnalité offerte. Démarrer, par exemple, offre que vous voulez juste un site Web grandir grandes offres vous site illimité, donc il ya go concert. Mais alors la grande différence entre Go big and go get, c'est de revenir en arrière. Bien sûr offres. Tu es plus d'espace. Il peut gérer 100 000 visites par mois, tandis que Grbic impie en gère 25 000. Et donc la chose est, si vous déjeunez tous dans un réel site Web recommander là-bas. Soit vous allez avec le paquet de démarrage ou grandissez. Maintenant, comme votre site Web commence à gagner plus de trafic et que vous ressentez le besoin de mettre à jour vos paquets , vous pouvez toujours aller plus loin pour aller concert. Ou, si vous préférez, vous pouvez finir par passer d'un pistolet latéral et passer aux solutions cloud pour l'hébergement cloud. Ne vous inquiétez pas, vous pouvez toujours archange ces offres et paquets plus tard, mais bien que venir bien sûr commencé côté terrain et aller avec soit le paquet de démarrage ou le go big. Maintenant, avant d'aller avec l'hôte et nous devons nous acheter un nom de domaine. Maintenant, pour faire ça, je vais retourner aux services. Mais en ce moment, je vais passer aux domaines et je vais cliquer sur le domaine de registre . Donc, là, vous avez le fondamentalement les extensions de domaine. Tu as les U.S. U.S Le calme. Ne fais pas d'ortie auto biz. Idéalement, vous voulez aller avec le calme. Le calme est de loin le meilleur. Parce que lorsque les gens entendent le nom de votre site Web, le automatiquement comme eux, cela va se terminer dans com. y aura jamais izumi Oh, il devrait se terminer en point net ou l'AWG ? Non. Les seules autres fois où vous ne voudrez peut-être pas utiliser la com est si, disons que vous construisez un site Web pour l'école, par exemple, puis point e d. Vous pourriez être beaucoup plus approprié l'ogle avant, comme les organisations et ainsi de suite. Mais la plupart du temps, 90 % du temps tu veux aller avec Dot Com. Donc, juste ici, vous avez la possibilité de taper et de section pour voir si le nom de domaine que vous voulez ceux-ci existe. Donc, dans ce cas en ce moment, le nom de notre entreprise est Impact sur le Web. Donc je vais taper l'impact sur le Web, et je vais choisir dot com et ah, voyons si cela existe. Je serai très, très choqué si c'est une préoccupation en ce moment qu'il n'est pas disponible pour l'enregistrement. Donc, je vais juste aller de l'avant et changer le SI deux K et disons que je vais aller de l'avant maintenant et tel et j'espère que l'un sera disponible et il n'est pas non plus disponible. Donc, quand je vais simplement faire maintenant est, je vais juste aller de l'avant et ajouter un C donc c'est maintenant impact dot com. Allons de l'avant et cherchons celui-ci, et ceci est disponible pour comprendre. Maintenant, le fait est ce n'est pas un bon site Web, donc je ne me soucie vraiment pas du nom de domaine lui-même. Mais si vous construisez de l'huile en lançant un vrai site Web, s'il vous plaît ne passez un peu de temps à trouver un nom de domaine qui correspondra à ce que vous essayez d'offrir et serait également logique. Ne pas entrer pour commencer à taper des mots aléatoires et ah, juste pour que vous puissiez vous procurer un nom de domaine, assurez-vous que votre nom de domaine a du sens et aussi, d'une certaine manière, est lié. Quel site web est à propos ? Donc je fais est en ce moment. Je vais aller de l'avant maintenant et sélectionner Impact Web ou maison. Bon, donc juste ici. Je vais y aller. Maintenant, cliquez sur, ajoutez. Donc c'est ajouté maintenant, ici. Beaucoup dépend également de la société d'hébergement d'aller avec donc pourrait vous offrir des services supplémentaires . Certains pourraient ne pas le faire. Donc, dans le cas, hors côté va maintenant, ils offrent hébergement supplémentaire l'offre de la vie privée de domaine. Donc, si c'est la première fois que vous allez avec Saigon, je peux vous recommander de cliquer sur ajouter afin que vous puissiez aller avec le paquet d'hébergement Web de domaine ici afin que vous puissiez cliquer sur ajouter, et vous pouvez alors choisir le plan que vous voulez aller avec. Mais j'ai déjà un plan d'hébergement avec côté, donc je n'ai pas besoin de ça. Donc tout ce que je vais faire maintenant, c'est que je vais venir ici et payer le nom de domaine . Maintenant, une chose que je devrais mentionner est que lorsque vous vous liez le nom de domaine et l'hébergement, vous devrez faire une vérification. Donc, vous devrez vous fournir. Vous leur fournissez le numéro de téléphone avec lequel ils peuvent ensuite vous appeler ou vous envoyer un SMS. Alors c'est la première d'une vérification. La deuxième étape comme ils vont effectuer un petit nos transactions bancaires ou débiter une carte avec un certain montant de l'argent. Donc, vous devrez aller sur votre compte bancaire et vérifier. Dites-leur combien ils ont effectivement facturé, puis Ardell vérifie votre identité. C' est important pour des raisons de sécurité, évidemment, que vous puissiez voir. ce moment, j'ai vérifié mes identités, et maintenant je peux aller sur la page d'accueil et la prochaine chose sera de mettre en place un site web. Maintenant, allons-y et fermons. Le nuage pèse. Donc, comme je l'ai dit, vous avez besoin d'un nom de domaine et il a aussi besoin d'hébergement. Et j'ai dit, Alia, que je n'allais pas aller dans l'hébergement parce que j'ai déjà un compte d'hébergement avec côté terre. Mais laissez-moi vous montrer comment vous pouvez profiter du nouveau procès du mois de la guerre que Saigon offre sont mes étudiants afin que vous puissiez aller ici pour cliquer sur les côtés de configuration ou vous pouvez aussi simplement aller à nos services. Vous pouvez venir aux services Et puis vous verrez le get Holsten Link gratuit. Vous pouvez cliquer là, donc je vais aller avec le plan de démarrage. Je vais cliquer sur un plan lisse. Et maintenant, ce serait important. Assurez-vous de choisir le centre de données le plus proche de votre emplacement physique. Donc, si vous êtes en Asie, vous voulez aller avec Singapour. Si votre nouveau, si vous pouvez aller avec l'Allemagne ou les Pays-Bas et ainsi de suite, je vais aller avec Asia Singapore, je vais cliquer sur confirmer, et je vais cliquer sur la commande maintenant et ah, accord. Alors voyons ce qui va se passer. Je pense que je vais recevoir un email confirmant notre traitement du paquet Holsten. Attendons encore quelques secondes. Il ne prend généralement pas trop de temps pour que la commande termine le processus. Et oh, peut-être. Ok, je vais devoir mettre la vidéo en pause et toujours, hum, la vidéo veut que l'ordre soit terminé. D' accord, il a fallu environ deux minutes pour que tout le processus se termine. Mais maintenant, vous pouvez le voir, c'est que vous êtes prêt. Donc je vais cliquer sur le site de mise en place. Très bien, donc je tiens à ce que tu puisses le voir, Cesar. Nouveau domaine. Domaine existant. Domaine temporaire. Maintenant, nous avons déjà un domaine que nous venons d'acheter. Donc je vais cliquer sur Domain existant et je vais venir ici et aller avec Impacto Web à la maison. Je vais cliquer sur Continuer et c'est tout. D' accord. Donc ce que je vais faire, j'entends, c'est que je vais simplement cliquer sur Skip et créer huit site vide qui est clic là-dedans . Et ah, ce sont des services supplémentaires que vous pouvez faire. Ils ne sont pas nécessaires. Donc, je cuisine juste à la fin. Et donc fondamentalement, ce sera le moyen en ce moment que Sarah Gone crée les fichiers nécessaires pour que le domaine existe, il crée aussi les bases de données. Donc ce que je vais faire en ce moment, c'est mettre la vidéo en pause une fois de plus et reprendre les souhaits. Ce processus est terminé, d'accord. Dit que vous pouvez voir en ce moment il dit que vous êtes tous prêt quand je clique sur aller au site ici. Et en gros, c'est ce que tu verrais. Vous Il dit quelque chose comme, il y a juste dire que Hey, il y a un site Web génial qui vient à ce nom de domaine particulier et allait aller de l'avant et fermer ceci et je vais passer à gérer le site maintenant. Donc, la prochaine étape que nous devons passer est que nous devons télécharger les fichiers que nous avons dans notre dossier pour le site Web. Je parle de l'index du HTML, descinq icônes, cinq icônes, toutes les images dont nous avons besoin pour télécharger tous ces fichiers sur tout le site Web. Donc ici, c'est fondamentalement le backend pour le terrain latéral. Et laissez-moi juste souligner que chaque entreprise d'hébergement avec qui vous allez en fait, la plupart d'entre eux, ils auront quelque chose de très similaire à cela. Donc, même si vous n'allez pas avec le terrain de côté, il sera toujours similaire à ce que vous pourriez trouver avec votre propre entreprise d'hébergement Web. Donc, ce que vous voulez faire est que vous voulez rechercher une fonction particulière appelée le gestionnaire de fichiers . Je suis sûr que vous en trouverez un peu dans votre dos et le mien est ici. Donc je vais cliquer sur le gestionnaire de fichiers, et c'est ce moniteur de fichiers qui nous permettra de télécharger nos fichiers sur notre site web. Maintenant, notez que lorsque développez son pour le droit ici, vous verrez ce dossier appelé le dossier xml Our Public dot Il est à l'intérieur de ce dossier où nous sommes censés ajouter tous nos fichiers. Alors, s'il vous plaît, faites toujours ça. Assurez-vous toujours que les fautes qui composent votre site Web sont à l'intérieur du public sur le dossier html de l'école . Donc, ici, O p. a. Vous pouvez voir que j'ai l'option off, uploadé un fichier ou en téléchargeant un pli. Donc, continuons simplement et téléchargeons l'index dans le fichier HTML. Tout d'abord, alors allons-y, téléchargez-la . Ensuite, je vais passer maintenant à classer et télécharger les actifs, plier avec toutes les images. Donc, il dit que cela va retarder certains actifs. Oui, allez-y et téléchargez ça. Ce n'est pas un problème. Donc, toutes les images ont été faibles. Logos été applaudi, les images des membres de l'équipe ah, les cinq cors I et vieux bien sûr, le fichier CSS ont compte. On oublie ça. Ok, donc c'est à peu près une belle Tous les 37 fichiers ont téléchargé avec succès. Et maintenant, le moment de vérité. Si je vais de l'avant maintenant et que je visite les sites, allons juste de l'avant et aller à tous les calmes pétales. Voilà, il est chargé maintenant. C' est là. Nous avons maintenant un impact Web ou peigne en direct et direct sur les Internets, et c'est là. C' est donc exactement comme ça que vous pouvez télécharger vos fichiers sur votre serveur Web. Juste quelques points, comme si vous aviez beaucoup ou des fichiers, et vous préférez ne pas les télécharger un par un. Ce que vous pouvez faire est que vous pouvez simplement adul d'eux à un seul fichier zip, télécharger ce fichier zip et ensuite extraire le fichier ZIP. Dans mon cas, moment, il y a un bouton d'extraction. C' est celui juste ici pour que tu puisses extraire ces fichiers. Mais assurez-vous que vos fichiers sont dans le répertoire racine do. Ok, assurez-vous qu'ils à l'intérieur directement à l'intérieur de votre public sur le dossier html de l'école. S' ils se trouvent dans un autre dossier, vous pouvez avoir un ou deux problèmes avec cela. Donc, dernier mais pas le moindre, je vous encourage à avoir des problèmes pour essayer de télécharger vos fichiers ou quelque chose ne fonctionne pas correctement. Je vais vous recommander tout d'abord, contactez votre société d'hébergement Web. S' ils sont une bonne entreprise, ils devraient être en mesure de vous aider. Et puisque c'est leur propre système. Ils seront dans un très, très bon conseil présidentiel vous sur la meilleure façon de télécharger vos fichiers. Mais c'est tout. Nous avons ajouté notre site Web avec succès. La vie sur Internet Think est beaucoup de fortune. Je te verrai dans le prochain cours. 89. Gérer des scripts: déjà, félicitations ont été lancés avec succès notre site Web Vie sur Internet. Mais maintenant qu'il est sur Internet, vous pourriez commencer à remarquer est un ou deux problèmes, en particulier concernant la vitesse de votre site pour voir en ce moment, Si je désire rafraîchir ma page, remarquez qu'il va commencer à prendre un peu plus longtemps que d'habitude, surtout quand vous commencez à ajouter du code supplémentaire et peut-être que vous êtes pris de Google ou d'un autre service là-bas pour ajouter quelque chose à votre tête du fichier PHP. Des choses comme ça, vous pourriez commencer à remarquer que votre hausse ralentit juste un peu. Une façon de s'assurer que votre site est aussi rapide que possible est de gérer vos scripts et de quoi est-ce que je parle ? Si je retourne à nos outils secondaires et que j'ai ouvert l'index du fichier d'excréments, remarquez qu'ici nous appelons un script du front. Impressionnant. Il est amusant, génial, responsable de l'affichage de toutes ces icônes sur notre payant. Rappelez-vous, cependant, ce coopérateur est dans notre tête est dans la section tête sur le site Web une façon dont nous pouvons améliorer encore la vitesse de nos sites est de déplacer des scripts comme celui-ci dans la section FOTA. Donc ce que tu veux faire, c'est que tu veux prendre ce script et ensuite je vais aller de l'avant et couper ça. Je vais descendre jusqu'ici et juste après le pied une section, je ne vais pas suivre la lumière du script là-bas. Je peux aller de l'avant maintenant et sauver ça. Et bien sûr, si je retourne à mes factures, sommes-nous d'abord la page et Ah, voilà. Donc, fondamentalement, le point ici étant que chaque fois que vous avez des scripts, moins qu'il soit explicitement indiqué que ces scripts doivent être dans la section principale de votre site Web, vous voulez généralement les déplacer vers le bas du pied de page parce que maintenant, ordre. Avant, lorsque les scripts étaient dans la section tête se produira est que le navigateur commence à partir du haut de votre fichier et va tout le chemin vers le bas. Donc, dans ce cas, moment, avant que le Boza arrive à afficher le logo, le contenu de votre page, il rencontrera le script, tout d' abord, et il devra exécuter leur script. Les sauts exécutifs prennent plus de temps que l'exécution de contenu normal. Donc, plutôt que d'avoir quelqu'un qui visite votre site attend que le frère exécute le script , le président peut au moins voir le contenu de votre page et ensuite vers le bas. Enfin, une fois que les coups A sont entrés dans le pied de la section, il peut alors exécuter le script pour afficher ces icônes. Ces icônes de ces icônes ici ne sont pas aussi importantes que le contenu réel de la page. Donc, encore une fois, sauf indication explicite, j'ajoute toujours vos scripts dans la section pied de page de votre site Web. Alors c'est tout. Merci beaucoup d'avoir regardé. Et bien sûr, je te verrai dans la prochaine classe. 90. Vous l'avez fait: Alors c'est tout. Nous sommes arrivés à la fin de cette section. Nous avons construit un véritable mur, interactif, interactif, site web réactif avec HTML cinq et CSS trois et à partir du bas de mon avait chaux. Ne dites pas merci beaucoup d'être allé aussi loin, et j'espère que vous l'avez appris en deux le long du voyage. Maintenant, si vous avez aimé le cours jusqu'à présent, je vous encourage à laisser un avis pour le cours, s'il vous plaît, parce que les commentaires m'aident vraiment beaucoup. Et j'apprécierais vraiment une critique écrite de votre part. Maintenant, si vous êtes intéressé, j'ai plus de contenu. Je dois à d'autres sections où je vous montre les bases de ce que la conception et aussi l' entreprise de l'enquête PHP intéressé ? Assurez-vous de vérifier ces deux sont des sections bonus. Sinon, si vous êtes satisfait de ce que vous avez appris jusqu'à présent, membre juste dire merci beaucoup Encore une fois et Linda vous souhaite tout le meilleur dans votre examen. Un cinq et CSS, où les projets pensent que c'est beaucoup et aussi la prochaine fois au revoir 91. Aperçu de la section Conception Web: Bienvenue dans cette section bonus très spéciale où nous allons aborder la conception Web, et c'est une chose à savoir, HTML et CSS dit. Mais c'est une autre chose de pouvoir le concevoir. Site web. Fondamentalement, pensez aux types de collagène qui vont utiliser les types d'images que vous allez utiliser, comment vous allez dans l'espace, sonner le contenu, comment vous allez concevoir les structures, des choses comme ça. Il faut donc une formation pour pouvoir faire des choses comme ça. Bien conçu et le développement Web sont en fait deux choses différentes. Pensez à bouleverser comme une maison, non ? Imaginez qu'une maison soit un site web. L' architecte est la personne qui a conçu la maison. Dans ce cas, l'architecte est le concepteur Web. Le développeur mondial est le maçon réel qui commence maintenant à mettre les Briggs et faire tout le bâtiment lui-même. C' est donc la différence. Donc, beaucoup de gens sont des développeurs Web, mais ce ne sont pas des concepteurs Web, ce qui signifie que même s'ils peuvent construire un site Web, ils ont besoin de quelqu'un d'autre conçu pour bouleverser d'abord, puis ils vont regarder la conception et ensuite le construire. Donc, ce que je veux faire ici, c'est de vous montrer comment vous pouvez aussi enlever la balle du concepteur Web et venir avec des idées pour concevoir un site Web et ensuite le construire. Laissez-moi faire vouloir abondamment clair, je suis plus sur un développeur Web qu'un concepteur Web. Donc, cette section n'est pas une section avancée par n'importe quelle partie de l'imagination. Ce n'est que des bases pures de la conception Web. Si vous êtes beaucoup plus si vous êtes plus intéressé à apprendre sur le Web design, il y a d'autres cours que vous pouvez suivre ? Cette section est tout au sujet des bases, juste vous apprendre assez pour être en mesure de trouver de bons designs pour vos sites Web, Donc j'espère que vous trouverez une section de divers complet Commençons. 92. Structure du site: Accueillons Teoh. Cette nouvelle section, où nous parlons de conception Web et la toute première et dont j'aime parler va être la structure générale de votre site Web. Et commençons par parler de la tête dehors. Maintenant, la tête de contient généralement le logo ainsi que le menu de navigation principal, et la plupart des sites Web ont cette formule particulière où vous auriez le logo sur la gauche , puis le menu principal sur la droite. Comme vous pouvez le voir ici sur l'impact Web ou venir, laboratoire cybernétique a une structure très similaire. Moss a quelque chose de similaire, sauf qu'en plus d'avoir le logo sur la gauche, vous avez aussi ce petit mini menu que le prochain logo. Mais puis sur la lumière, vous avez maintenant comme le menu de navigation principal. Maintenant, il y a quel plus, qui a quelque chose de similaire. Writer, vous avez le logo sur la gauche. Vous avez le menu principal juste à côté du logo. Mais puis, ici sur la lumière, vous avez un grand nombre, beaucoup où vous pouvez vous connecter ou essayer leur produit pour la boîte gratuite qui viennent ont quelque chose similaire. Mais vous avez le local sur la gauche, le menu principal juste là sur le centre, mais puis un autre nombre, beaucoup de jour blanc à la lumière. Donc, il se résume vraiment au genre de site Web que vous construisez tous. Mais dans la plupart des cas, vous aurez le logo blanc là-bas sur la gauche. Et si vous avez besoin d'avoir plus d'un menu dans votre en-tête, vous pouvez soit aller avec avoir sont le premier menu juste à côté logo, puis le second là-bas à droite, comme ce que vous avez ici sur Mars et dehors qui, plus, Ou vous pourriez décider d'avoir le logo sur la gauche, les hommes beaucoup droit dans le centre, puis le deuxième menu à droite. C' est généralement comme ça que vous voulez aller. Cependant, il y a d'autres cas où vous pourriez avoir une tête de conception différente où vous auriez le logo juste là au milieu du haut, puis le menu principal sur le besoin. Le logo. Maintenant, ce genre de design est parfait. Restaurants complets, cinémas, massage. spas de Paolo servent essentiellement sur les sites Yen Ted, si cela a du sens , mais contre en ce moment, cela a un sens parfait car entre le menu principal et le logo, vous avez, comme le téléphone nombre. qui, bien sûr, tout à fait logique parce que c'est un restaurant où les gens pourraient vouloir faire appel peut être l'évasion de Booker. Peut-être commander de la nourriture pour qu'elle livre des choses comme ça. Et, bien sûr, ils ont aussi leurs heures d'ouverture quand ils sont ouverts, quand leurs vêtements qui, bien sûr, est parfait pour ces types hors site Web. Donc encore une fois, tout dépend du genre de bouleversement de votre bâtiment. Si le véhicule de construction jusqu'à un site Web pour les entreprises, alors vous voulez aller avec le logo sur le menu principal à gauche sur la lumière ou, si vous construisez pour les restaurants. Sont tels Pollos Parsons comme que vous pourriez aller avec le logo Haven 't en bas du centre , puis le menu principal sous le logo. Jetons un coup d'oeil à deux sites qui ne suivent pas ces concepts de conception, et le 1er 1 ici va être Neil Patel dot com. Maintenant, même s'il a son logo dans la Hedda, il n'a pas son menu dans l'en-tête. En fait, c'est dans le pied de page, mais ici comme vous pouvez le voir, mais il n'y a pas pourquoi ce design fonctionne bien. C' est parce que hors du genre hors page site c'est, c'est un peu comme la boîte de Google où vous venez ici, vous appuyez sur n'importe quel domaine que vous voulez rivaliser, puis vous cliquez sur Rechercher et puis il vous montre comment vous ne pouvez pas classer ce domaine et Google et d'autres moteurs de recherche. Donc, le point ici est que les gens ne sont pas vraiment intéressés à naviguer sur le site Web . Ils veulent juste venir ici en appuyant sur le nom de domaine et ensuite voir comment ils peuvent vaincre ce domaine. C' est un peu comme Google. Lorsque vous accédez à Google, vous ne cherchez pas à naviguer. Vous voulez simplement rechercher certains mots clés, puis obtenir plus d'informations sur cette clé particulière. Quel est notre sujet ? Donc encore une fois, tout se résume au genre de site Web que vous concevez, et parfois vous pourriez avoir besoin du menu. Parfois, vous n'avez peut-être pas besoin de beaucoup. Donc, le flexible et enfin, jetons un oeil à TechCrunch Doc com. Ici, ils ont le logo sur la gauche, mais ensuite ils ont leur propre menu directement sous le logo sur la gauche aussi. Il s'agit d'une dette de conception que vous n'êtes pas susceptible de voir plusieurs fois. Et ce n'est pas le meilleur. À mon humble avis, je veux dire, tout TechCrunch, je pense qu'ils ont lu quelques très, très beaux articles sur le site parfois, mais personnellement, je ne suis pas un fan de ce genre de conçu. Pourquoi ne pas simplement avoir votre logo sur la gauche, à droite, et ensuite avoir votre menu principal juste ici sur la tête aussi. Mais à la lumière, je crois que cela ressemblera beaucoup mieux que la façon dont il ressemble actuellement à ceci. Ce n'est pas génial, à mon humble avis. Je voulais juste le souligner. Vous pourriez voir des sites web avec ce genre de, hum comment design. D' accord. Mais on a dit, Passons à la toute prochaine section et je veux parler du titre principal. Maintenant, Le titre principal est conçu pour transmettre immédiatement à un visiteur ce que le site est tout au sujet de ses filles. En ce moment, Webb, l'impact reste au niveau de votre entreprise. Créez une présence Web impactante. Donc animal qui s'engage ici pour la première fois, nous verrons ça. Ok, on dirait ça. Les gens vont se spécialiser dans aider les entreprises sont améliorées leur présence sur Internet parce que fondamentalement ce qui est tout au sujet, ne jamais aller à Neil Patel. C' est fondamentalement la même chose, Len, Pourquoi vos concurrents se classent si haut et comment vous pouvez à long terme les. Il vous dit immédiatement comment il peut vous aider des vidéos de homard sur le très similaire, ils disent que les connaissances en cybersécurité facilitées, et ils fournissent également quelques informations supplémentaires. Ici, Mars est la même chose. Il y a une façon plus intelligente de le faire. S E O. Vous allez Teoh, qui envoient des courriels froids personnalisés qui obtiennent des réponses, puis enfin box dot com. Simplifiez la collaboration sécurisée avec n'importe qui, n'importe où sur n'importe quel appareil. Donc, le point a été que la lumière après votre tête haute où vous aviez un logo et votre menu principal , vous voulez avoir un titre principal décrivant ce que votre entreprise est tout au sujet ou ce que le site Web est tout au sujet. C' est essentiellement ce que vous voudriez faire. Allons de l'avant et fermons ces autres sites parce que nous n'en avons plus besoin. Et, ah, juste fermé Baltimore, accord, donc la prochaine fois qu'on parlera d'ici, ça va être ces sections, donc ici, vous pouvez voir qu'on a une section pour nous. Nous avons des services fournis à pied avec nous et ainsi de suite. Mais si vous remarquez que les arrière-plans changent donc sur la maison, comme un fond blanc clair dit fourni a un fond d'image tout en marchant avec nous a un autre blanc par grand ainsi fait. L' équipe a ses propres témoignages d'arrière-plan a à nouveau son arrière-plan d'un plan, clients ont un sac différent, et quelqu'un le point étant ici qu'une façon de séparer les sections est d'ajouter des arrière-plans différents pour eux. Ce ne sera pas bon si vous avez exactement le même fond sont pour plusieurs sections sont consécutivement. Tu pourrais, en quelque sorte, t'en sortir avec juste avoir, genre, genre, un sac blanc uni dans un avion arrière et refroidir un autre type. Peut-être, Mais dans la plupart des cas, vous voulez avoir des antécédents différents pour vos différentes sections. De cette façon, il transmet à l'utilisateur. Ok, c'est une section différente, et ça te rend plus attirante ici. Un cybernétique de labo que vous pouvez voir est mort ici. J' ai un fond blanc clair pour ce qui est cyber labo, puis l'instructeur Mitchell a le fond vert tandis que Upside a une cause de fond blanc . Le hall a un fond vert. Et puis vous avez cette vidéo qui a un peu comme un fond asiatique noir Les réclamations ont un fond blanc si accusé comme un fond vert. vidéo qui a un peu comme un fond asiatique noir Les réclamations ont un fond blanc si Le logiciel a un sac noir sur et ainsi de suite et ainsi de suite. Vous pouvez voir en ce moment qu'avec chaque nouvelle section, vous avez un nouvel arrière-plan en tant que poids. Vous vous êtes séparé de la section précédente savon. C' est une chose dont je dois parler aussi. Essayez d'ajouter différents arrière-plans pour vos sections. Vous pouvez aller avec un plan, fond, Coehlo ou vous pouvez aller avec une image de fond. Allons maintenant jusqu'à la nourriture, et généralement votre pied de page est l'endroit où vous pourriez avoir vos icônes de médias sociaux. Vous pourriez également les avoir dans votre en-tête si vous le souhaitez. Mais ici, sur la photo, c'est un bon endroit pour avoir des similitudes sur les réseaux sociaux, et il pourrait aussi avoir, comme un second menu de navigation loin. Troisième dans le menu de navigation dépendant du site Web que vous avez à l'avenir aussi. Donc, typiquement ici, le menu aura dans votre pied de page serait bien pointé pages qui ne sont pas les plus populaires dans ce va en ce moment. Par exemple, les stratégies sont conservées en tant qu'événements. Ce ne sont pas aussi populaires que les commandes ici. Comme pourquoi nos témoignages de services. C' est un peu comme les images qui sont plus demandées. Donc, pour les pages qui ne sont pas aussi souvent demandé à nouveau comme je l'ai dit, comme les politiques F accuse comme ça, vous pouvez les avoir dans le pied, notre menu. Et bien sûr, n'oubliez pas d'avoir votre copie. Lumières texte jour droit nouveau pied de page ainsi 2020 mais aura un impact. Très bien, réservé L'électeur est un bon endroit pour avoir votre texte de copyright. Last but not least, je voudrais juste parler d'animations. Bon, maintenant je sais que les animations peuvent être fantastiques. Ils rendent votre site web très, très, très excitant. Mais essayez autant que possible de limiter le nombre d'animations que vous avez en cours d'exécution de votre côté parce que les animations je prends beaucoup plus de pouvoir à traiter. Donc, plus les missions que vous avez une sur votre site Web ce lent. Pourquoi ? Ça va devenir. Essayez donc de minimiser avoir des animations ou des curseurs ou même des étirements vidéo. Réduisez-les autant que possible. Essayez d'aller avec les images GLA et le texte. Mais dans les cas où c'est, il est très important que vous ayez, ah, vidéo par présages. Vous pouvez montrer la vidéo, mais comme je l'ai dit, essayez de minimiser les animations, les curseurs. Ah, et ainsi de suite sur votre site web. C' est donc un grand merci de regarder des vidéos. Je te verrai dans le prochain cours. 93. les polices de caractères: Parlons donc d'un aspect très, très important de la conception et qui va être des fonds. Les fonds que vous choisissez sur extrêmement important car ils ont tendance à refléter le ton votre site Web. Les téléphones sont le meilleur moyen d'indiquer le type de personnalité que votre site Web incarne afin qu'il puisse être professionnel. Ce pourrait être une sorte de personnalité de blogueur ou peut-être même notre comique dans la nature. Maintenant, pour démontrer l'importance des téléphones, permettez-moi de vous donner quelques exemples. Donc juste ici sur notre site étaient en utilisant le plutôt sûr sont Monserrat hors de la famille ? Droit ? Mais si je décide de venir ici et de changer la famille de fonds de départ pour aller avec peut-être des cursifs, non ? Donc mon rein en ce moment et ils changent ça en cursive. Vous pouvez voir en ce moment que le ton change presque instantanément en ce moment, même le titre il a ce genre de plaisir ah que vous l'associez normalement comme des sites de cinéma ou des trucs comme ça. Il ne reflète plus ce ton professionnel des affaires. Et ici, sur CBR, qui est un site de bande dessinée, vous pouvez voir la famille amusante qu'ils utilisent ici. C' est déjà similaire à la malédiction de ce que nous avons ici. Mais comme parce que ce site est sur la bande dessinée, une bande dessinée, télé d' information montre des choses comme ça. Mais jetez un oeil avec le Washington Post. Ok, c'est un site web. C' est un site Web de magazine pour les nouvelles, et vous pouvez même voir à partir du logo lui-même. Vous pouvez voir qu'il a ce genre très artistique de carburant comme. À cette fin, bien sûr, les titres ici vous pouvez voir cela est très, très similaire à l'époque comme New Roman et le corps du texte lui-même. C' est beaucoup plus professionnel que de crucifier ce que vous avez ici sur C, Belgacom et ah cieux, ellipses qui ont été en fait privilégiés de marcher dessus. C' est le gars qui secoue Dot com, et bien sûr, ce gars est un comédien. Vous savez qu'il est un showman, gros, et vous pouvez le dire ici à partir des téléphones utilisés dans ce qu'il peut. Il reflète le ton. Ça affecte le ton du site Web que vous pouvez voir ici, nous utilisons un peu comme un genre comique d'univers de fonds refroidi ici. Vous pouvez voir ici que le téléphone a été utilisé. Vous ne trouverez jamais de téléphones professionnels comme le même sur sellout ou fois nouveau Roman utilisé sur des ensembles comme celui-ci. Vous trouverez quelque chose de plus lié à nos bandes dessinées ou cursives ou quelque chose comme ça. Encore une fois, les fonds que vous choisissez doivent refléter le ton de votre site Web. Maintenant, quand il s'agit de la taille de la police, vous voulez généralement aller avec une science comprise entre 15 et 22 pixels pour votre texte normal . Maintenant, la raison pour laquelle il ya une gamme est parce que ne sont pas tous amusants. Les familles sont égales en ce qui concerne leur taille. Ainsi, une science Monserrat de 15 pixels pourrait être plus grande qu'une petite taille de 15 pixels. Mais généralement entre la plage de 15 pixels et deux en pixels, vous aurez notre quelque chose d'idéal pour la famille de téléphones que vous utilisez maintenant Headlines. H veut H deux abeilles devrait être plus grand que votre texte normal. C' est le Sistan mort. Donc voici un peu comme un exemple de ce qui pourrait avoir vous pourriez avoir peut-être votre H, qui sera le plus grand à 40 pixels h deux, peut-être 34 pixels chacun trois serait entre quatre choisir Susan. Bien sûr, votre texte régulier représenté par le P R serait de 18 pixels ici est un peu comme un exemple sur le téléphone dit que vous auriez pour vos titres et votre texte normal. Maintenant, quand il s'agit de choisir la vraie famille ludique elle-même, il y a deux types principaux. OK, tu as le soleil serif et tu as Siri. Si vous avez peut-être entendu parler de ces avant, servir signifie simplement que le texte a une déclaration en bas de chaque lettre, et vous voyez généralement cela, surtout sur comme les A, les thés et peut-être même le S. Tu le verras. Vous pouvez voir ici. Il a ce genre de balançoire ou de balançoire, ou je ne sais vraiment pas comment le décrire. Mais regardez au fond du soleil. Sue si des moyens qui prend Hachinohe décoration au bas de chaque jambe contre droite au coucher du soleil. Fondamentalement, ce sont des appartements. n'y a pas de design artistique. Rien. Rien de ce genre n'est juste fondamentalement plat, donc c'est généralement la différence majeure entre votre fils Syrie et votre Sarif. Donc, quand il s'agit de choisir votre famille de téléphones pour votre texte. Vous typique sur le goopy descend. Donc bref quelque chose parce qu'il est beaucoup plus facile à lire que le Su If et quand il s'agit choisir les familles de téléphones, je peux recommander ces cinq de téléphones Google. Ces cinq sont généralement les meilleurs, meilleurs, et ce sont les téléphones sûrs que vous pouvez utiliser pour votre cheville. Le sexe que tu as ouvert t'envoie prendre Latell. Tu en as gagné sept, ce qui est mon préféré. Vous avez une vraie façon, et vous avez aussi des fils PT. Maintenant, avec cela étant dit, je ne dis pas que ce sont les seuls cinq que vous pouvez choisir. Il y a beaucoup, beaucoup de centaines d'autres fonds là-bas, mais le point ici était que si jamais stock et vous ne savez pas avec quelle famille amusante aller avec, juste aller avec un de ces cinq, et vous ira bien. Donc, quand il s'agit du style de téléphone et que vous voulez aller avec un téléphone pour votre tête comme et sachez que pour votre texte régulier, c'est un excellent moyen de différencier vos titres et vos textes irréguliers. Vous êtes prêt à avoir la taille du téléphone pour indiquer la différence, mais c'est souvent un bon A. Avez-vous eu un autre genre de plaisir ? Famille parle spécifiquement pour votre tête comme un pour un texte régulier et un optionnel. Vous pouvez choisir d'avoir 1/3 fonds pour vos liens. Ce n'est pas nécessaire, mais vous pourriez le faire aussi. Mais vous ne voulez pas aller avec plus de trois familles agricoles sur votre site web. Donc c'est tout pour les téléphones. Merci beaucoup d'avoir regardé. Je te verrai dans le prochain cours. 94. Couleurs: Celestica Quel est sans doute l'aspect le plus important de la conception Web et qui va être les couleurs. Les couleurs sont extrêmement importantes car, tout comme pour les familles de fonds, elles reflètent également l'émotion et le ton. Les couleurs que vous chaussures dicteront l'émotion ou le ton Associate ID avec votre site Web. Regardez maintenant ces deux cercles où vous avez le 1er 1 qui est plus grand. Il n'y a pas de couleur là-dedans sauf gris noir et fondamentalement il a l'air sans vie. Mais vous ajoutez quelques nuances de rouge et de bureau, quelque sorte. Le cercle devient maintenant un peu plus animé. C' est l'impact de Carlos sur votre site. Mais une autre chose est, même si nous savons que nos vêtements en civil sont très, très importants, jouent beaucoup trop. Caller peut également conduire à l'Europe avait été très, très collant et pas très, très bon à regarder. Donc, il s'agit vraiment de vous trouver un équilibre quand il s'agit de choisir vos colliers. Mais évidemment, la question pourrait avoir ici est de savoir comment puis-je choisir les Kahlo pour mon site Web. Quand je vais faire ici, c'est que je vais vous donner trois étapes de base pour vous aider à être résolu . Ce défi pour la toute première étape ici serait de choisir un Carlo dominant. Quel est le Kahlo associé à ma marque avec mon logo ? Avec mon site web. Ça va être votre domaine et Kahlo. Je veux vous donner la deuxième étape ici, qui serait de créer un ou deux actes et couleurs pour créer un appel. Nous sommes venus. Donc, vous choisissez votre couleur dominante principale, puis à partir de cette couleur, vous choisissez un ou deux sont accent proche de compléter cette couleur dominante . Et enfin, dans la troisième étape, vous choisissez un appel en arrière-plan. Oh, ceux qui sont là pour être des étapes de base. Revenons à l'étape, qui est le Kahlo dominant. L' appel dominant, comme je l'ai dit, est votre association de marque. Il dicte essentiellement ce que votre site Web de l'eau de marque est tout au sujet. Voici quelques exemples avec Coca Cola Light. Les années de collège dominantes, évidemment rouge et avec le temps je pense à Coca Cola. Vous pensez à l'appel ou lisez, mais vous avez aussi Animal Planet. Ce n'est pas une coïncidence qu'ils aient utilisé le vert par opposition à la lecture. Vous voyez aussi pourquoi ils ont choisi le vert ici. Voici un autre exemple de Best Buy. Si vous vivez aux États-Unis ou peut-être même au Canada, vous avez peut-être entendu parler de Best Buy vous essentiellement par Ella tours De là et à Dublin, couleur ici est généralement hommage à nouveau. Vous verrez pourquoi ils ont choisi d'utiliser l'orange ici. Donc, quand il s'agit de couleurs, les couleurs ont différents types d'émotions qui leur sont associées. rouge, qui est très, très, très commun, représente l'énergie, le danger, danger, vivacité, l'urgence. Vous verrez généralement rouge quand vous avez le site tranchée pour moi ou quelque chose de très, très important. Peut-être qu'il y a un compte à rebours. Quelque chose comme ça dit, fondamentalement exhorte. Les gens doivent agir. Maintenant, vous en avez un est très, très similaire, qui est l'orange. Mais cela représente inamical et créativité. Mais il est aussi utilisé pour inciter les gens à acheter quelque chose ou à s'abonner. Ce n'est pas une coïncidence pourquoi, sur Best Buy, vous avez ce genre de coehlo orange jaunâtre qui leur est associé. Alors passons à autre chose. Tu as du vert. Rappelez-vous Animal Planet utilisant le vert comme notre principal Dublin Kahlo. C' est parce que Green est utilisé pour représenter la nature. Il représente la santé, il représente la richesse, et aussi c'est la deuxième couleur la plus préférée par les hommes et les femmes ne savaient pas cela. Je ne l'ai découvert que lorsque je faisais les recherches pour cette leçon particulière. Mais le vert est en fait sont la deuxième couleur la plus préférée. Savez-vous quelle est la première couleur ? Vous savez, la couleur la plus référencée que vous découvrirez assez tôt. Donc d'accord, comme je l'ai dit représente la santé, la richesse naturelle. Vous avez le jaune, représente la jeunesse et partager la plénitude. Et il est utilisé pour attirer l'attention instantanément. Une gamine pour toi. Si vous allez sur un site Web et que vous avez un bouton qui a un sac Oncle of Yellow, vous remarquerez ce bouton d'abord avant tout bouton auteur. Et maintenant, ici, tu as du noir. Noir est utilisé voyages et serrures électriques Nous l contre. C' est ce que vous trouverez de nombreuses fois du noir assisté avec des marques. L' État évoque la force et le professionnalisme. Tu as le violet maintenant. Le problème est utilisé. Représenter la richesse, loyauté avec eux. Il est utilisé dans les produits de beauté et même dans les compagnies aériennes. En fait, Thai Airways, je crois que Qatar Airways aussi, je crois peut-être ah klm Lufthansa. Je ne me souviens pas, mais je sais que quelques compagnies aériennes utilisent notre violet aussi. Et maintenant, nous avons appelé Gray utilisé Trip est dans la neutralité, la logique, technologie futuriste. C' est pourquoi il est associé à des marques comme Apple Apple. Ils ont tous grand comme l'une de leur couleur dominante principale. Donc c'est juste pour représenter la technologie, la compétence, la sophistication. Et enfin, vous avez Blue, qui représente la confiance, la sécurité, sécurité, la stabilité, entreprises de Houston, les banques et le bleu est en fait le numéro un plus différent colonne par les deux hommes et les femmes. Très bien, donc fondamentalement, vous devez choisir un Kahlo dominant qui représente votre entreprise ou ce qu'est votre site web. Il semble que je veux passer quelques minutes à penser à cela, et puis, fondamentalement, vous pouvez utiliser votre appel dominant sur vos arrière-plans, vos boutons ainsi que les zones sur lesquelles vous voulez attirer l'attention. C' est là que vous utiliseriez votre couleur dominante. Mais alors vous avez aussi les couleurs d'accent droite. Vous pouvez également l'utiliser sur les arrière-plans, les boutons et les liens. Si vous voulez comprendre comment vous pouvez créer un accent couleurs à partir de votre Kahlo dominant, assurez-vous que vous consultez le livre Pdf que j'ai. Avec ce cours, vous trouverez une section de cette façon. Aujourd'hui. J' ai pris le ballon près. Vous trouverez une théorie des liens où vous pouvez trouver tout ce que vous pouvez créer. vêtements d'accent pour votre couleur dominante peuvent essentiellement aller avec Adobe. Un croyant. Adobe Colors dispose d'un outil qui peut vous permettre de créer des vêtements d'accent à partir de la couleur dominante. Vous pouvez simplement faire vos recherches et Google juste arriver. Votre principale demande. Coehlo. Et découvrez à quoi les couleurs d'accent sont associées. Ce Coehlo dominant le sont. Et puis, enfin, vous avez votre couleur de fond. Il n'y a pas de prétendant particulier avec votre sac sur la couleur, sauf assurez-vous que votre texte est toujours facile à conduire. Ce n'est pas un hasard si la plupart des sites d'appels sont généralement blancs parce que la taxe appelée le Texas, généralement noir et noir, va très, très bien avec le blanc. Donc, lorsque vous choisissez votre arrière-plan Coehlo, assurez-vous simplement que le texte est facilement lu par les utilisateurs. Donc c'est tout pour Carlos. Merci beaucoup d'avoir regardé. Et bien sûr, je te verrai dans la prochaine classe 95. Travailler avec des icônes: Parlons des icônes en volition à la conception Web. Et j'ai pensé que j'utiliserais des exemples en direct que son spectacle de lumière pour parler de ce sujet particulier. Aikens sont donc utilisés de nos jours sur de nombreux sites Web. Je suis ici sur Uber dot com et juste ici prêter attention à cette dernière section critique . Vous avez des icônes juste en plus de quelques morceaux de texte particuliers. Donc tu as bien mangé ? Et bien sûr, vous avez la fourchette et une cuillère représentant Eat. Vous avez la voiture représentant Vied. Vous avez ces barres représentant gagné, qui, en passant, en passant, vous pouvez également utiliser ce boss pour représenter notre force de signal, peut-être même la fréquence personnellement plus vieilles vues, peut-être le signe de livre ou le signe du dollar. Mais c'est aussi parfaitement bien. Et bien sûr, vous pouvez voir les autres icônes ici et le texte auquel elles sont associées. Donc, quand il s'agit d'utiliser dans les icônes, règle numéro un est que vous voulez vous assurer que les icônes représentent précisément le texte elles sont associées. Cela ne va pas avoir de sens si pour un vélo comme exemple, plutôt que d'utiliser un vrai vélo, vous finissez par utiliser la voiture. Ça ne va pas avoir de sens si bien. Encore le numéro un. Assurez-vous que le texte et les icônes correspondent. Mais alors, où utiliseriez-vous exactement vos icônes ? Vous pouvez utiliser vos icônes dans les colonnes. Vous pouvez également les utiliser dans les robinets. Par exemple. C' est un onglet juste ici. Si je vais à, je peux cliquer sur Gagner, et ensuite vous devez gagner des livres ici. Une activité concluante vers les livres professionnels apparaît de sorte que vous pouvez utiliser des icônes pour représenter vos onglets , mais vous pouvez également les utiliser dans des colonnes comme Down ici est un exemple. Vous avez leur colonne « Bouteilles », «  Global » à la colonne « Navire » et, bien sûr, sur le dessus, vous avez les icônes. C' est aussi pourquoi, sur notre site Web, où nous avons des services fournis J'ai utilisé des icônes représentent notre eau. Catégorie particulière est tout à nouveau au sujet. Vous pouvez voir les icônes reflétant précisément le texte. Il est adapté à l'assurance de la culture, avec la coche notre cloud avec le cloud. Je peux écrire leur cybersécurité avec le bouclier et ainsi de suite. Donc, comme je l'ai dit, vous pouvez utiliser des icônes dans vos colonnes et vos tamps. Mais il y a une autre règle associée aux icônes, et c'est le fait que les icônes ne devraient pas être à l'honneur. Ils devraient être très, très petits, et il devrait être utilisé pour simplement compléter ou améliorer la conception de la colonne ou du robinet auquel ils sont associés. Ça ne devrait jamais être le feu des projecteurs. Une autre chose élue, mentionné que nous avons obtenu à Aikens est quand vous les utilisez dans votre menu de navigation, assurez-vous qu'il est dans une situation où il y a assez d'espace pour qu'ils soient utilisés. En d'autres termes, ils ne rendent pas votre menu encombré dans ce cas. Par exemple, avec uber remarque que sur la gauche, où ils ont le menu principal réel, ils n'ont pas d'icônes représentant notre texte. Mais ici sur la lumière, où ils n'ont que les produits linguistiques, Logan et ensuite s'inscrire, ils sont capables d'utiliser Aikens parce que, bien, fondamentalement, les icônes peuvent être un peu Philip plus d'espace ici. Fondamentalement, si vous supprimez les icônes ici, les nombreux vont toujours regarder, regardez OK, mais juste cette semaine icônes ceux qui représentent les produits linguistiques et Logan ils font des plantes vous jusqu'à merveilles ici sur notre impact sur le Web. Il n'aura pas eu de sens pour nous d'avoir des icônes, terrain droit bras une navigation beaucoup parce que encore une fois, nous avons déjà quoi, comme sept éléments dans notre menu principal. Donc, l'ajout d'icônes supplémentaires fera juste ce look très, très, très cluster ou coagulé, et il ne serait pas bon. Donc, encore une fois, si vous allez utiliser Aikens dans votre menu, assurez-vous qu'il y a suffisamment de place pour qu'ils apparaissent dans. Donc c'est tout pour Aikens. Merci beaucoup d'avoir regardé. Je te verrai dans le prochain cours. 96. Images: Parlons d'un autre aspect important de la conception, et ce sera des images d'arrière-plan que les types d'images que vous utilisez sont très, très importants maintenant. Ce que je veux faire ici est de montrer les différentes façons dont vous pouvez appliquer vos images d'arrière-plan , ainsi que les effets que vous pouvez appliquer à eux pour les rendre tous vraiment, vraiment bons. Maintenant, le 1er 1 ici est vous avez cette image de fond, vous avez un logo et vous avez aussi du texte. Donc ça n'a pas l'air si génial, n' est-ce pas ? Il semble que vous pouvez difficilement voir le logo. Vous pouvez difficilement lire le contenu du logo et même le texte lui-même. C' est même si vous pouvez lire et vous pouvez voir que c'est le blog rendu facile. Il se fond un peu avec l'ordinateur portable parce que l'ordinateur portable est aussi blanc, donc il n'est pas vraiment visible si bien. Cependant, si nous appliquons maintenant sa capacité avec un appel Baghran de noir, maintenant vous pouvez voir que l'objectif bas est plus visible ainsi que le texte. C' est donc ici le moyen le plus populaire d'appliquer nos images d'arrière-plan, surtout lorsque vous voulez lire du texte sur votre image d'arrière-plan. Vous pouvez aller à la capacité. Peut-être 0,5 point six. Rendre le texte plus visible. Faites en sorte que les images ou les logos qui pourraient se trouver sur cet arrière-plan soient également plus visibles . Le 2e 1 ici va être avec Grady INT. Maintenant Grady consiste essentiellement à combiner les couleurs, et ici vous pouvez voir, par exemple, avez-vous eu un peu comme un mélange rosé rougeâtre sur la gauche vers le centre et puis sous quoi ? Vous avez quelque chose de plus vert Greysia dans la façon dont vous pouvez le voir juste là. Et voici encore un autre exemple. Vous avez quelque chose comme violet bleuâtre à gauche, et puis c'était à la même époque. Le droit que vous avez quelque chose de plus citronné verdâtre d'une certaine manière, pour être honnête avec vous n'avez jamais été un fan de Grady Insight. Hadley a jamais utilisé l'éclat sur mes dessins de fesses, mais ça ne veut pas dire qu'ils ne le sont pas. Ils sont géniaux. Vous pouvez utiliser des grenades pour créer de l'Italie réelle, sont de beaux effets sur votre site Web, mais en voici un autre qui n'est pas très, très commun mais est en fait assez bon aussi. Et c'est l'effet sanguin. Donc, comme ça, vous pouvez voir dans le sac et nous avons l'image d'un homme tenant un téléphone portable . Mais tu peux. Aujourd'hui, c'est du sang et ce n'est pas blanc. Le sang, c'est parce qu'on veut le texte. La dépendance aux médias sociaux à être plus sont visibles pour être plus améliorée. Donc voici un autre genre de style hors du commun. Vous pouvez appliquer à vos images d'arrière-plan. Vous pouvez les faire un peu de sang pour que le texte sur l'arrière-plan soit plus visible. Donc, une autre chose sur le spectacle sera quand vous ajoutez des zones de texte juste avec du texte. Dans ce cas, moment, vous pouvez voir que nous avons la boîte de texte avec le débat. Peut-être les mots comment faire manuel d'allays pour les photos dans la boutique d'alimentation. Un poids vraiment génial. Vous concevez votre sac lorsque des images comme celle-ci est d'avoir une certaine capacité sur la boîte elle-même . Maintenant, si vous regardez de près, vous pouvez toujours le voir à travers la boîte. On peut encore voir les étoiles là-bas. Ce n'est pas ah, pic. C' est une sorte de greffe. Vous pouvez voir des tapettes du bagman aussi bien, donc il y a une autre façon cool d'ajouter des zones de texte sur votre site Web Quand ils sont terminés. Citron aneth sur le dessus d'une image de fond, essayé de les rendre un peu plus transparent afin que l'utilisateur ou le lecteur puisse encore voir au sac autour de la boîte. Donc, en général, sont des images de tirage vitales qui sont trop petit remorquage. Évitez les étirements. Rappelez-vous, nous parlons de la taille de la couverture dans la propriété ainsi que du conteneur. Si vous allez utiliser la couverture, rappelez-vous, la cova va étirer l'image pour s'assurer qu'elle occupe toujours le plein avec une hauteur de son conteneur. Si vous utilisez des images de deux petites, vous pourriez finir directement dans l'image et elles ont l'air de sang, et elles ne seront pas si géniales. Évitez donc de télécharger sur de petites images, mais évitez en même temps les images opulentes et surdimensionnées. Le détriment ici est que lorsque vous avez plus d'images scientifiques, ils prendront plus de temps à charger et, en tant que tel, la vitesse d'un canapé de bonne réputation en conséquence. Essayez donc de télécharger des images qui ne sont pas plus de deux fois leurs dimensions d'affichage réelles. Rappelez-vous que nous avons parlé de cela dans la section « put it » que vous voulez aller avec pas plus de fois , aussi , parce que vraiment, fois deux est ce qui va accueillir nos écrans haute résolution comme ceux que vous trouvez sur Appareils Apple. Tout ce qui est plus que ça est juste trop maintenant, juste pour vous donner un résumé rapide entre les pings et les piquets J. N' oubliez pas les pings sont de meilleure qualité, mais parce qu' ils sont de meilleure qualité, ils sont de plus grande taille, et le résultat prendra un peu plus de temps à charger que Jeb XG. porcs se sentent souvent de qualité, mais le compromis ici est qu'un plus petit en science et il va charger beaucoup plus vite, alors utilisez des pings pour vos logos. Ce sont des logos reconnaissants, peut-être même des icônes. Mais alors utilisez J porcs, principalement pour vos images régulières sur votre site. Donc c'est tout pour les images. Merci beaucoup d'avoir regardé. Je te verrai dans le prochain cours. 97. Espacer: une dernière chose et parlons avant de nous retrouver. Cette section sur les bases de la conception Web va être espacée maintenant. Déjà pris sur la mise en page générale, mais je n'ai pas parlé de l'espace. Et l'anticipation, bien sûr, est très, très importante. Généralement, vous vouliez être suffisamment espacement entre vos sections, vos colonnes ainsi que votre tête et la GLA Texas. Ils pouvaient voir en ce moment sur un site de vie. Nous avons beaucoup et beaucoup d'espacements. Et, bien sûr, il permet au contenu sur tous les sites Web de respirer fondamentalement tous. Mais maintenant, imaginez ce même site web. Mais maintenant, nous avons senti que n'importe quel espace ici est le résultat. Ici, vous pouvez voir la section sur US regarde maintenant hall rebelle. On dirait que tout le Texas est moulé l'un contre l'autre. Vous pouvez voir la section des services fournis ainsi en marchant avec nous. Tout ce qui ressemble à un désordre parce qu'il n'y a pas d'espace dans l'espacement, comme je l'ai dit, est très, très important. Assurez-vous qu'il n'y a pas d'espace entre votre contenu. Utilisez vos marges. Utilisez vos modèles de manière appropriée. Mais, bien sûr, ne va pas par-dessus bord. Ne pas utiliser dans des marges désactivées comme 200 pixels ou des motifs de 500 pixels. Bien sûr que tu ne veux pas y aller. Notre coup d'État est facile à imaginer. Les modèles. Assurez-vous juste que c'est beaucoup d'espace entre vos sections, colonnes et, bien sûr, entre vos blessures H H pour utiliser H trois et directement les attaques, assurez-vous d'utiliser vos marges et les motifs sont pour eux. Donc c'est tout pour l'espace et pas beaucoup de choses à parler ici. Mais merci beaucoup d'avoir regardé. Et, bien sûr, je te verrai dans la prochaine classe. 98. Examen de la section Conception Web: alors c'est tout. Nous sommes arrivés à la fin de cette section bonus où nous abordons les bases de la conception Web, et espérons que vous comprenez maintenant l'importance de choisir d'écrire comment vous pouvez marcher de Kahlo avec Bhagwan Images High peut jouer du texte sur des images Baghlan, comment vous pouvez marcher avec des icônes, l'espace et des choses comme ça. Donc, comme je l'ai dit, extraterrestre pour prévisualiser cette section n'est pas une ceinture avancée. Les concepts de conception Web si vous êtes plus intéressé par la conception Web et à peu près sûr que vous confinez les armes avancées et les causes là-bas sur Internet. Mais si vous êtes seulement intéressé par les bases de Linda, cette section espère vous a fourni ces bases pour aller là-bas et commencer à concevoir de beaux sites Web. Alors c'est tout. J' espère que vous apprécierez cette section. Merci beaucoup, et bien sûr je vous verrai dans la section suivante. 99. Aperçu de PHP: d' accord. C' est un bienvenu à la section bonus numéro deux. Nous allons aborder les bases de P H P. Maintenant PHP est un langage de programmation très puissant dont vous avez peut-être entendu parler. Quand vous pensez à PHP, pensez aux serveurs Web qu'ils ont essentiellement utilisés pour frapper ou établir une communication entre eux . Site Web Willbros Up et service Web informatique. Quand tout tousser serveurs, pensez à PHP maintenant comment rivaliser être effectivement bénéficier tout le site Web tel qu'il est, même si en ce moment c'est un site bien développé, il est conçu magnifiquement. C' est réactif, mais ce n'est pas si interactif. Par exemple, si je clique sur disons des témoignages, trouvez qu'il nous ramène à la section des témoignages. Mais que se passe-t-il si vous vouliez une page séparée quatre témoignages ? Et si vous vouliez pouvoir quitter cette page et aller à une autre page ? Comment pouvons-nous y parvenir ? Mais nous pouvons y arriver avec PHP tellement pris dans cette section, je vais vous montrer comment vous pouvez rendre une vue plus interactive afin que lorsque vous cliquez sur liens dans le menu, il vous emmène aux pages réelles pour ces éléments de menu et de Bien sûr. N' oubliez pas notre formulaire de contact. Nous avons un formulaire, mais ce n'est pas fonctionnel. Si quelqu'un entre ici entre dans leur nom email message de titre, il enverrait rien ne va se passer. Mais avec le Ph.B. Ph.B je vais vous montrer comment vous pouvez faire en sorte que les formulaires de contact fonctionnent correctement. Donc c'est tout pour cette section sont vous le trouverez très, très utile parce que PHP est un langage de programmation extrêmement puissant et c'est un que vous devez savoir. Vous devez connaître au moins les bases de PHP pour pouvoir construire nos sites interactifs. Alors asseyez-vous, détendez-vous et comme toujours, j'espère que vous apprécierez cette section. Commençons. 100. Créer le fichier footer.php: très bien, bienvenue dans la section PHP. Et ce que je veux faire ici est de vous présenter une instruction PHP ou une fonction connue comme include all require. C' est quoi exactement ces deux-là ? Eh bien, jetons un coup d'oeil à notre site Web pourrait. Actuellement, c'est une seule page. Vous cliquez sur l'un des liens ici. Il vous amène à la section respective et ainsi de suite. Mais que se passe-t-il si nous voulions que notre site Web soit comme tous les sites traditionnels où vous avez plusieurs pages ? Ainsi, lorsque vous cliquez sur des témoignages, par exemple, un vétéran amenant ceux ici à la section de licenciement, il nous amène à une page séparée spécifiquement pour le témoignage. C' est généralement comme ça que sont la plupart des sites Web. Nous pouvons utiliser PHP pour tel, cependant. Laisse-moi te montrer quelque chose. Ok, passons à w trois écoles dot com remarqué que chaque fois que je clique sur l'un de ces onglets ici, deux choses sont toujours cohérentes. Bien sûr, tout le monde de cette page est l'en-tête et le pied vers le bas hit Le contenu ne change jamais entre la page réelle elle-même. Le contenu change. Oui. Si vous avez cliqué sur Djebbour maths, par exemple, tous ces changements ici. Cependant, l'en-tête et le pied de page sont toujours les mêmes. Vous trouverez toujours un logo sur la gauche. Vous trouverez son menu sur la droite, que ce texte sur la droite vous les trouverez dans le menu de navigation vendredi. Peu importe quel onglet cliquez sur il est exactement le même encore et encore en tant que tel, Si nous voulons créer une page séparée pour l'un de ces éléments de menu, nous allons vouloir sortir pour être exactement le même. Vous vouliez y aller sur la gauche, le menu principal sur la droite, puis en bas ici. Bien sûr, nous voulons être exactement les mêmes sur toutes les pages sans être dit. Si nous voulons créer un fichier html de début de témoignage, disons , nous devrions inclure exactement le même. C' est un code similaire pour l'en-tête, et les aliments sont tous à nouveau sans PHP. Mais avec PHP, nous pouvons simplement aller aux témoignages, ne pas fichier html et simplement dire, hey, hey, appelez le contenu ou récupérer le contenu de l'en-tête. Tous ont récupéré le contenu du pied de page avec une seule ligne de code hors ligne que vous ne me croyez pas . On va vérifier ça. D' accord. Ce que je vais faire ici, c'est d'accord ? Je vais passer à un dossier public ce HTML, et ici je vais créer un nouveau fichier. Ok, laisse-moi, genre, cliquer ici, Lim Jetable. Fermez ceci dans les jours de clôture de la fixation. Bon, donc ici, je vais cliquer. Cliquez sur un nouveau fichier, et je vais appeler ce fouda point PHP. Ok, maintenant, remarquez. Je l'appelle le PHP et non pas le point html. Vous le découvrirez bientôt par. Je vais revenir à l'index point html et puis ouvrir ce fichier. Je vais descendre jusqu'ici, et ce que je vais faire, c'est récupérer le contenu de la section entière du pied de page. Donc, ici, je vais descendre jusqu'ici. Gravier de ça. Attrape tout. Je vais couper ça maintenant. Je vais ouvrir, fouda dot PHP et je vais coller tout ce froid ici. Laisse-moi aller de l'avant et sauver. Je vais également enregistrer le fichier html point d'index qui a sauvé celui-ci aussi. Maintenant, si je retourne à la Broza et je voudrais d'abord une page remarque que nous ne voyons plus le pied de page même porte En ce moment, nous avons un pied du fichier PHP. Cependant, dans le fichier html point d'index lui-même, il n'y a pas de code. Il n'y a rien Tell dans le navigateur ou le serveur pour récupérer le contenu de fota dot PHP. En tant que tel, nous devons maintenant inclure une déclaration PHP dans notre in exert sa NFL pour dire, hey, hey, récupérer le contenu de la nourriture tar dot PHP. Et c'est là que l'instruction PHP magique va tomber. Donc juste ici juste au-dessus de la balise Buddy, je vais dire le point d'interrogation PHP include. Et puis dans les manteaux fota pensait P, euh, point de pied de page PHP, puis deux-points et puis point d'interrogation gravi sur le symbole. Ceci ici est le code PHP disant au serveur de récupérer le contenu hors pied de page point PHP. Et bien sûr, nous disons juste pour la victoire parce que pied du PHP et index point html I et exactement le même dossier, alors assurez-vous que le chemin est toujours correct. Donc je vais aller de l'avant maintenant, sauvegardez ça, mais maintenant si je reviens ici et que j'ai rafraîchi la page, remarquez que nous ne disons toujours pas le contenu du pied de page. Pourquoi ? Parce qu'en ce moment notre dossier est trop froid. Index pensé HTM l Si vous voulez que votre serveur traite le code PHP, vous devez nommer votre fichier point PHP et ne pas penser que html a remarqué le débat que nous pourrions ici est tout en noir. Ils ne sont pas mis en évidence. Comme le code html. Il est en bleu, rouge et ainsi de suite. Donc, ce que je vais faire maintenant, c'est que je vais simplement renommer le fichier html de point d'index. Je vais renommer ceci en index point p h p. Confirmons cela. Et maintenant le Nord est que tout d'un coup semble être bon en ce moment est maintenant mis en évidence parce que nous avons maintenant enregistrer le fichier comme un fichier PHP et pas un fichier HTML. Si je retourne au navigateur et je rafraîchis la page, vous sauriez remarquer. Nous avons maintenant le pied de page apparaissant. Alors j'ai dit, OK, les icônes sont enfin apparues. J' attendais toujours que les icônes s'affichent, mais vous ne pouvez pas voir que le fota est maintenant complètement affiché parce que ici nous avons le code appelant le contenu de PHP fertile. Pied de la page B a le code HTML pour le pied vers le haut. Et bien sûr, nous avons également renommé notre fichier html point d'index pour indexer la pensée P H p Maintenant, vous pourriez vous demander, OK, donc je vous ai montré comment utiliser l'instruction include a. Cependant, il y a une autre déclaration est très, très similaire, qui est l'instruction require. Quelle est exactement la différence entre inclure et le chœur ? Les deux d'entre eux atteindront le contenu de votre chute correctement. Cependant, l'un est plus sécurisé tandis que l'autre est moins sécurisé. Qu' est-ce que je veux dire ? Gardez à l'esprit que chaque fois que vous avez affaire à du code PHP, vous avez également affaire à un serveur Web. Par conséquent, il peut y avoir des situations où il y a une rupture de la communication entre votre navigateur et ce site Web. Ou peut-être que l'UPS refuse tous de répondre. Qui sait quand ces ventes, ou appelez la déclaration que vous choisissez bien indiquer comment le Lewis civil répondra dans un tel scénario. Dans le cas de include include continuera à sortir du code, même s'il y a toujours un require ne sera plus ce code animal de jeu, il s'arrêtera simplement pour le démontrer. Faisons quelque chose. D' accord. Je vais venir ici et nous allons indexer PHP point. Euh, je vais venir ici. Laissez-moi juste ajouter du code si similaire ici. Laisse-moi appeler ce H 1 et je dis bonjour. Laisse-moi fermer cette étiquette h un aussi. Ok, je vais y aller maintenant, et je vais enregistrer ce dossier. Cependant, je vais changer le nom de notre pied sur PHP. Je vais renommer ça en, disons, pied de haut. Ah, un point PHP. Venons-en de ça. Ok, donc en ce moment, par ici, où vous avez l'inclusion pour le point PHP nous n'avons plus le pied de la Petri est tombé parce qu'il est maintenant pied sont avertis point PHP. Donc il devrait y avoir un jamais juste ici. Mais remarquez ce qui va se passer si je retourne au navigateur et que j'ai rafraîchi la page. Notez que, oui, nous n'avons plus le pied de page parce qu'il est maintenant pied sont errés. Ph b. Cependant, nous avons encore maintenant le Nous avons maintenant le bonjour. Tagé le type h un affichant bonjour parce que c'est ce qu'il nécessite. Donc, c'est ce qui inclut fait. Même s'il y avait déjà une erreur ici parce que pied de poésie n'a pas été trouvé, inclure, encore continué à sortir le H un tag off. Bonjour. Cependant, si je change, inclure maintenant pour exiger tout ce qui va se passer, je vais aller de l'avant maintenant. Sauvegardez ça. Si je remets les factures sont sur. Je me réfère à la page avis que les oreillettes intactes ne sont plus cet endroit. C' est parce qu'on pourrait être chœur dès qu' il y a une zone hors de tout genre. Le reste de l'enregistrement du navire frigorifique ne sera plus affiché. C' est pourquoi il est plus sécurisé. Vous ne voulez généralement pas garder la sortie dans le code S'il y a un Evel, il existe de nombreux scénarios où ce ne sera pas une bonne idée de continuer à mettre du code. Même s'il y a déjà un message, les pirates peuvent en profiter et gâcher vraiment votre site Web. Donc, pour être du côté sûr, vous voulez généralement aller avec require plutôt que d'inclure tous Kate. Donc je vais aller de l'avant maintenant et simplement enlever la balise H one. Et bien sûr, je vais enregistrer le fichier. Et puis je retournerai ici. Et, bien sûr, aussi simplement renommé le pied un retour à ah pied de page point PHP. Laissez-moi confirmer celui-là. Et voilà. Ok, je vais retourner ici. Rafraîchissez simplement la page et assurez-vous que tout va bien. Et, ah, donc c'est tout. Donc, merci beaucoup d'avoir regardé la toute première vidéo ici sur la section PHP Allemagne prochaine vidéo wearable Maintenant créer notre fichier PHP point d'en-tête. 101. Créer le fichier header.php: Eh bien, les retours et la vidéo des gens est créée avec succès. Nos pieds adultes fichier PHP et nous avons également été en mesure d'utiliser l'instruction require pour récupérer son contenu. Donc ce que je vais faire en ce moment, c'est de créer un nouveau fichier huit, et on appellera ce fichier. La tête sont point PHP est limité. Fermé cet index avec le fichier PHP. Ah, laisse-moi créer un nouveau fichier. Appelez ça hedda dot PHP confirmer et d'accord, je vais ouvrir huit autres PHP. Ouvrons aussi l'index point PHP. Donc saisir dans le froid pour la tête du PHP va être un peu plus compliqué que le pied du PHP. La raison en est que même si nous voulons seulement le logo et le menu de navigation, l'image de fond future ainsi que ce texte et ces deux boutons tous inclus à l'intérieur la section Hedda, c'est juste ici. Remarque C'est le jour de la maison Hedda I. D. Et sa section tête off contient également cette colline de division de classe de héros et tous ces autres contenus. Donc ça va être un peu plus délicat, mais je vais en parler plus en détail dans la toute prochaine vidéo. Donc, juste pour garder les choses simples pour cette vidéo, je vais aller de l'avant et prendre tout jusqu'à l'endroit où vous avez la balise HTML sur le dessus . Donc je vais couper ça et puis je vais à la tête du tahp et on colle tout ce code . Sauvegardons et revenons ensuite à in exert PHP et bien sûr ici. Je suis juste en train de retirer cet espace vide juste ici. Je vais dire la question Mark PHP exige, puis les manteaux. Et puis Hedda, Je pensais, P h P personne Colon Mark acquitté et symbole. Sauvegardez ça. Retournons ici. Rafraîchissez la page et voilà. Donc, avant le PHP est maintenant marcher ainsi que le pied de page apporté PHP. Donc c'est tout pour créer la tête du fichier Petri Allemagne Vendex Video disponible maintenant essayer de créer une page séparée 102. Créer la page de contact: Eh bien, reviens. Donc ce qu'on va faire maintenant, c'est qu'on va créer une page séparée pleine. Disons la section contact. Ok, donc ce que je vais faire maintenant, c'est , comme d'habitude, je vais retourner ici. Ouvrons notre dossier XML point public. le bouton droit ici. Quittez un nouveau fichier appelé son point de contact PHP. Confirmons celui-là. Je vais l'ouvrir. Tout d'abord, allez, ouvrez. D' accord. Je vais retourner à l'index de PHP. Maintenant, prenons la section pour le contact. Quoi, donc ça va être là ? Section I d. Contacts. Je vais tout attraper jusqu'ici. Je vais aller de l'avant maintenant et couper cette tête sur plus pour contacter PHP rythme tout ce code . Sauvegardons ça. Je vais également enregistrer notre point d'index PHP aussi. Sauvons celui-là. Retournons ici. Rafraîchissons la page et OK, donc il est appelé ici. Nous n'avons plus la section contact. Nous pouvons toujours cliquer sur le contact, vendre en plus parce que nous n'avons pas mis à jour le menu. Un lien. Mais ce que je peux faire, c'est que je peux aller à mon voile et ensuite dire simplement la pensée de contact. PHP appuie sur Entrée. Et voilà. Maintenant, vous pouvez voir que nous avons la page de contact sans la tête sans la nourriture. Revenons donc à notre contact avec PHP. Et maintenant, incluons ou exigeons plutôt l'en-tête et le pied. Alors faisons ça. Je vais ouvrir une nouvelle ligne de frappe blanche en haut. Mais vous avez la section I d Et je vais juste ouvrir la balise PHP PHP nécessite Coates hedda dot PHP Ajoutons un cool longtemps fermé une balise PHP. Et puis, bien sûr, je ne copie pas celui-ci aussi, et puis il viendra tout le chemin ici et ensuite simplement répéter le processus. Mais cette fois changer l'en-tête deux pieds de page point PHP enregistrer. Et maintenant je vais retourner au Broza, rafraîchir la page et le hé tu pars. Et maintenant, nous avons avant d'être appelés. Nous avons aussi le pied sont appelés ainsi et notez que notre formulaire de contact US est maintenant aussi style parce que nous appelons la tête du PHP qui a également le lien vers le fichier CSS. Donc c'est un événement allemand. XVID disponible maintenant Aller de l'avant pour mettre à jour les liens du menu. Je te verrai alors. 103. Mise à jour des liens du menu: bienvenue à la vidéo des gens est créé avec succès notre contact avec le fichier PHP. Cependant, ici sur les principaux nombreux lorsque nous cliquons sur contact, il ne fait rien parce que nous n'avons pas mis à jour le lien pour pointer vers le point de contact page PHP . Donc, pour ce faire très, très, très simple, je vais retourner au fichier PHP point d'en-tête parce que c'est le fichier contenant notre menu principal maintenant et puis tout ce que nous avons à faire est d'aller à la section de navigation, regardez pour la section des contacts et bien sûr, ici. La balise A est bien, nous voulons la prendre parce que c'est le lien. Je vais juste venir ici maintenant et dire simplement quatre slash contact adat P H p. C'est tout ce qu'il nous faut faire. Je vais y aller maintenant. Sauvegardez ça. Nous allons venir ici d'abord de Page et Linda assurez-vous que je suis sur la page d'accueil elle-même. Ok, donc pour moi en ce moment, si je clique sur contact, il nous amène maintenant à la page point de contact p h p page. C' est aussi facile que ça. Nous allons donc créer d'autres pages. Il suffit d'aller dans votre menu de navigation me et mis à jour la taxe A pour les pointer deux points ses liens vers les nouvelles pages, cependant, remarquez maintenant que nous sommes même le monde pour contacter la page PHP, nous n'avons aucun moyen de revenir à la page d'accueil. Une solution pourrait être de créer un nouvel élément de menu appelé Accueil et simplement pointer que je tente vers la page d'accueil. Cependant, une meilleure façon, plus que de sortir des points dans ou de créer un lien vers la page d'accueil serait d'ajouter le lien sur l'objectif bas. Plusieurs fois que vous allez sur des sites Web, vous ne verrez pas de page d'accueil, mais si vous cliquez sur le logo, il vous ramènera à leur page d'accueil. Alors faisons quelque chose de très, très similaire ici. Je vais juste retourner à la tête du fichier PHP. Cherchons la section logo et bien sûr. C' est juste ici, mais vous avez du rap local et puis le nom. Donc très simplement où nous avons l'image affichant le logo réel, je vais juste ajouter l'étiquette a un voyage égal. Et puis en manteaux, vous pourriez penser, Comment pointons-nous vers la page d'accueil. C' est très, très simple. Il suffit d'ajouter 1/4 barre oblique. C' est tout ce que tu as à faire. Alors maintenant je vais aller de l'avant, fermer ça et, bien sûr, à la fin, juste ici. Je vais aussi fermer le tag une fois de plus. Et voilà. Je vais aller de l'avant et sauver ça. Allons plus ici fait référence à la page et bien sûr, notez que nous sommes toujours en contact avec PHP notre page. Cependant, si je connais Nova sur le logo, en particulier le cercle juste ici quand je clique dessus, cela nous ramène à la page d'accueil pour le fichier PHP point index. Cependant, ce texte lui-même n'est toujours pas un lien. Donc tout ce que vous avez à faire maintenant, c'est que vous pouvez venir ici et faire exactement la même chose. Alors prenez juste ces une balise avec la Ford Slash venir ici collé pour la classe de travée attaques continues. Et bien sûr, j'ai fini ici. Allez-y et fermez simplement. Ah, la balise a enregistrer Retournez ici fait référence à la page et ils vont maintenant Le logo entier est cliquable . Allons au contact avec la page PHP, cliquez sur le texte, non ? R. Il nous ramène à la page d'accueil de l'index point p h p. Donc c'est tout pour mettre à jour nos liens manuels. Et bien sûr, je te verrai dans le prochain cours. 104. Challenge PHP: Je voudrais profiter de cette occasion pour vous présenter un petit défi si vous êtes prêt à le faire . Jusqu' à présent, si bon nous avons été en mesure de mettre à jour nos liens de menu. Cependant, au contact de PHP avis, il y avait encore vu l'image de fond ainsi que cette section héros alors que idéalement tout ce que nous devrions être vus serait le logo, le menu de navigation et ensuite le formulaire de contact. Un peu comme ce que vous avez ici à l'Académie de la Banque mondiale. Voici la page d'accueil. Mais si vous cliquez sur contact, vous pouvez voir dès maintenant que vous n'avez plus la section héros. Tout ce que vous avez est juste un texte ainsi que le formulaire. Il est seulement sur la page d'accueil où vous avez ces héros section avec l'image de fond et le texte. De même, je veux que vous essayez de recréer quelque chose de similaire ici sur notre site afin que lorsque vous cliquez sur contact avec PHP, vous ne disiez plus son image de fond. Vous n'avez plus dit ce texte deux boutons. Tout ce que vous verrez sera le logo, le menu de navigation, puis le contenu pour les entrepreneurs sont formés, Donc je vais vous donner quelques conseils si vous revenez au fichier PHP point d'en-tête. C' est le jour où nous essayons de retirer du patrimoine PHP ce jour de classe de héros. Donc, vous allez simplement supprimer ce texte, mettre à l'intérieur du fichier PHP point d'index, et puis vous devrez faire un peu de style parce que quand elle a supprimé cette section votre pièce Hedda hors du logo. Et dans le menu de navigation, nous n'avons plus l'image de fond comme, comme son arrière-plan vous. Donc, vous devrez utiliser un peu de CSS pour appliquer, peut-être un sac sur cool off noir ou peut-être un autre type de couleur. C' est donc le défi. Je vous invite à l'essayer si vous êtes prêt à le faire. Et, bien sûr, si vous rencontrez des défis, faites-moi savoir plus qu'heureux de vous aider. Donc, je pense, tellement de fortune, et bien sûr je te verrai dans la prochaine classe 105. La fonction date: Eh bien, reviens. Je veux te montrer un moyen rapide. Ou plutôt, un retour rapide. Je te veux. Bienvenue de retour. Je veux vous montrer une meilleure façon de sortir les dates dans notre nourriture. Donc, mais nous avons tous les droits réservés, notre texte de copyright. ce moment, nous mettons manuellement la date avec HTML, ce qui signifie que lorsque la nouvelle année arrive devra revenir à notre code, puis changer 2022 2021 bateau avec GHB, nous pouvons effectivement le faire automatiquement. Les gens garderont une trace de l'année, puis quand la nouvelle année entrera, elle changera automatiquement 2022 2021. Alors comment on fait ça ? Eh bien, nous allons utiliser une fonction appelée la date PHP. Fondamentalement, PHP a beaucoup de fonctions comme les programmes de pré-construction qui peuvent produire de la force de données. Donc ce que je vais faire ici, c'est que je vais aller à mon pied, a commencé PHP parce que c'est le fichier qui a la date. Et ici, je vais supprimer 20 21e de tous, et puis je vais introduire le code PHP d'ouverture. PHP et puis je vais dire echo Echo est essentiellement utilisé pour sortir des données. C' est comme imprimer notre contenu. Donc mon écho, nous demandons à PHP d'afficher du contenu. Donc, nous voulons afficher la date. Donc, en conséquence, je vais dire écho, puis dates, puis entre parenthèses et puis en double couches, j'ajouterai la capitale du code, pourquoi ? Et puis mon point-virgule, et puis je vais fermer le code PHP. Ce que cela fait en ce moment, c'est que nous disons écho à la date et pourquoi la capitale représente l'année. Alors laissez-moi aller de l'avant maintenant et sauver ceci et je vais revenir à mes factures sont se réfère à Page. Et si on est à l'école jusqu'ici, tu peux voir qu'on a maintenant 2020 en sortie, Ted. Mais comment pouvons-nous savoir que ça marche ? Si je reviens ici et que j'ai changé la capitale, disons que je représenterai le jour dans ce cas. Si je reviens ici et que j'ai changé la capitale, disons que je représenterai le jour dans ce cas Je vais aller de l'avant maintenant sauver à nouveau. Je vais revenir à mon navigateur étaient d'abord une page et maintenant vous pouvez voir aujourd'hui est mardi. Donc maintenant, vous pouvez voir PHP fonctionne réellement. Donc c'est le code général, non ? Vous avez votre code PHP d'ouverture, puis écho à la sortie, puis la fonction est appelée dates. Mais même à propos des dates, il y a beaucoup de variables avec une date que vous pouvez avoir le temps vous pouvez avoir le jour où vous pouvez avoir le mois. Vous pouvez avoir l'année et ainsi de suite. Donc, chacune de ces variables a son code. Donc, dans ce cas, je représente le jour. Et si je voulais afficher, disons, disons, le mois comme exemple, je vais supprimer l et utiliser le capital F à la place. Sauvegardons ça et laisse-moi te montrer. Je vais rafraîchir les pros sont venus tout le chemin ici et maintenant vous pouvez voir que c'est Juin 2020. En fait, allons-y et sortons le mois et aussi ah, l'année. Donc, il y a B f, puis l'espace, puis une capitale. Pourquoi retourner ici ? Rafraîchir. Viens tout le chemin ici et tu y vas. Nous sommes en juin 2020. Notez en passant, que ces lettres, ils en fait casse sensible petit air. Quatre ne sont pas mis quoi que ce soit, il ne sortira que la lettre réelle f tandis qu'un petit peu pourquoi sortira les deux derniers chiffres de l'année. Donc, dans ce cas en ce moment, si je l'ai sauvé et que je suis revenu ici, il sera maintenant 20 par rapport à 2020. Alors gardez ça à l'esprit. Retournons ici. Tout changer pour pourquoi économiser ? Et voilà. C' est ainsi que vous pouvez utiliser la fonction de date pour afficher la date de l'année de la pièce. Et si vous voulez plus d'instructions, vous pouvez aller à PHP dot net, puis rechercher simplement la fonction de date. Ici vous trouverez toutes les différentes variables que vous pouvez utiliser, comme le capital s. Et vous pouvez utiliser Z. Vous pouvez utiliser W et ainsi de suite et ainsi de suite. Donc c'est ce que je pense, une telle fortune. Je te verrai dans la classe suivante 106. Rendre notre formulaire de contact: D' accord. Alors bienvenue à la toute dernière vidéo ici dans notre résection d'époque. Et quand je veux faire ici pour vous montrer comment faire marcher le formulaire PHP, nous l'avons actuellement comme une forme de style de Dieu. HTML CSS, mais rien de plus. n'y a pas de fonctionnalité dans les coulisses Maintenant, j'ai déjà créé tout le code nécessaire. Donc ce que je vais faire maintenant, c'est de vous accompagner dans la cour et de vous expliquer comment ça marche. Donc, je n'ai pas eu mon contact avec le fichier PHP ouvert ici, comme vous pouvez le voir. Et ici, c'est là que commence la forme. Ce que vous avez quatre équilibres de méthode obtenir maintenant. Il y a deux types de valeurs que vous pouvez fournir ici. Vous pouvez soit aller obtenir tous les post est la beaucoup meilleure valeur parce qu'il est plus sûr que get. Et je vais te montrer exactement pourquoi. Ce que je vais faire maintenant, c'est que je vais simplement aller de l'avant et enregistrer ces deux fichiers. Ne vous inquiétez pas pour eux. t'expliquerai exactement ce qui se passe, mais je vais retourner à mes coups. Nos calendriers se rafraîchissent. Non, non, que nous avons comme valeur vitale où nous avons le formateur, mais c'est prêt à aller bien, donc pour venir maintenant. Et j'ai rempli mon nom email et j'ai quelques messages. Et bien, et je vais frapper envoyer, accord. Fondamentalement, nous avons un message d'erreur, mais ce n'est pas nécessairement parce que off qui tombe réellement malade. C' est à cause du changement développé pour obtenir Mais il est quelque chose d'autre vraiment voulu vous montrer ce qui se passe dans le u R l Lorsque vous utilisez get you see ici, nous avons le nom la personne qui envoie l'e-mail C'est Alexander Bony. Nous avons son adresse e-mail. On a le titre. Nous avons le message Toutes les têtes de sortie dans Diyala Bill. C' est ce que get fait. Il sortira le contenu de la forme dans l'U. R L, ce qui est très, très mauvais pour des raisons de sécurité. Vous voulez aller avec post dans le parce que avec post, vous ne verrez pas du tout ces valeurs. L' Islam retourne ici et change le format qu'il va publier maintenant la raison pour nous avons réellement les messages d'erreur, parce que dans la forme réelle faire tout le processus, et nous Basin, poster, post, post, post post et ainsi de suite. Donc, si on voulait utiliser Get va devoir changer certains des gars ici. C' est pour ça que nous avions ce message Errol. Mais en revenant ici, j'ai le post pour la méthode de formulaire Vela. Et maintenant, ici, où vous avez de l'action. C' est très, très important. Parce que juste ici, cela signifie pour PHP. Que devrait se passer exactement quand un utilisateur clique sur envoyer droit ? Nerveuse et ok, Allez nous contacter, former le PHP et obtenir tout le tribunal de traitement nécessaire de la journée. Ce juste ici est maintenant le formulaire de contact US point fichier PHP. C' est le pH réel que nous pourrions marcher dans les coulisses pour produire la forme et le contenu et faire toutes les autres choses nécessaires. Alors que se passe-t-il exactement ici ? Un couple de choses étaient assez nombreuses choses en fait eux Juste rafraîchir cette page. Laisse-moi te montrer quelque chose si j'essaie d'envoyer ce formulaire sans remplir le titre, devinez ce qu'il dit. Laisse-moi te montrer quelque chose si j'essaie d'envoyer ce formulaire sans remplir le La police remplit ce champ même si je remplit le champ et je dis bonjour et j'appuie à nouveau sur Envoyer . Il est aussi dit que la police suit ce domaine aussi. Fondamentalement, nous avons dit à Peter de confirmer que descend er a effectivement rempli tous les champs nécessaires . Et comment on fait ça ? Eh bien, on l'a fait ici. Les prêteurs vous guident à travers l'initiale. Ah, début. Alors, juste ici. Ceci est juste pour confirmer qu'il y a effectivement des données dans le formulaire. Et s'il n'y a pas de formulaire, s'il n'y a pas de données, disons simplement, Hey, il n'y a pas de données de poste. C' est essentiellement ce que ça fait ici. C' est là que nous commençons à confirmer que l'utilisateur remplit effectivement les champs. Vous avez cette fonction de filtre, filtre, désinfecter, chaîne email Tout cela ici est juste pour confirmer que l'utilisateur est en fait remplir ces se sent correctement et ensuite inviter ici. Vous pouvez le voir dire que les retours remplis tous les messages. Fondamentalement, si le champ de nom n'est pas champ ou si le sentiment d'e-mail n'est pas rempli ou si la sensation de tatouage n'est pas remplie ou même du champ de message n'est pas rempli, mais dans la sortie. Rejetez-le, en disant un ou plusieurs. Les champs tranquilles sont vides. Je sais que cela semble compliqué, mais c'est fondamentalement PHP. Ce n'est pas si compliqué. Ne vous inquiétez pas. Et puis ici, si pour quelqu'un qui n'est pas là, un utilisateur a rempli tous les champs mais n'a pas bien rempli les fidèles, il va dire que le format de l'e-mail est incorrect. C' est exactement ce que fait cette fonction particulière. Et vous pouvez voir cela si oui, fondamentalement c'est l'état. C' est tout conditionnel si l'utilisateur a rempli les téléphones. Mais le remplissage des fidèles sortent correctement ce message beaucoup, disant l'e-mail de ce qui est incorrect. C' est exactement ce que tout ce tribunal ici fait essentiellement sa confirmation que l'utilisateur a rempli tous les champs correctement. Et si l'utilisateur n'a pas sorti de message Evel, accord ? Non, avant que je continue comme ici, vous avez le nom, l' e-mail, e-mail, le message de titre. Il est important d'ajouter une nouvelle variable aux champs de formulaire. Et c'est exactement ce que j'ai fait ici. Si elle a été appelée le nom que vous pouvez voir ici sous le nom de notre contact, nous avons le nom égal nom pour l'e-mail. Nous avons nom égal e-mail, puis aussi pour le titre. Nous avons un nom égal Titou. Et puis enfin, pour le message, nous avons nom égal message. Pour que Petri nettoie correctement chacun de ces champs, il faut que le nom soit disponible. Alors, s'il vous plaît, je vais y aller et faire ça. N' oublie pas de faire ça. Retourner au formulaire de contact. Donc ici, en gros, ce qui se passe ici. Est-ce que ça va ? Alors que se passe-t-il si l'utilisateur a rempli l'ancien ? Il se sent correctement envoyer l'e-mail comme c'est fondamentalement ce que cela fait. Écrivain. Vous avez le péage, et c'est l'adresse où l'e-mail sera envoyé à n'importe quel contact de sera envoyé à. Donc, vous pouvez entrer dès maintenant et changer ceci à l'e-mail approprié ici. ce moment. Nous avons créé le message lui-même. Lorsque l'e-mail est envoyé, comment sera-t-il présenté ? Eh bien, nous avons le sujet. Ok, la valeur du sujet. Et bien sûr, ici, nous avons le nom, puis le titre. Donc, en gros, lorsque nous recevons l'e-mail ou à partir du formulaire de contact, le titre de l'e-mail aura également le nom de la personne. Demandé que titre C'est essentiellement ce que ces lignes que le sujet produira cette ligne , puis le message réel hors de l'e-mail aura maintenant le nom de la personne, l'e-mail, le titre, puis le message. C' est ce que tout ça fait. Vous avez dit cette barre oblique inverse et cette barre oblique inverse et ce sont comme les sauts de ligne pour être dehors. Vérifiez que vous ne l'avez pas fait. HTML. Ceci est juste pour s'assurer que chacun de ces éléments sera dans une ligne distincte. Mais tout cela ici, mais juste les sorties dans les valeurs de toutes les sorties de filtre impliquent le nom de l'e-mail titre , puis le message. Et puis, bien sûr, votre email doit avoir la tête en place. Donc, la tête de I t sera film sera impact contact et ici à nouveau. Vous voulez confirmer que cet e-mail réel ici est correct ? J' ai mis le mien pour être exactement le même que je l'ai dit ici et puis, bien sûr, a répondu à et puis l'e-mail de poste. Nous voulons donc répondre à l'e-mail qui a été rempli dans le formulaire de contact, qui est l'endroit où nous avons notre poste et un e-mail juste ici. C' est exactement ce que fait cette ligne. Et puis, bien sûr, vous avez le Père Noël appelle le courrier à la tête de message sujet comme fondamentalement, et c'est la fonction finale pour envoyer l'e-mail. Enfin rituel, bien sûr, à nouveau aura les images. Il a été envoyé au sujet, ce message. Et, bien sûr, la tête nécessaire est exactement ce que sa fonction pourrait faire. Et puis enfin, si l'e-mail a été envoyé avec succès, Echo, Cela doit avoir envoyé un message de envoyé avec succès Merci ou bien dire qu'il y avait un Evel . Le message ne nous a pas été envoyé fondamentalement quoi ? Ce notre dernier morceau de code le fait comme je l'ai dit, je vais partager le code avec vous, et vous êtes plus que bienvenu pour le tester. Essayez-le. Et, euh, c'est à peu près tout. Donc si vous avez des questions à ce sujet, faites-le moi savoir. Merci beaucoup d'avoir regardé, et je verrai dans la prochaine classe 107. Conclusion finale: alors c'est qu'il deviendra officiel. C' est vous, la fin de ce cours sur HTML et CSS et du fond de mon cœur llamado sûr Spanglish tant. Et j'espère que vous apprécierez pleinement ce cours et j'espère que vous en avez assez appris sur HTML CSS et certains de conçus en PHP pour construire de beaux sites interactifs réactifs. Si vous aimez le cours, s'il vous plaît ne pensez pas laisser les commentaires de commentaires vraiment aider. Milieu aussi, s'il vous plaît passer peut-être 30 secondes et juste attendre. Si vous dites aux gens combien vous avez apprécié le cours tout vraiment, vraiment l'apprécier. Et n'oubliez pas que je suis sur YouTube. J' ai une chaîne YouTube le singe abonner Hit la facture de sorte que vous avez notifié chaque fois je télécharge dans vous tutoriel. Et bien sûr, je suis aussi sur Facebook. Ce singe en ligne C'est ma page. Rejoignez le groupe Facebook. Si vous ne l'avez pas fait, c'est un endroit idéal pour interagir avec moi et avec d'autres étudiants. Encore une fois, du fond de mon cœur. Merci beaucoup d'avoir terminé le cours. Et je vous souhaite plein succès dans les projets de développement en Europe. Ecoute et je te parlerai la prochaine fois. Au revoir