Plusieurs méthodes et idées pour échanger des mots avec pictures_Experience Exchange

Aujourd'hui, un ami a rencontré un problème lors de la création d'une page web : il souhaitait conserver l'arrière-plan du lien, mais souhaitait également que le texte du lien disparaisse ! Mais après avoir travaillé longtemps dessus, je n'arrivais toujours pas à me débarrasser de ce texte. Je pense que de nombreux amis qui étudient les normes ont rencontré ce problème. Ici, je vais écrire plusieurs méthodes couramment utilisées et expliquer les idées, dans l'espoir d'aider les amis qui commencent tout juste à apprendre.

« Images contre mots » signifie remplacer les expressions textuelles par des images. Nous savons tous que la représentation du texte dans les navigateurs est très mauvaise. Elle est irrégulière, ne peut pas être arrondie et ne peut pas avoir de nombreux effets. Dans des circonstances normales, le contenu d'une page Web n'a pas besoin d'être modifié, mais dans les normes WEB, cela est souvent nécessaire pour les logos et les titres. Si nous utilisons un tableau pour le faire, nous publions simplement une image quelque part. Cette méthode est relativement simple, mais elle n'est pas propice à la recherche. Nous devons donc le faire de manière standard pour garantir que la page Web est en bon état et propice à la recherche. Généralement affiché comme le montre la figure

 : (display:none;) Cela ne fait pas seulement disparaître le contenu du conteneur mais aussi le conteneur lui-même. Par conséquent, nous devons créer un autre conteneur à l'intérieur du conteneur pour garantir que l'arrière-plan du conteneur puisse être affiché normalement après la disparition de la partie interne. Exemple :

Copier le code Le code est le suivant :

Title content

#logo {display:none; background:URL; width:300px; height:100px;}

Si c'est écrit comme ça, vous ne verrez rien du tout. Alors, quelle est la bonne façon de l’écrire ? Regardez l'exemple :

Copier le code Le code est le suivant :

Contenu du titre

#logo {background:URL; width:300px;}#logo span {display:none;}

S'il vous plaît faites attention au code ci-dessus, l'arrière-plan est défini sous #logo et #logo span n'a pas de style sauf display:none;. Étant donné que le conteneur avec l'attribut display:none; défini ne verra rien, définir d'autres styles est inutile. Il y a encore des problèmes avec cela seul. Ceci est un exemple sans lien. Alors, que devons-nous faire lorsqu'il y a un lien ? Regardons un autre exemple :

Copier le code Le code est le suivant :

Contenu du titre

#logo {arrière-plan : URL largeur : 300 px hauteur : 100 px;}#; logo a {display:none;}

Pouvez-vous deviner ce que ce code peut afficher ? Le fait est que l'arrière-plan est affiché, mais le lien a disparu. Comme nous l'avons dit ci-dessus : le conteneur lui-même auquel est attribué l'attribut display:none disparaîtra également. On sait alors clairement qu’il faut ajouter un conteneur à cette balise A. Regardons à nouveau l'exemple :

Copier le code Le code est le suivant :

< div id="logo ">Contenu du titre

#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;}

Est-ce correct ? Cela ne fonctionne toujours pas, pourquoi ? Nous savons tous que A n'est pas une balise de niveau bloc, ce qui signifie que la hauteur et la largeur de A sont déterminées par le contenu. Maintenant que le contenu a disparu, les attributs de hauteur et de largeur n'existeront plus. , donc le lien sera C'est devenu un lien sans zone chaude. Il se peut qu'il ne soit pas allumé. Nous devons à nouveau modifier le code ci-dessus.

Copier le code Le code est le suivant :

Contenu du titre

#logo a {background:URL width:300px; 100px ; display:block;}#logo sur une durée {display:none;}

Notez que l'attribut de la balise A ici doit être ajouté avec display:block; pour le forcer à être un élément de niveau bloc. De cette façon, la balise A devient une forme de lien d'une largeur de 300 et d'une hauteur de 100, avec un arrière-plan et aucun contenu textuel. Tout le monde a vu qu'une balise span a été ajoutée à la balise A ci-dessus, ce qui semble un peu redondant. L'effet peut-il être obtenu sans durée ? Oui, mais l'idée est différente, c'est la méthode de changement de position suivante.

Mouvement de position : c'est-à-dire que le contenu est déplacé hors de la zone d'affichage. Regardons le code pour comprendre cette méthode.

Copier le code Le code est le suivant :

Contenu du titre

#logo, #logo a {largeur : 300 px ; hauteur : 100px; {background :URL; padding:100px 0 0; display:block;}

En CSS, #logo et A ont un débordement caché (overflow:hidden;), ce qui signifie que si la taille dépasse 300*100, il sera être caché. Nous voyons que A est défini avec un remplissage : 100px 0 0; Ce remplissage supérieur pousse simplement le contenu en dehors de la zone d'affichage. Alors pourquoi #logo utilise-t-il également overflow:hidden;? Parce qu'il y aura un petit bug sous IE, le contenu de A ne peut pas déborder et se cacher, il est donc nécessaire d'ajouter un overflow:hidden sur la balise parent

Les éléments ci-dessus ne sont que deux de mes plus couramment utilisés ; Bien entendu, il existe d’autres méthodes, chacune présentant ses propres inconvénients, mais les différentes méthodes sont également complémentaires les unes des autres. Vous pouvez choisir de l'utiliser en fonction de la situation lors de votre candidature.