Attention à remplacer la hauteur de l'image par la hauteur de l'image réelle. Ici, l'image sera affichée comme arrière-plan, et comme l'indentation de -2000 pixels est définie, le texte réel apparaîtra à 2000 points sur le côté gauche de l'écran et sera invisible. Mais pour les personnes qui désactivent l’image, elles risquent de ne pas la voir du tout, alors soyez prudent.
6. Une autre technique d'ajustement pour le modèle de boîte CSS
L'ajustement de ce modèle Box concerne principalement les navigateurs IE antérieurs à IE6. Ils comptent la largeur de la bordure et les espaces dans la largeur de l'élément. Par exemple :
La largeur totale de la boîte devrait désormais être de 150 points, ce qui est correct sur tous les navigateurs sauf IE avant IE6. Mais sur les navigateurs comme IE5, sa largeur totale est toujours de 100 points. Cette différence peut être gérée en utilisant la méthode d'ajustement Box inventée par les personnes précédentes.
Mais le même objectif peut être atteint en utilisant CSS pour les rendre cohérents.
#box {largeur : 150px } #box div { bordure : 5px; remplissage : 20px }
Appelez comme ceci :
...
De cette façon, quel que soit le navigateur, la largeur est de 150 points.
7. Alignez les éléments du bloc au centre
Si vous souhaitez créer une page Web de largeur fixe et que vous souhaitez que la page Web soit centrée horizontalement, elle ressemble généralement à ceci :
#content { largeur : 700px ; marge : 0 auto }
Vous utiliseriez
pour entourer tous les éléments. C'est simple, mais pas suffisant, et les versions antérieures à IE6 n'afficheront pas cet effet. Modifiez le CSS comme suit :
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
Cela centrera le contenu de la page Web, j'ai donc ajouté
au contenu.
alignement du texte : gauche .
8. Utilisez CSS pour gérer l'alignement vertical
L'alignement vertical peut être facilement réalisé à l'aide de tables. Il suffit de régler l'unité de table en alignement vertical : au milieu. Mais cela ne sert à rien avec CSS. Si vous souhaitez définir une barre de navigation d'une hauteur de 2 em et que le texte de navigation soit centré verticalement, la définition de cet attribut est inutile.
Qu'est-ce que la méthode CSS ? Au fait, définissez la hauteur de ligne de ces mots sur 2em : line-height : 2em et c'est tout.
9. Positionnement CSS au sein du conteneur
L'un des avantages du CSS est que vous pouvez positionner un élément arbitrairement, même dans un conteneur. Par exemple, pour ce conteneur :
#conteneur { position : relative }
De cette façon, tous les éléments du conteneur seront positionnés relativement. Vous pouvez l'utiliser comme ceci :
...
Si vous souhaitez localiser 30 points à partir de la gauche et 5 points à partir du haut, vous pouvez faire ceci :
#navigation { position : absolue ; gauche : 30px ; haut : 5px }
Bien sûr, vous pouvez aussi faire ceci :
marge : 5px 0 0 30px
Notez que l'ordre des 4 nombres est : haut, droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.
10. Couleur de fond directement en bas de l'écran
Le contrôle dans le sens vertical dépasse les capacités du CSS. Si vous souhaitez que la barre de navigation aille directement en bas de page comme la barre de contenu, utiliser un tableau est très pratique, mais si vous n'utilisez que du CSS comme ceci :
Une barre de navigation plus courte n'ira pas directement vers le bas, elle se terminera lorsque le contenu se terminera à mi-chemin. Ce qu'il faut faire?
Malheureusement, la seule façon de tricher est d'ajouter une image d'arrière-plan à la colonne la plus courte, avec la même largeur que la largeur de la colonne, et de lui donner la même couleur que la couleur d'arrière-plan définie.
corps { background: url(blue-image.gif) 0 0 répétition-y }
Vous ne pouvez pas les utiliser comme unité pour le moment, car l'astuce sera alors révélée une fois que le lecteur aura modifié la taille de la police, et vous ne pourrez utiliser que px.
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
