CSS silmailu loendite loomiseks

• Mai 18, 2024

Loendid on suurepärane veebidisaini element, kuna need võimaldavad lõppkasutajal neid hõlpsalt lugeda. Enamik kasutajaid soovib kiiret vastust ja kasutab ainult veebisaiti, et näha, kas see vastab nende küsimusele. See kehtib eriti siis, kui nad sisenevad teie veebisaidile otsimootori kaudu.

Rubriikide siltide ja loendite kasutamine on suurepärane viis, mis võimaldab inimestel hõlpsalt näha teie veebisaidi peamist sisu. Kui nende arvates on loendid ja alamrubriigid huvitavad, on suurem tõenäosus, et nad jäävad teie saidile. Muidugi viib see vähendatud tagasipööramismääradeni ja aitab parandada teie veebisaidi usaldusväärsust ja mootorites paremusjärjestust. Veebisaidile tuleb alati kasuks midagi, mis parandab loetavust ja muudab silmad hõlpsamaks. Suurepärane kujundus peab alati loetavust meeles.

CSS on lihtne ja väga tõhus viis stiilsete loendite loomiseks kohandatud täppidega (markeritega). Saate lisada erinevaid kujundeid või lihtsaid kohandatud graafikaid, mis seostuvad teie veebisaidi logo, värvide või teemaga. Näiteks lõin kummitusretkede veebisaidil väikese kummituse ikooni, mida kasutati külgmisel navigeerimisribal ja avalehe järjestamata loendiüksustel. See oli lihtne, kuid väga armas ja seotud saitide teemaga, muutes need lehe elemendid silma paista.

Muul ajal võivad täpid tähelepanu kõrvale tõmmata loendi olulisest sisust. Sel juhul saab automaatselt genereeritud markerite eemaldamiseks kasutada loendistiili omadust "puudub".

Loendi stiili atribuudid

Kasutage loendi stiili tüüpi atribuuti, et valida markeri tüüp, mis ilmub iga loendielemendi korral. Saadaolevad väärtused on ketas, ring, ruut, koma, alumine ladina, ülemine rooma, alumine kreeka, alumine ladina, ülemine ladina, alumine alfa, ülemine alfa ja puudub.

Enda pildi määramiseks markerina kasutage loendi stiili-pildi atribuuti järgmiselt:

ul {list-style-image: url (pildi nimi.jpg);
nimekiri-stiil-positsioon: väljas;
}

URL on stiililehe suhtes ja peaks osutama kaustale, kus teie pilt asub. Sel juhul oleks pilt samas kaustas css- ja html-failiga. Kui paigutate oma pildid eraldi kausta, lisate selle ka URL-i (images / imagename.jpg)

Markeri positsioonid

Samuti saate markerite positsiooni kohandada. Ülaltoodud näites paneb välimine omadus täpp ilmuma sisualast väljapoole.
loendi stiil-positsioon: sees lubab täpp sisualal, nii et see satub loendi sisusse.

Lühitehnika

Teine kiire viis loendi vormindamiseks CSS-i abil on otsetee. Selle meetodi abil täpsustatakse kõik loendi atribuudid ühes atribuudis:

ul
{
loendi stiil: ringi URL ("image.gif");
}

kiirmeetodi korral peavad kõik väärtused ilmuma kindlas järjekorras järgmiselt:

loend-tüüpi-tüüp
loendi stiil-positsioon (seest, väljast)
loend-stiil-pilt

Pole tähtis, kas jätate väärtuse vahele, kui teised püsivad õiges järjekorras.

Kohandatud loendid on väga kasulikud ja CSS muudab need hõlpsasti saavutatavaks. Lihtsad üksikasjad muudavad keskmised veebisaidid kõige paremini toimivateks veebisaitideks.

Video Juhiseid: Developing creative thinking through mobile app development, by Rosanna Kurrer (Mai 2024).