CSS za ustvarjanje seznamov za lovljenje oči

• April 28, 2024

Seznami so odličen element spletnega oblikovanja, saj omogočajo enostavno branje s strani končnega uporabnika. Večina uporabnikov želi odgovore hitro in sprva prelista spletno mesto, da vidi, ali odgovarja na njihovo vprašanje. To še posebej velja, če na vaše spletno mesto vstopijo prek iskalnika.

Uporaba oznak in seznamov naslovov je odličen način, da lahko ljudem preprosto ogledajo primarno vsebino vašega spletnega mesta. Če se jim zdijo seznami in podštevilke zanimivi, obstaja večja možnost, da ostanejo na vašem spletnem mestu. To seveda vodi do nižjih stopenj „odklonilnih“ strani in pomaga izboljšati verodostojnost vašega spletnega mesta in uvrstitev v motorje. Vse, kar izboljša berljivost in olajša pogled na oči, bo vedno koristilo spletnemu mestu. Odličen dizajn ima vedno v mislih berljivost.

CSS je enostaven in zelo učinkovit način za ustvarjanje elegantnih seznamov z oznakami po meri (markerji). Vključite lahko različne oblike ali preproste grafike po meri, ki se vežejo na logotip, barve ali temo spletnega mesta. Na primer, na spletnem mestu ghost tours sem ustvaril majhno ikono ghost, ki je bila uporabljena v stranski vrstici za krmarjenje in na neurejenih seznamih na glavni strani. Bila je preprosta, a zelo luštna in povezana s temo spletnih mest, zaradi česar ti elementi strani izstopajo.

Druge čase lahko naboji odvrnejo od pomembne vsebine na seznamu. V tem primeru lahko lastnost sloga seznama "none" uporabite za odstranitev samodejno ustvarjenih označevalcev.

Lastnosti sloga seznama

S pomočjo lastnosti seznama v obliki seznama izberite vrsto označevalca, ki se prikaže z vsakim elementom seznama. Vrednosti, ki so na voljo, so disk, krog, kvadrat, decimalna, spodnja-rimska, zgornja-rimska, spodnja-grška, spodnja-latinska, zgornja latinica, spodnja-alfa, zgornja alfa in nobena.

Če želite določiti svojo sliko kot označevalca, uporabite lastnost slike v slogu seznama na naslednji način:

ul {list-style-image: url (imagename.jpg);
seznam-slog-položaj: zunaj;
}

URL je glede na tabelo stilov in mora kazati na mapo, v kateri je vaša slika. V tem primeru bi bila slika v isti mapi kot datoteka css in html. Če svoje slike postavite v ločeno mapo, bi vključili tudi to: url (images / imagename.jpg)

Pozicije označevalcev

Prav tako lahko prilagodite položaj označevalcev. V zgornjem primeru je zaradi zunanje lastnosti krogla prikazana zunaj območja z vsebino.
list-style-position: znotraj omogoča kroglo v območju vsebine, tako da naleti na vsebino seznama.

Skrajšana tehnika

Drug hiter način formatiranja seznama s pomočjo CSS je tehnika okrajšave. S to metodo so vse lastnosti seznama določene v eni sami lastnosti:

ul
{
seznam seznama: URL kroga ("image.gif");
}

pri metodi okrajšave morajo biti vse vrednosti prikazane v določenem vrstnem redu:

seznam-style-type
seznam-slog-položaj (znotraj, zunaj)
seznam-slog-slika

Ni važno, če preskočite vrednost, dokler ostali ostanejo v pravilnem vrstnem redu.

Seznami po meri so zelo uporabni in CSS jih olajša. Preproste podrobnosti pretvorijo povprečna spletna mesta v najbolj uspešna spletna mesta.

Navodila Video: Web Programming - Computer Science for Business Leaders 2016 (April 2024).