Faire une bannière est une partie fondamentale de la conception web. Beaucoup de designers premiers temps utilisent des tables pour créer la bannière et disposition de site Web. Toutefois, en utilisant le CSS, vous pouvez définir le fond, les couleurs, la taille et les frontières de la bannière. Tables font une conception difficile à gérer au fil du temps tout en CSS vous permet de modifier des éléments selon les besoins. Vous avez besoin d'une connaissance de base de HTML pour accomplir ce peu de scripts. Bien qu'il existe de nombreuses façons de créer une bannière avec CSS, dans ce tutoriel, nous allons créer une bannière centrée deux tons avec le texte qui est aligné à droite.
Ouvrez votre fichier html. Après la balise BODY mis en balises DIV et de donner la DIV une étiquette d'identification. Appelez la bannière d'identité
. Tapez le texte de votre bannière entre les balises DIV vous venez de créer,
Votre Site Web
. Enveloppez le test dans les balises H1, Votre Site Web
. Cela rendra votre texte plus grand que la taille par défaut de plus de quatre points. Ouvrez votre fichier CSS. Définir le style de la bannière en tapant:
banner {}. Le #banner dira les navigateurs à la recherche pour le style de id ="bannière" que ce soit pour une étiquette d'identification et il est nommé bannière.
Entre le {} vous aurez besoin de taper dans les styles. Il existe de nombreux styles en CSS. Nous ne serons en utilisant un peu de styles. Nous voulons d'abord centrer la bannière sur la page.
banner {margin: 0 auto}
Celui-ci utilise les marges de centrer le site Web avec l'automobile et zéro les marges supérieure et inférieure.
Ajouter les autres styles.
banner {margin: 0 auto
GO
Largeur: 780px
GO
Hauteur: 300px
GO
Frontaliers: # FF0000 de 10px solide
GO
Contexte: #ffffff
GO
Color: # FF0000
GO
Font-size: 18px
GO
Text-align: right
GO
Padding-right: 10px;}
Largeur et hauteur définissent la taille de la bannière. La frontière est une ligne de dix pixel solide autour de la boîte. Il sera rouge tel que défini par le code hexadécimal, soit le # suivie par les six lettres et de chiffres après elle. L'arrière-plan est mis à blanc. Couleur définit la couleur du texte, qui est à nouveau rouge, pour correspondre à la frontière. Font-size définit la taille du texte. Text-align positionne le texte. Dans ce cas, nous avons positionné le texte à la droite de la boîte. Rembourrage crée un espace entre le contenu, tel que le texte, à l'intérieur de la bannière et le bord de la bannière. Padding-right est réglé pour donner 10px de l'espace entre le texte et le bord droit.
Sauvegardez vos fichiers.