Hvordan lage en Smiley Face Bullet i HTML

January 1

Enhver ASCII (American Standard kode for Information Interchange) karakter - settet av engelskspråklige tegn og statister, kodet inn tall - kan bli en kule for HTML-lister. Ved å slå av standard kuler og skape en ": før" pseudo-element du kan plassere alle tegn foran listeelementer til bruk som kuler. Koden du trenger for tegnet seg selv kalles en "hex tilsvarende" som du finner i Tegnkart-programmet i Windows. Smilefjes er en av karakterene til din disposisjon.

Bruksanvisning

1 Åpne websiden i Notepad eller en kode editor. Lag en uordnet liste:

<Ul id = "smiley">
<Li> Liste Varenummer 1 </ li>
<Li> Liste Varenummer 2 </ li>
<Li> Liste Varenummer 3 </ li>
<Li> Liste Varenummer 4 </ li>
</ Ul>

I websider, sorterte lister lage punktlister. Hver "<li>" tag representerer en punktliste element.

2 Finn "<style>" tags på toppen av HTML-koden. Hvis du ser ingen, legge inn dette mellom de "<head>" koder:

3 Slå av standard kuler i CSS:

smiley {

liste-type: none;
}

4 Lag en psuedo-element som plasserer innholdet før hvert listepunkt, der kulen normalt ville gå:

smiley: før {

innhold: "";
}

5 Legg den rømte hex verdi for en smiley face:

smiley: før {

innhold: "\ 263A";
}

Hex verdier for spesialtegn finner du i Tegnkart-programmet i Windows. Når du klikker på smilefjeset tegnet i Tegnkart koden "U + 263A" vises nederst på skjermen. Den "263A" delen er hex-kode. I "innhold" eiendom dette hex-kode må skråstrek foran det til å fungere, slik det er vist.

6 Legg litt venstre side polstring for å lage plass mellom smiley og listeelementet teksten:

smiley: før {

innhold: "\ 263A";
padding-left: 10px;
}

Hint

Det er to smilefjes du kan bruke, den første er et omriss stil. Hex kode for utfylte versjonen er "263B".