parcours d'apprentissage

Introduction au HTML

Notions liées au Web

Navigateurs et noyaux courants

normes du Web

Introduction aux balises HTML

Spécification de la syntaxe HTML

Balises de structure de base HTML

Page de création de l'outil VSCode

DOCTYPE et lang et le rôle des jeux de caractères

sémantique des balises

balise de titre

Balises de paragraphe et balises de saut de ligne

Cas d'actualité sportive

balise de formatage du texte

balises div et span

Balises d'image (en haut)

Balises d'image (ci-dessous)

Points à noter concernant les balises d'image

Dossiers de répertoire et répertoires racine

Chemin relatif (en haut)

Chemin relatif (ci-dessous)

chemin absolu

Balise de lien (en haut)

Balises de lien (ci-dessous)

lien d'ancrage

Balises de commentaires et caractères spéciaux

Cas complet (partie 1)

Cas complets (partie 2)

Introduction aux balises HTML (Partie 2)

Utilisation de base des étiquettes de tableau

Libellé de la cellule d'en-tête

Propriétés liées aux tables (comprendre)

Nouveau cas de classement

Balise de structure de table

Fusionner des cellules

Résumé du tableau

liste non ordonnée

liste ordonnée

Liste customisée

Résumé de la liste

Scénarios et classifications d'utilisation des formulaires

champs de formulaire

Zone de texte d'attribut de type d'entrée et zone de mot de passe

Bouton radio et case à cocher de l'attribut de type d'entrée

Attributs de nom et de valeur d'entrée

Attributs vérifiés et maxlength de l'entrée

Questions et réponses en classe sur des scénarios d'utilisation de quatre attributs d'éléments de formulaire de saisie

Attribut de type d'entrée bouton de soumission et de réinitialisation

attribut de type d'entrée bouton ordinaire et champ de fichier

étiquette étiquette

sélectionner le formulaire déroulant

zone de texte étiquette de la zone de texte

Résumé des éléments du formulaire

Page d'inscription (1)

Page d'inscription (2)

Page d'inscription (3)

Page d'inscription (4)

Apprendre à lire des documents

Une introduction aux feuilles de style en cascade CSS

Introduction au CSS

Découvrez les spécifications de la syntaxe CSS

Style de code CSS

Le rôle du sélecteur CSS

sélecteur de balises

sélecteur de classe

Dessiner des boîtes à l'aide de sélecteurs de classe

Utilisation spéciale du sélecteur de classe - plusieurs noms de classe

sélecteur d'identifiant

sélecteur de caractères génériques

font-family définit la famille de polices

taille de la police taille de la police

épaisseur de police

style de police style de police

Comment écrire un attribut composite de police

Résumé des propriétés de la police

couleur du textecouleur

Alignement du texte

décoration de texte décoration de texte

retrait du texte retrait du texte

Espacement des lignes hauteur de ligne

Résumé des propriétés du texte CSS

feuille de style interne

feuille de style en ligne

feuille de style externe

Résumé des méthodes d'introduction CSS

page d'actualités

Modifier le style (1)

Modifier le style (2)

Modifier le style (3)

Utilisation des outils de débogage Chrome

guide css du deuxième jour

la syntaxe emmet génère des balises html

syntaxe emmet pour générer rapidement des styles CSS

Formater rapidement le code

Introduction aux sélecteurs composés

sélecteur de descendants

Sélecteur d'élément enfant

Exercices en classe

Sélecteur d'union

Sélecteur de pseudo-classe de lien (Partie 1)

Lien vers le sélecteur de pseudo-classe (ci-dessous)

focus sélecteur de pseudo-classe

Résumé du sélecteur de composés

Qu'est-ce que le mode d'affichage des éléments

élément de bloc

Élément en ligne

élément de bloc en ligne

Résumé des modes d'affichage des éléments

Conversion du mode d'affichage

L'utilisation d'un petit outil snipaste

Version simple du boîtier de la barre latérale Xiaomi

Le principe du centrage vertical du texte sur une seule ligne

Couleur de l'arrière plan

Image d'arrière-plan

carrelage de fond

Nom d'orientation de position d'arrière-plan

Premier cas de localisation en arrière-plan

Cas de localisation en arrière-plan 2-Image d'arrière-plan du Roi de Gloire

Position d'arrière-plan - unités précises

Position d'arrière-plan - Unités mixtes

arrière-plan corrigé

Méthode d'écriture composite de l'attribut d'arrière-plan

couleur de fond translucide

Résumé du contexte

Cas complet de navigation en cinq couleurs (partie 1)

Cas complet de navigation Five-Cai (2)

Empilabilité

héritage

héritage de la hauteur des lignes

priorité

Questions prioritaires

Superposition de poids CSS

Deux exercices sur les poids

Introduction au modèle de boîte

Comprendre l'essence de la mise en page d'une page Web

Composants du modèle de boîte

bordure de modèle de boîte

Méthode d'écriture composée de la bordure

bordure de table fine

Les bordures affectent la taille réelle de la boîte

Remplissage de la marge intérieure du modèle de boîte

propriété du composé de rembourrage

le rembourrage affectera la taille réelle de la boîte

application de remplissage-Barre de navigation Sina (Partie 1)

application de remplissage-Sina Navigation (Partie 2)

Modification de la barre latérale Xiaomi

Le rembourrage ne maintiendra pas la boîte ouverte

Marge du modèle de boîte

Application typique des marges : les boîtes au niveau des blocs sont alignées horizontalement et centralement.

Les éléments en ligne et les éléments de bloc en ligne sont centrés horizontalement

Fusion des marges - marges verticales des éléments de bloc adjacents

Fusion des marges – effondrement des éléments de bloc imbriqués

marges intérieures et extérieures claires

Opérations de base de ps

Analyse complète de la disposition des modules cas-produits

Disposition complète des caisses

Production complète d’images de cas et de paragraphes

Évaluation complète des cas et production détaillée

Production complète de détails de lignes verticales de cas

L'enseignant explique

Analyse express de la disposition des modules

Production d'en-tête de module express

Création express de liste de modules

Principe de bordure arrondie

Utilisation de coins arrondis

boîte ombre

ombre de texte

Guide flottant

Trois façons de mettre en page une page Web traditionnelle

Pourquoi le flottement est nécessaire

qu'est-ce que le flotteur

Caractéristiques du flotteur hors norme

Propriétés flottantes : les éléments flottants sont affichés sur une seule ligne

Propriétés flottantes - Les éléments flottants ont des propriétés de bloc en ligne

Les éléments flottants sont souvent associés à des éléments parents de flux standard

Exercice de mise en page flottante-1

Exercice de mise en page flottante-2

Module d'exercice flottant pour téléphone portable (partie 1)

Module d'exercice flottant pour téléphone portable (partie 2)

Mises en page courantes des pages Web

Deux points à noter concernant le flottement

Pourquoi effacer le flotteur

Nature flottante claire et méthode d'étiquette supplémentaire

Effacer le débordement de l'élément parent flottant

Effacer le flottement après le pseudo-élément

Effacer les doubles pseudo-éléments flottants

flotteur clair

Formats d'images courants

Découpe de couches (en haut)

Découpe de calque (ci-dessous)

outil de tranche

installation de coupeur

Conseils d'utilisation de Cutterman

Préparation

ordre d'écriture des attributs CSS (important)

Idée globale de mise en page

Création de la zone d'en-tête

Production de zones de logo

Production de la zone de navigation de la barre de navigation (Partie 1)

Production de la zone de navigation de la barre de navigation (milieu)

Production de la zone de navigation de la barre de navigation (Partie 2)

Production d'entrées du module de recherche de recherche

Production de boutons du module de recherche de recherche

Réalisation de modules utilisateurs

Production de modules de bannières

Production du module Subnav (Partie 1)

Production du module Subnav (Partie 2)

Production de modules de cours (Partie 1)

production de modules de cours (moyen)

Production de modules de cours (Partie 2)

Module de recommandation Premium (Partie 1)

Module de recommandation Premium (moyen)

Module de recommandation Premium (Partie 2)

production de modules box-hd

production de modules box-bd

module de boîte terminé

production de modules de pied de page

production de modules de droits d'auteur

liens production de modules

Guide de positionnement

Pourquoi le positionnement est nécessaire

Composition de positionnement

positionnement relatif

Positionnement absolu - pas de positionnement parent ou pas de positionnement parent

Positionnement absolu - le parent a le statut de positionnement

Un positionnement absolu hors standard n'occupe pas sa position d'origine.

origine paternelle

Le cas du module absolument chaud du père du fils

Positionnement fixe

Conseils pour un positionnement fixe : fixez-le sur le côté droit du centre de la page

Positionnement collant (Comprendre)

Résumé du positionnement

Ordre d'empilement de positionnement

Algorithme de centrage de boîte en position absolue

Particularités du positionnement

Les éléments flottants ne supprimeront pas le positionnement du texte du flux standard.

analyse de la disposition

production en grande surface

Production du bouton fléché gauche

Production du bouton fléché droit

production de modules ul box

production de modules li à petits points

Résumé de la mise en page Web

l'écran affiche les éléments cachés

visibilitéafficher les éléments cachés

débordement afficher masquer

Cas de pommes de terre (partie 1)

Cas de pommes de terre (partie 2)

Introduction

Pourquoi la technologie elfe est nécessaire

Utilisation de sprite charts (principe)

Utilisation du diagramme de sprite (code)

Exemple de sprite - épelez votre nom

Génération d'icônes de police et avantages

Téléchargement de l'icône de police

Utilisation d'icônes de police

Principe d'ajout et de chargement d'icônes de police

Comment utiliser le triangle CSS

Application de triangle CSS-Effet Jingdong

Interface utilisateur - Style de souris

Interface utilisateur – Supprimer le contour du formulaire et empêcher le glissement des champs de texte

vertical-align implémente l'alignement central vertical des blocs en ligne et du texte

Solution à l'espace vide en bas de l'image

Le texte d’une seule ligne déborde de l’affichage des points de suspension

Le texte multiligne déborde de l'affichage des points de suspension

Compétences en mise en page - utilisation intelligente des marges négatives (Partie 1)

Compétences en mise en page - utilisation intelligente des marges négatives (Partie 2)

Techniques de mise en page - utilisation intelligente du texte autour des éléments flottants

Techniques de mise en page - utilisation intelligente des blocs en ligne

Compétences en mise en page - utilisation intelligente du triangle CSS (Partie 1)

Compétences en mise en page - utilisation intelligente du triangle CSS (Partie 2)

Initialisation CSS

HTML5CSS3 améliore la navigation

Ajouter des balises sémantiques

Ajouter une balise vidéo

Ajouter une balise audio

Ajouter un formulaire de saisie

Ajouter de nouvelles propriétés de formulaire

Sélecteur d'attribut (en haut)

Sélecteur d'attribut (ci-dessous)

Sélecteur de pseudo-classe structurelle - sélectionne le nième élément

sélecteur de nième enfant (en haut)

sélecteur de nième enfant (ci-dessous)

La différence entre le nième enfant et le nième de type

Scénarios d'utilisation et origines des sélecteurs de pseudo-éléments

Utilisation de base des sélecteurs de pseudo-éléments

Scénarios d'utilisation du sélecteur de pseudo-éléments correspondant aux icônes de police

Scénario d'utilisation de pseudo-éléments - effet de pomme de terre d'imitation

Sélecteur de pseudo-éléments - Le pseudo-élément efface la nature flottante

Modèle de boîte CSS3 border-box

Traitement du flou d'image CSS3

Calculer la fonction de calcul de la largeur de la boîte

Transition des nouveaux attributs CSS3 (Partie 1)

Transition des nouveaux attributs CSS3 (partie 2)

Exercices de transition CSS3

H5 généralisé (comprendre)

Introduction

Processus de création de sites Web

Planification du projet Pinyougou

Construction du projet Pinyougou

Projet Pinyougou-Développement modulaire des styles

Production d'icônes de favicon du projet Pinyougou

Projet Pinyougou-TDK optimisation du référencement de trois grands labels

Construction de la structure du raccourci de navigation rapide de la page d'accueil de Pinyougou

Page d'accueil de Pinyougou - Navigation rapide Production côté gauche

Page d'accueil de Pinyougou - navigation rapide construite sur le côté droit

Icône de police de la page d'accueil de Pinyougou sur le côté droit de la navigation rapide

Construction du module d'en-tête de la page d'accueil de Pinyougou

Page d'accueil-logo de PinyougouOptimisation SEO (Partie 1)

Page d'accueil-logo de PinyougouOptimisation SEO (Partie 2)

Module de recherche de recherche sur la page d'accueil de Pinyougou (Partie 1)

Module de recherche de recherche sur la page d'accueil de Pinyougou (Partie 2)

Module de mots clés de la page d'accueil de Pinyougou

Production du module page d'accueil-shopcar de Pinyougou

Module de statistiques de panier d'achat du nombre de pages d'accueil de Pinyougou

Construction du module de navigation de la page d'accueil de Pinyougou

Production du module déroulant de la page d'accueil de Pinyougou

Page d'accueil de Pinyougou - Production de la classification détaillée de la navigation (Partie 1)

Page d'accueil de Pinyougou - Production de la classification détaillée de la navigation (Partie 2)

Production du module page d'accueil de Pinyougou-navitems

Construction du module inférieur de la page d'accueil de Pinyougou

Production du module Pinyougou homepage-mod-servcie (Partie 1)

Production du module Pinyougou homepage-mod-servcie (Partie 2)

Page d'accueil de Pinyougou-mod_help production du module

Page d'accueil de Pinyougou-mod_copyright module production

Page d'accueil de Pinyougou - construction de la boîte principale

Module flash de la page d'accueil de Pinyougou

Production du module Pinyougou homepage-news-hd

Page d'accueil de Pinyougou-nouvelle production de modules bd

Production de la page d'accueil de Pinyougou-lifeservice (Partie 1)

Production de la page d'accueil de Pinyougou-lifeservice (Partie 2)

Recom de module recommandé par la page d'accueil de Pinyougou (Partie 1)

Module recommandé par la page d'accueil de Pinyougou (Partie 2)

Page d'accueil de Pinyougou - Construction de modules d'appareils électroménagers

Page d'accueil de Pinyougou-Production de tête de module d'électroménager

Exigences de mise en page du principe des onglets de la barre d'onglets

Disposition de la page d'accueil de Pinyougou-tab_list-item (Partie 1)

Disposition de la page d'accueil de Pinyougou-tab_list-item (au milieu)

Disposition de la page d'accueil de Pinyougou-tab_list-item (Partie 2)

Liste d'achat de produits-Construction de structure

Production de modules de vente flash de page de liste Pinyougo

Modification du module de navigation dans la page de la liste Pinyougou

Page de liste Pinyougou - un petit problème

Fin de page de la liste Pinyougou

Production d'en-tête de page d'inscription Pinyougou

Page de liste Pinyougo - production d'en-tête du module principal d'enregistrement

Page d'inscription Pinyougou - production du sujet d'inscription (Partie 1)

Page d'inscription Pinyougou - production du sujet d'inscription (Partie 2)

Page d'inscription Pinyougou-module de sécurité

Page d'inscription Pinyougou - module d'accord et module d'inscription complet

Les pages du projet Pinyougou sautent les unes aux autres et les modalités de travail

qu'est-ce que le serveur

Demander un espace gratuit et télécharger un site Web