Verschiedene Methoden und Ideen zum Wortaustausch mit Bildern

Verschiedene Methoden und Ideen zum Wortaustausch mit Bildern_Erfahrungsaustausch

WBOY

Freigeben： 2016-05-16 12:10:22

Original

1443 Leute haben es durchsucht

Heute ist ein Freund beim Erstellen einer Webseite auf ein Problem gestoßen: Er wollte den Hintergrund des Links beibehalten, wollte aber auch, dass der Text im Link verschwindet! Aber nachdem ich lange daran gearbeitet hatte, wurde ich diesen Text immer noch nicht los. Ich denke, dass viele Freunde, die Standards studieren, auf dieses Problem gestoßen sind. Hier werde ich einige häufig verwendete Methoden aufschreiben und die Ideen erläutern, in der Hoffnung, Freunden zu helfen, die gerade erst anfangen zu lernen.

„Bilder durch Wörter ersetzen“ bedeutet, Textausdrücke durch Bilder zu ersetzen. Wir alle wissen, dass die Darstellung von Text in Browsern sehr schlecht ist, dass sie gezackt ist, nicht gerundet werden kann und nicht viele Effekte haben kann. Unter normalen Umständen muss der Inhaltsteil einer Webseite nicht beeinflusst werden, in WEB-Standards werden diese jedoch häufig für Logos und Titel benötigt. Wenn wir dazu eine Tabelle verwenden, posten wir einfach irgendwo ein Bild. Diese Methode ist relativ einfach, aber für die Suche nicht förderlich. Daher müssen wir dies standardmäßig tun, um sicherzustellen, dass die Webseite in einem guten Zustand ist und für die Suche geeignet ist. Wird normalerweise wie in der Abbildung

angezeigt: (display:none;) Dadurch verschwindet nicht nur der Inhalt des Behälters, sondern auch der Behälter selbst. Daher müssen wir innerhalb des Containers einen weiteren Container erstellen, um sicherzustellen, dass der Hintergrund im Container nach dem Verschwinden des inneren Teils normal angezeigt werden kann. Beispiel:

Code kopieren Der Code lautet wie folgt:

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

Wenn es so geschrieben ist, wird man überhaupt nichts sehen. Wie schreibt man es also richtig? Schauen Sie sich das Beispiel an:

Code kopieren Der Code lautet wie folgt:

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

Bitte Beachten Sie den obigen Code. Der Hintergrund wird unter #logo definiert und die Spanne #logo hat keinen Stil außer display:none;. Da der Container mit dem definierten display:none;-Attribut nichts sieht, ist es eine Verschwendung, andere Stile zu definieren. Es gibt immer noch Probleme damit. Dies ist ein Beispiel ohne Link. Was sollen wir also tun, wenn es einen Link gibt? Schauen wir uns ein weiteres Beispiel an:

Code kopieren Der Code lautet wie folgt:

Titelinhalt

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

Können Sie erraten, was dieser Code anzeigen kann? Tatsache ist, dass der Hintergrund angezeigt wird, der Link jedoch weg ist. Wie oben erwähnt: Der Container selbst, dem das Attribut display:none; zugewiesen ist, verschwindet ebenfalls. Dann wissen wir genau, dass wir diesem A-Tag einen Container hinzufügen müssen. Schauen wir uns das Beispiel noch einmal an:

Code kopieren Der Code lautet wie folgt:

< div id="logo ">Titelinhalt

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