Kuidas CSS-i abil linnuke / linnuke joonistada

' konteineri element koos tähega ' id ” või „ klass ”:

< div id = 'Linnuke' >< / div >

Ülaltoodud HTML-i avalduses on ' div ' element on lisatud ID-ga, mis on deklareeritud kui ' Linnuke ”.

Elemendi stiili kujundamisel CSS-i atribuute kasutades lisage ' id ” valija, et viidata HTML-elemendile ja seejärel määrata selle sees olevad omadused:

---

---

#Linnuke
{
teisendus: pööra ( 45 kraadi ) ;
kõrgus : 45 pikslit;
laius : 20 pikslit;
margin-vasak: viiskümmend %;
ääris-alumine: 9px tahke tumeroheline;
ääris-parem: 9 pikslit tahke tumeroheline;
}

Ülaltoodud CSS-stiili elemendil on järgmised omadused:

• ' teisendus: pööra (45 kraadi) ” pöörab sirgeid vertikaalseid ja horisontaalseid jooni nii, et see moodustab linnukese sümboli kuju.
• ' kõrgus atribuut ” määrab linnukese sümboli kõrguseks „ 45 pikslit ”.
• ' laius 'omadus muudab sümboli ' 20 pikslit ” lai.
• ' margin-vasak ” atribuut joondab linnukese sümboli veebilehe liidese keskele.
• Pärast seda ' ääris-alumine ” ja „ piir-parem ' atribuudid määravad mõlema rea ​​ääriste kaaluks ' 9 pikslit ' ja määratlege ' tumeroheline ” värvi mõlema rea ​​jaoks, mis moodustavad täieliku linnukese sümboli.

See loob rohelise lihtsa linnukese või linnukese sümboli, mis kuvatakse veebilehe liidese keskel. 45 pikslit 'kõrge ja' 20 pikslit ” lai:

2. meetod: linnukese/linnukese sisestamine Unicode'i märkide abil

Samuti on mõned Unicode'i märgid, mis lisavad automaatselt väljundisse linnukese sümbolid, ilma et oleks vaja nende jaoks stiili ja parameetrite väärtusi määratleda. Näiteks Unicode'i märk ' U+2713 ” aitab väljundisse lisada lihtsa linnukese sümboli. Samamoodi Unicode'i märk ' U+2713 ” aitab väljundisse sisestada valge raske linnukese sümboli. Et saada teavet selle kohta, kuidas neid Unicode'i märke HTML-dokumenti lisada täieliku juhendi kaudu, klõpsake nuppu siin .

Järeldus

Linnukese või linnukese sümboli saab joonistada, luues esmalt ID-ga või klassiga HTML-i elemendi ja seejärel lisades sellele elemendile viitamiseks CSS-i stiilielemendis id või klassi valija. Veebilehe liideses linnukese/linnukese kuju loomiseks kasutage erinevaid CSS-i atribuute nagu ' kõrgus ”, „ laius ”, „ pöörata ” ja „ värvi ” saab kasutada vastavalt soovitud linnukese tüübile ja suurusele. See ajaveeb näitab CSS-i abil linnukese / linnukese joonistamise meetodit.