Ein kleiner Trick mit dem Anfangsbuchstaben

Autor：Eve Cole Aktualisierungszeit：2010-03-19 16:24:49

Wenn OL eine geordnete Liste definiert, werden der Text und die führenden Zeichen eingerückt, sofern list-style-position:inside nicht angegeben ist.

Manchmal unterliegen die von OL definierten Listentypen jedoch Einschränkungen. Beispielsweise können die chinesischen Zeichen „eins, zwei und drei“ nicht manuell eingegeben werden, aber dieses Mal sind Text und Zeichen miteinander verbunden.

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Zu diesem Zeitpunkt können Sie die Pseudoklasse des ersten Buchstabens verwenden, um Folgendes zu tun:

Codefeld ausführen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anfangsbuchstabe</title>
<style type="text/css">
body{font-size:12px;width:600px;margin:2em auto;}
ol.list { list-style:none }
ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;}
</style>
</head>
<Körper>
<ol>
<li>Ursprünglich als Box Model Acid Test bekannt, handelt es sich um eine Webseite zum Testen von Browsern. Es wurde im Oktober 1998 entwickelt und wurde zu einem wichtigen Maßstab für die Kompatibilität mit frühen Browsern, insbesondere für die Browserunterstützung für Cascading Style Sheets 1.0. Genauso wie ein Säuretest zur schnellen und visuellen Messung der Qualität eines Metallstücks verwendet wird, besteht das Ziel des Web-Arzneitests darin, eindeutig anzuzeigen, ob ein Browser den Web-Standards entspricht. </li>
<li>Diese Version wurde vom Web Standards Project für umfassende Tests der Unterstützung der Standards HTML, CSS 2.0 und PNG-Bild[1] entwickelt. </li>
<li>Offiziell am 3. März 2008 veröffentlicht, liegt der Testschwerpunkt auf ECMAScript, DOM Level 3, Medienabfragen und Daten: URL[3]. Nach dem Öffnen dieser Testwebseite mit einem Browser lädt die Seite kontinuierlich Funktionen [4] und gibt basierend auf der Testsituation eine Punktzahl von 100</li> aus
</ol>
<hr />
<ol class="list">
<li>1. Ursprünglich als Box-Modell-Acid-Test bekannt, handelt es sich um eine Webseite zum Testen von Browsern. Es wurde im Oktober 1998 entwickelt und wurde zu einem wichtigen Maßstab für die Kompatibilität mit frühen Browsern, insbesondere für die Browserunterstützung für Cascading Style Sheets 1.0. Genauso wie ein Säuretest zur schnellen und visuellen Messung der Qualität eines Metallstücks verwendet wird, besteht das Ziel des Web-Arzneitests darin, eindeutig anzuzeigen, ob ein Browser den Web-Standards entspricht. </li>
<li>2. Diese Version wurde vom Web Standards Project für umfassende Tests zur Unterstützung der Standards HTML, CSS 2.0 und PNG-Bild [1] entwickelt. </li>
<li>3. Der Testschwerpunkt liegt offiziell am 3. März 2008 auf ECMAScript, DOM Level 3, Medienabfragen und Daten: URL[3]. Nach dem Öffnen dieser Testwebseite mit einem Browser lädt die Seite kontinuierlich Funktionen [4] und gibt basierend auf der Testsituation eine Punktzahl von 100</li> aus
</ol>
<hr />
<ol class="list">
<li>1. Ursprünglich als Box-Modell-Acid-Test bekannt, handelt es sich um eine Webseite zum Testen von Browsern. Es wurde im Oktober 1998 entwickelt und wurde zu einem wichtigen Maßstab für die Kompatibilität mit frühen Browsern, insbesondere für die Browserunterstützung für Cascading Style Sheets 1.0. Genauso wie ein Säuretest zur schnellen und visuellen Messung der Qualität eines Metallstücks verwendet wird, besteht das Ziel des Web-Arzneitests darin, eindeutig anzuzeigen, ob ein Browser den Web-Standards entspricht. </li>
<li>2. Diese Version wurde vom Web Standards Project für umfassende Tests zur Unterstützung der Standards HTML, CSS 2.0 und PNG-Bild [1] entwickelt. </li>
<li>3. Der Testschwerpunkt liegt offiziell am 3. März 2008 auf ECMAScript, DOM Level 3, Medienabfragen und Daten: URL[3]. Nach dem Öffnen dieser Testwebseite mit einem Browser lädt die Seite kontinuierlich Funktionen [4] und gibt basierend auf der Testsituation eine Punktzahl von 100</li> aus
</ol>
</body>
</html>

[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Diesmal wird das Hauptzeichen in einem gewissen Abstand zum Text gehalten und Sie können weitere Stile steuern.
Allerdings kann der Stil des Kommas nach dem führenden Zeichen nicht gesteuert werden, aber ich frage mich, ob ich ein Hintergrundbild festlegen kann, um es zu ersetzen?
Ein einfacher Test ergab, dass die Steuerung des Hintergrunds der Pseudoklasse des ersten Buchstabens genauso verwirrend ist wie die Steuerung des Listenstilbilds, weshalb darauf verzichtet wurde.

Außerdem behandelt jeder Browser die Symbole neben dem führenden Zeichen unterschiedlich. Da Safari nicht installiert ist, habe ich es nicht getestet:

Code:

Rendering-Ergebnis:

IE8, FF3 und Opera verhalten sich gleich. Chrome verarbeitet nur die Symbole auf der linken Seite, während IE6 und 7 nur das erste Zeichen verarbeiten.