# 1 Le modèle de boîte

Structure du site Compréhension

Tous les éléments of this page are Tous les blocs à l'intérieur d'Autres blocs (aka "Box Model"). when vous Faites glisser les éléments web, vous les Faites glisser d'bloc de l'ONU et de les deposer Dans Une Autre. Voilà commentaire Fonctionne HTML!

Texte Lien

super-PLAN

$ 75 / mon

Parfait pour Toute entreprise with 20 employees OÜ plus.

500 Go de stockage
1 Million Vues
20 Collaborateurs
50 Réseaux sociaux
Premier de Soutien

Ce que tu vois

Remarque: Vous comprendrez commentaire Concevoir journey COMME CA with the concepts ci-Dessous.

Que blocs Il en est fait de

Div bloquer

H2 Intitulé super-PLAN

Bloc de texte $ 75 / mon

Paragraphe Parfait pour Toute entreprise with 20 employees OÜ plus.

Liste

Liste Item
500 Go de stockage
Liste Item
1 Million Vues
Liste Item
20 Collaborateurs
Liste Item
50 Réseaux sociaux
Liste Item
Premier de Soutien

essayer vous-même

Faites glisser CE paragraphes ...

Toutes les Fonctionnalités sans les limitations. Tout that tu peux manger. (Ceci Est Un Élément de paragraphe)

ASTUCE: . Cliquez et Faites glisser L'Element de paragraphe ci-dessus et de le deposer Dans le cadre du prix sur la droite You can also UTILISER des raccourcis Comme Le copieur-coller (Ctrl + C, Ctrl + V), copieur tout Faisant glisser en (fr Maintenant alt), et supprimer (supprimer).

Dans le bloc de violette ...

Super PLAN

$ 75 / mon

INFO: Ceci is the Façon Dont la structure de HTML et web Fonctionne - éléments empilent in the other ous à l'intérieur de l'Autre. La Meilleure Façon Voilà de Construire Un site web fluide et réactif.

# 2 éléments de présentation

Les éléments de présentation de la base

. Ajouter des éléments d'un site Web en Cliquant your sur l'icône [+] Dans le coin supérieur gauche VOICI Quelques-uns des éléments les plus les Fondamentaux de la structure de Dans La conception web - sections, des conteneurs et des colonnes.

Une section Prend 100% de la largeur de la fenêtre du Navigateur si vous ajoutez à l'Organe (la toile d'ONU le site web).
Il Est idéal versez les grandes sections horizontales D'UN web site.

Section Element

Un conteneur is bloc non 960px centré Dans le milieu du Navigateur. Habituellement, la plupart du contenu du web site is added à l'intérieur d'conteneur non AFIN Qu'il Soit Centre. Les conteneurs Sont généralement ajoutés à l'Organe OÜ Élément non de la Section.

Conteneur Element

Ajout de colonnes are Le Moyen Le plus rapide versez Construire une mise en place de la page d'UN Web unique. Verser le modificateur Nombre de colonnes Que vous voulez DANS LES Différents Appareils, il Suffit de cliquer sur l'icône de vitesse Dans le coin en haut à droite versez Accéder aux paramètres de l'élément.

Colonnes Responsive

# 3 Concevoir with CSS

Vos éléments de style

Select Élément non et ajouter juin classé dans le panneau de bon le style (Brush Icône). Dans CE panneau, vous can ajouter du texte et des styles graphiques est comme la couleur De La police, la hauteur de la ligne, les dégrade, les frontières, les ombres, et plus encore. Web design visuel is bien, plus amusant Que de codeur de droit?

bouton exemple de conception

Ajouter au panier ➜

Coiffez-vous

Bouton texte ➜

CONSEIL: . Ce bouton une "Button" de déjà-juin de classe with CERTAINS styles de la base Tout en Utilisant le panneau de style - Select le bouton et ESSAYEZ d'ajouter le gradient, frontière, les pièces de monnaie, les ombres intérieur / extérieur, planer styles de l'Etat, et de la transition Pour Les styles planent arrondi.

Qu'est-ce que VOUS AVEZ created

Bouton texte ➜

appliquer la classe 'bouton'

Bouton texte

CONSEIL: . Dans la conception web, vous can appliquer juin classe A De Nombreux éléments verser les faire paraître the same Appliquer la classe "Bouton" que vous versez dessiné le lien ci-dessus en Cliquant sur le [+] au dessus du "Button" panneau de style et en Tapant verser TROUVER this classe.

Exemple Form Design

Merci!

Votre roches mes chaussettes!

Oups! Quelque chose a mal tourné LORs de la soumission du formulaire :(

Coiffez-vous

Merci! Votre request was ReCUE!

Oups! Quelque chose a mal tourné LORs de la soumission du formulaire :(

ASTUCE: Créer D'ABORD des classes de verser les champs et non bouton texte (appliquer the same classe versez les deux champs). Puis changeur les styles de bordure, couleur de fond, et ajouter des styles Pour le vol stationnaire ET Les Presses Etats. Ne pas Oublier de coiffer l'état "Succès" pour l'Élément de formulaire, Trouvé Dans le panneau de configuration (icône d'engrenage en haut à droite).

exemple de Typographie

Lakewood Stout

The Dark Beer de Lakewood, Colorado

La grosse légendaire is née de la belle le mariage d'un homme de la montagne et sa a choisi La plus aimée, la ville de Lakewood Dans le Colorado. L'homme de la montagne aimait also sa hache et son carabine de tir unique, Remington, but Autant Qu'il aimait pas sa ville. Il rêvait de Ses rivières et de montagnes majestueuses flowy. Fait, il a Nommé fils ainsi Gros Elle après. AINSI, la stout Glorieuse Était née sur le cœur d'un homme de la montagne.

«Je Fabriqué this bière Glorieuse verser Exprimer mon amour éternel pour ma belle ville".

- Mountain Man

Coiffez-vous

Lakewood Stout

The Dark Beer de Lakewood, Colorado

«Je Fabriqué this bière Glorieuse verser Exprimer mon amour éternel pour ma belle ville".

- Mountain Man

ASTUCE: . Allez-y et ajoutez la typographie et styles Personnalisés à l'arrière-plan de Pointe froide: If you ajoutez les styles de typographie à l'ONU bloc de parent, l'ensemble de Ses éléments de texte enfants hériteront de styles CES de texte . En CSS CE comportement is Appelé "cascade".

# 4 Disposition with CSS

Mises Building with Web CSS

Similaire à ajouter du style de un élément non, versez changeur la position de l'ONU d'Élément D'ABORD Ajouter Une classe, Puis modificateur Les Propriétés de la position. Vous apprendrez à Connaître margin, padding, affichage, Float, débordement, et la position.

Marge & Rembourrage exemple

Briser Nouvelles

Agents de Raid Gunshop, TROUVER des armes

propriétaire de magasin Steve Witmere déjà-Été arrêté pour le Commerce blackmarket bazooka. Avoue à la participation à la mafia russe.

Nombreux parmi les bazookas trouvés DANS LE Gunshop Avait des Dizaines de Milliers de peintures obtenus illégalement évalués à at least $ 10,000. Thats ce non lourd prix à payer versez CES Peintures idiotes.

Description: . marge et le rembourrage PEUVENT Être trouvés Dans la palette de la position du panneau de style Marge Ajout va ajouter de l'espace à l'extérieur d'bloc de l'ONU, et de rajouter du rembourrage va ajouter de l'espace à l'intérieur d'bloc de l'ONU.

Ajouter Yourself espacement

Briser Nouvelles

Agents de Raid Gunshop, TROUVER des armes

propriétaire de magasin Steve Witmere déjà-Été arrêté pour le Commerce blackmarket bazooka. Avoue à la participation à la mafia russe.

CONSEIL: Commencez par ajouter rembourrage sur Tous les Côtes du bloc gris principale (l'élément parent). Puis ajouter marge Inférieure à ajouter espacement Entre les éléments de texte iNDIVIDUELS (Enfants éléments). Astuce: Maintenez SHIFT tout en Utilisant le Contrôle de marge / padding à appliquer à tous les Côtes et ALT à appliquer à la partie also défavorable.

'display: block' exemples

This is rubrique réglée à display: block

Ce paragraphes is Réglé sur écran:. Bloc Fait, il remplit la largeur de la fenêtre Parent et empilé-sur d'Autres blocs.

Bouton with display: block affichage Bouton de départ: bloc Ce lien approx Mis à display: block mis Ce lien de Est à display: block

Description: reglage de l'affichage du Cadre de féra éléments Bloquer les empiler les uns sur les Autres et de REMPLIR à 100% de la largeur de parent fils de bloc. La plupart des éléments Ont fait CE règlage par défaut.

Faites-les de display: block 'vous

Ceci Est Un bouton is non bouton affichage privilèges de are: inline par défaut d'affichage de Liens are: inline par défaut

ASTUCE: Select CES éléments (CERTAINS are Inline Block et CERTAINS are en-ligne) et les affichage du Rendre: bloc AFIN Qu'ils empilent les uns des Autres.

'Display: inline-block' exemple

Telechargez Modifier Supprimer

Description: . règlage de l'affichage du Cadre de éléments d'inline-block féra la largeur du bloc conforme à la largeur du contenu à l'intérieur Cela signifié Que Si Leur contenu is Assez petit, ILS PEUVENT empiler les uns à côté des Autres. You can Copier Coller les boutons ci-dessus et de modificateur le texte à l'intérieur versent voir commentaire CELA Fonctionne.

Rendre inline-block-vous

Télécharger modificateur

ASTUCE: Sélectionnez les éléments ci-Dessus et de les Rendre display: inline-block AFIN Qu'ils empilent côté de l'Autre. Vous verrez Que les images pile à côté des boutons. Astuce: Suppression des boutons et des images en blocs concepts distincts Div féra les empiler les uns sur les autres (Parce Div affichage blocs de are: bloc par défaut).

Float exemple

Merci! Votre request was ReCUE!

Oups! Quelque chose a mal tourné LORs de la soumission du formulaire :(

Description: reglage de l'affichage:. inline-block ous flottant (CET exemple) Sont Les Façons Les plus courantes d'empiler les éléments côte à côte Dans this exemple, je vais vous commenter MONTRER faire flotter journey.

Float-même

Merci! Votre request was ReCUE!

Oups! Quelque chose a mal tourné LORs de la soumission du formulaire :(

ASTUCE: Select D'ABORD le champ de texte, faire flotter: gauche et lui Donner juin largeur de pourcentage,. (ex: 60%) Réglez ensuite le bouton versez float: left AINSI et Mettre Une Autre largeur de pourcentage, (ex: 40% ) Pour Que Les Deux ajouter jusqu'a 100%. Voilà juin Façon manuelle versez forcer tout élément A empiler côte à côte.

Absolute Position Exemple

My Cup of Joe

This photo is a texte de légende.

Sélection

Description: Élément non de Si vous définissez position absolue, vous Serez en mesure de le positionneur Dans ne importe où à l'intérieur de fils bloc parent. Verser Choisir le parent à positionneur à l'intérieur de, la definition la position de l ' élément parent versez relative. Remarque: when des éléments are absolue positionné ILS flottent au-dessus d'Autres éléments.

Coiffez It Yourself

My Cup of Joe

Ceci is une légende de photo pour ma tasse de Joe Préférée.

Sélection

ASTUCE: . Select D'ABORD L'Element image Wrapper et définir sa position de sur Relative . Ensuite, Select la légende, Faites-le glisser Dans l'image la position de sa Fixé à Absolute et Choose 7e prédéfini Verser le positionneur insigne en vedette Dans Le Bon Endroit Choisir le 2ème préréglage et positionneur manuellement.

# 5 de de style en cascade

Styles Utilisant cascade

You can Facilement Créer des variations D'UN élément par L'ajout de cours supplementaires au-dessus de l'Autre et en ajoutant Différents CES les classes de styles. CONSULTEZ l'exemple ci-dessous Où nous Avons differentes variations D'UN Bouton.

Exemple Commune Bouton Styles

Concevoir les boutons vous-même

Bouton VERT

Bouton ROUGE

ASTUCE: Select. Le Deuxième bouton et click sur le [+] a côte de la Classe A Ajouter UNE AUTRE classe . You can APPELER CELA «vert» . Puis de Lui Donner des styles différents styles CES remplacent les styles de la base de la première classe. Ensuite, creez le bouton rouge.

# 6 des questions des Médias

Conception versez les Différents Appareils

Dans Webflow vous concevez Votre Site Web Pour La Périphériques de première sortie de bureau, apportez des modifications Puis sur les appareils mobiles (Accéder aux Icônes du périphérique Dans la barre du haut). Ajout de styles Dans Appareil non mobiles Remplacé les styles de bureau.

Intitulé exemple Responsive

Ceci Est Un texte de titre Qui DEVIENT ainsi que Petit Dans Les appareils mobiles.

Description: . This is rubrique Vraiment grandiose sur le bureau, Mais Nous Voulons Qu'il Soit plus de Petit-sur les appareils mobiles Click DANS LES Dispositifs Dans la barre du haut to see that la taille du texte et la ligne de hauteur une Réduite ETE.

Fix It Yourself

Faire CE grande texte de cap deviennent ainsi Dans Les petits appareils mobiles.

ASTUCE: Select this rubrique sur le dispositif de tablette et de faire la taille de la police de et de la hauteur de la ligne, plus petite. Faites de same versez les Appareils de téléphone Paysage et Portrait téléphone. You can see that the

Bouton Exemple Responsive

Bouton texte

Description: . This is Destiné bouton A être petit sur les Écrans de voiture de bureau Il Est facile de cliquer Avec le curseur de la souris Nous l'Avons fait en plus sur les appareils mobiles de Sorte Qu'il est ainsi facile de cône with le doigt

Bouton texte

Fix It Yourself

ASTUCE: . Aller à la tablette et d'augmenteur le rembourrage du bouton Quand vous Faites CELA il ignorera les styles des précédents correctifs sur le bureau et en cascade vers le bas pour tous les Dispositifs ci-dessous Tablet.

Colonnes exemple Responsive