CSS a szemet gyönyörködtető listák létrehozásához

• Lehet 4, 2024

A listák nagyszerű webdesign elem, mivel lehetővé teszik a végfelhasználó számára a könnyű olvasást. A legtöbb felhasználó gyorsan válaszokat akar, és kezdetben csak egy webhelyet szúr be, hogy megválaszolja-e a kérdést. Ez különösen igaz, ha keresőmotoron keresztül lépnek be webhelyére.

A címsorok és listák használata nagyszerű módja annak, hogy az emberek könnyen megtekintsék webhelye elsődleges tartalmát. Ha úgy érzik, hogy a listák és az alszámok érdekesek, nagyobb eséllyel maradnak az Ön webhelyén. Ez természetesen csökken a visszafordulási arányokhoz, és javítja webhelye hitelességét és rangsorolását a motorokban. Bármi, ami javítja az olvashatóságot, megkönnyíti a szem számára a skimpelést, mindig hasznos lesz a weboldal számára. A nagyszerű kivitel mindig szem előtt tartja az olvashatóságot.

A CSS egy egyszerű és nagyon hatékony módja az elegáns listák elkészítéséhez egyedi golyókkal (jelölőkkel). Beilleszthet különféle formákat vagy egyszerű egyedi grafikákat, amelyek kapcsolódnak az Ön webhelyének logójához, színeihez vagy témájához. Például egy szellemtúrák webhelyén létrehoztam egy kis szellemikonot, amelyet az oldalsó navigációs sávban és a főoldal rendezetlen listaelemein használtak. Egyszerű volt, de nagyon aranyos, és a webhelyek témájához kötődött, és ezek az oldal elemek kiemelkedtek.

Más esetekben a golyók elvonhatják a lista fontos tartalmát. Ebben az esetben a "nincs" listastílus tulajdonsága felhasználható az automatikusan létrehozott markerek eltávolítására.

Lista stílus tulajdonságai

A listastílus típusú tulajdonsággal válassza ki a jelölő típusát, amely megjelenik az egyes listaelemeknél. A rendelkezésre álló értékek: korong, kör, négyzet, decimális, alsó-latin, felső-római, alsó görög, alsó-latin, felső latin, alsó-alfa, felső-alfa és egy sem.

Saját képének markerként megadásához használja a list-style-image tulajdonságot az alábbiak szerint:

ul {list-style-image: url (képnév.jpg);
lista-stílus-helyzet: kívül;
}

Az URL a stíluslaphoz viszonyítva kell, hogy arra a mappára mutatjon, ahol a kép található. Ebben az esetben a kép ugyanabban a mappában található, mint a css és a html fájl. Ha a képeket külön mappába helyezte, akkor ezt belefoglalja az URL-be: images (image / imagename.jpg)

Jelölő pozíciók

Testreszabhatja a markerek helyzetét is. A fenti példában a külső tulajdonság miatt a golyó a tartalom területén kívül jelenik meg.
list-style-position: belül lehetővé teszi a golyót a tartalomterületen belül, így bejut a lista tartalmába.

Rövidített technika

Egy másik gyors módszer a lista formázására a CSS segítségével a rövidítés technikája. Ezzel a módszerrel az összes listatulajdonság egyetlen tulajdonságban van megadva:

ul
{
list-style: circle url ("image.gif");
}

a rövidítés módszerében az összes értéknek meghatározott sorrendben kell megjelennie, az alábbiak szerint:

list-style-type
lista-stílus-helyzet (belül, kívül)
list-style-image

Nem számít, ha kihagy egy értéket, mindaddig, amíg a többi megmarad a megfelelő sorrendben.

Az egyedi listák nagyon hasznosak, és a CSS megkönnyíti azok elérését. Az egyszerű részletek révén az átlagos webhelyek legjobban teljesítő webhelyekké válnak.

Video Utasításokat: Web Development - Computer Science for Business Leaders 2016 (Lehet 2024).