Wie man ein Smiley-Gesicht-Bullet in HTML

October 15

Beliebiges Zeichen ASCII (American Standard Code for Information Interchange) – Set englische Zeichen und Extras, codiert in Zahlen – kann eine Kugel für Ihre HTML-Listen werden. Durch Standardaufzählungszeichen ausschalten und die Schaffung einer ": vor" können Sie beliebige Zeichen vor Liste platzieren Pseudoelement Elemente für den Einsatz als Aufzählungszeichen. Der Code für das Zeichen selbst benötigte nennt ein "hex-Äquivalent", die Sie in der Zeichentabelle-Anwendung in Windows finden. Das Smiley ist eines der Zeichen zur Verfügung.

Anweisungen

1 Öffnen Sie die Webseite in Notepad oder einem Codeeditor. Eine ungeordnete Liste zu erstellen:

< Ul Id = "Smiley" >#1 </li > Listenelement < li >-#2 </li > Listenelement < li >-#3 </li > Listenelement < li >-#4 </li > Listenelement < li >-</ul >

In Web-Seiten machen ungeordnete Listen Bullet-Listen. Jeden Tag "< li >" stellt ein Aufzählungselement.

2 Die "< Stil >" Tags an der Spitze Ihres HTML zu finden. Wenn nichts angezeigt wird, fügen Sie diesen Code zwischen die Tags "< Head >":

< Typ style = "Text/Css" >< / style >

3 Deaktivieren Sie den Standardaufzählungszeichen im CSS:

Smiley {} Liste-Typ: keine;}

4 Erstellen Sie ein Pseudo-Element, das Inhalt vor jedes Listenelement platziert, wo normalerweise die Kugel gehen würde:

Smiley: vor {} Inhalt: "";}

5 Fügen Sie den entflohenen hex-Wert für ein Smiley-Gesicht:

Smiley: vor {} Inhalt: "\263A";}

Hex-Werte für Sonderzeichen findet man in der Zeichentabelle in Windows. Wenn Sie auf das Smiley-Gesicht-Zeichen in der Zeichentabelle den Code "U + 263A" klicken, erscheint am unteren Rand des Bildschirms. "263A" Teil ist der hex-Code. In der Eigenschaft "Inhalt" braucht dieser hex-Code den Schrägstrich davor zu arbeiten, wie gezeigt.

6 Fügen Sie einige linken Padding um Raum zwischen den Smiley und den Text des Elements zu erstellen:

Smiley: vor {} Inhalt: "\263A";Textabstand links: 10px;}

Tipps & Warnungen

  • Es gibt zwei Smileys können, wobei die erste eine Gliederung-Stil. Die hex-Code für die Version ausgefüllt ist "263B."