Avez-vous vu que les publicités des grands sites Web sont placées au milieu du contenu pour envelopper le texte ? Généralement, les publicités des petits sites Web ordinaires ne peuvent être placées qu'au début ou à la fin du contenu. Peut-être que le système cms des grands sites Web l'a fait. cette fonction. Les bases des cms couramment utilisés par nos petits sites internet. Une telle fonction n'existe pas, car il est impossible d'ajouter automatiquement une balise publicitaire à la balise de contenu, à moins de la modifier manuellement lors de l'ajout d'un article, ce qui n'est pas fatiguant.
Je n'ai jamais pensé à utiliser CSS pour le contrôler, principalement parce que je ne m'attendais pas à l'attribut clear. J'ai accidentellement vu une introduction aujourd'hui et j'ai réalisé qu'il était si simple d'implémenter l'habillage de texte.
Exemple de code :
<div style="float:left;height:300px;width:0">Un calque vierge d'une largeur de 0, utilisant la hauteur de ce calque pour contrôler les positions supérieure et inférieure du calque publicitaire</div>
<div style="float:left;height:250px;width:250px;clear:left;">Code publicitaire</div>
</div>
La clé réside dans le rôle de clear:left. Clear a trois attributs : clear:both, clear:left et clear:right, qui indiquent respectivement l'effacement des blocs flottants des deux côtés, à gauche et à droite. Ajouter clear:left au calque publicitaire signifie que le calque ne flottera plus par rapport au calque vierge et se déplacera vers le bas, c'est génial, haha.
Comparons :
<div style="float:left;height:300px;width:100px;background:#CCC;">Ajoutez de la largeur et de l'arrière-plan pour faciliter l'observation de l'effet</div>
<div style="float:left;height:250px;width:250px;">Si vous supprimez le flotteur clair, vous comprendrez sa signification</div>
</div>
Si vous ajoutez celui-ci :
Malheureusement, le test ci-dessus a révélé que seul IE est réalisable. Firefox et Opera ont des résultats différents. L'effet d'IE est que l'image descend automatiquement lorsqu'elle rencontre la couche publicitaire. Firefox ne descend pas, mais ne couvre pas la couche publicitaire. parce que la couche publicitaire est à l'avant. Dans l'opéra, l'image ne descendra pas et recouvrira la couche publicitaire. C'est drôle.
Encore amélioré :
Finalement c'est fait, c'est plutôt parfait, et l'effet du contenu publicitaire environnant est désormais complet :)
//2008-02-29, modifié par : Qu'est-ce que
J'ai oublié d'ajouter
| <style>.news{float:left;}</style> |
Quelqu'un a demandé si le texte devait être placé en haut et en bas à droite, je l'ai donc modifié comme suit :
<div style="float:gauche;"> </div> |