Il existe deux types de mise en page de site: tabulaire et bloc. Et tandis que le premier est plus pratique pour créer des pages html simples, le second est idéal si vous devez ajouter des éléments individuels sous forme de blocs.
Instructions
Étape 1
Il existe deux techniques qui vous permettront de développer vous-même une conception de bloc: en incorporant des feuilles de style en cascade dans un document, ou en les connectant à partir d'une ressource externe. Les deux donnent le même résultat, il n'y a donc pas de différence fondamentale entre eux. Dans le premier cas, collez le code suivant n'importe où dans le fichier style.css:
.block1 {
}
Block1 - le nom du bloc, vous pouvez en écrire un autre. Entre les accolades, spécifiez les paramètres au format suivant: nom de l'attribut> deux-points> valeur> point-virgule (y compris placé avant l'accolade). Les éléments suivants sont couramment utilisés:
- largeur - largeur (500px, 100%, etc.);
- hauteur - hauteur (200px, 25%, etc.);
- fond - couleur de fond (jaune, rouge, # 000000);
- remplissage - remplissage autour du contenu à l'intérieur du bloc (0px, 20%);
- marge - marges externes du bloc (15px, 40%);
- bordure - cadre (bordure: solide 0px noir;);
- float - alignement (gauche, droite);
- border-radius - arrondi des coins (border-radius: 10px;).
Étape 2
Dans la deuxième utilisation de CSS, ajoutez le style entre les balises et:
.block1 {
}
Et ajoutez les paramètres que vous voulez.
Étape 3
Insérez le bloc à l'endroit souhaité sur le site à l'aide de la commande:
Bloc 1
Enregistrez et actualisez la page, elle devrait apparaître. Gardez à l'esprit que l'alignement de la hauteur peut varier en fonction du niveau de remplissage du contenu. Par exemple, si vous définissez 300px, mais n'avez écrit qu'une seule ligne de texte, elle ne sera pas affichée en entier. Cela peut être corrigé, par exemple, à l'aide d'un tableau avec les paramètres requis, qui doit être placé à l'intérieur du bloc, c'est-à-dire entre les balises et. Et pour que les bordures ne soient pas visibles, insérez l'attribut
