CSS til oprettelse af øjnefangstlister

• Kan 9, 2024

Lister er et fantastisk webdesignelement, fordi de giver mulighed for let læsning af slutbrugeren. De fleste brugere vil have svar hurtigt og vil kun skumme et websted oprindeligt for at se, om det besvarer deres spørgsmål. Dette gælder især, hvis de går ind på dit websted via en søgemaskine.

Brug af overskrifttags og lister er en fantastisk måde at give folk let at se det primære indhold på dit websted. Hvis de synes, lister og underoverskrifter er interessante, er der en større chance for, at de forbliver på dit websted. Dette fører naturligvis til reducerede "bounce" -rater og hjælper med at forbedre dit websteds troværdighed og placering i motorerne. Alt, der forbedrer læsbarheden, hvilket gør det lettere for øjnene at skumme, vil altid være et websted til gavn. Et fantastisk design holder altid læsbarheden i tankerne.

CSS er en nem og meget effektiv måde at oprette stilfulde lister med brugerdefinerede kugler (markører). Du kan inkludere forskellige former eller enkel brugerdefineret grafik, der binder ind på dit websteds logo, farver eller tema. For eksempel oprettede jeg på et websted for spøgelsesrejser et lille spøgelsesikon, der blev brugt i navigationslinjen i siden og på uordnede listeposter på hovedsiden. Det var enkelt, men meget sødt og bundet ind i webstedets tema, hvilket gjorde disse sideelementer skiller sig ud.

Andre gange kan kugler distrahere vigtigt indhold på en liste. I dette tilfælde kan en listestilegenskab med "ingen" bruges til at fjerne de automatisk genererede markører.

Liste Style egenskaber

Brug egenskaben listetype-type til at vælge den markeringstype, der vises med hvert listepunkt. De tilgængelige værdier er disk, cirkel, firkant, decimal, lavere romersk, øvre romersk, lavere græsk, lavere latin, øvre latin, lavere alfa, øvre alfa og ingen.

Hvis du vil specificere dit eget billede som en markør, skal du bruge egenskaben listestil-billede som følger:

ul {liste-stil-billede: url (imagename.jpg);
liste-stil-position: udenfor;
}

URL-adressen er i forhold til stilarket og skal pege på den mappe, hvor dit billede er. I dette tilfælde ville billedet være i den samme mappe som css- og html-filen. Hvis du placerer dine billeder i en separat mappe, inkluderer du også den: url (images / imagename.jpg)

Markørpositioner

Du kan også tilpasse markørens position. I eksemplet ovenfor får den udvendige egenskab kuglen til at vises uden for indholdsområdet.
liste-stil-position: indvendigt tillader kuglen inden for indholdsområdet, så den løber ind i listen indhold.

Korthandteknik

En anden hurtig måde at formatere en liste ved hjælp af CSS er stenografi teknik. Med denne metode er alle listeegenskaber specificeret i en enkelt egenskab:

ul
{
listestil: cirkel url ("image.gif");
}

I korthetsmetoden skal alle værdier vises i en specificeret rækkefølge som følger:

liste-stil-typen
liste-stil-position (indvendigt, udvendigt)
liste-stil-billede

Det betyder ikke noget, hvis du springer over en værdi, så længe de andre forbliver i den rigtige rækkefølge.

Tilpassede lister er meget nyttige, og CSS gør dem lette at opnå. Enkle detaljer omdanner gennemsnitlige websteder til websteder, der er bedst med det samme.

Video Instruktioner: Bootstrap 4 Concepts & Setup | BOOTSTRAP 4 TUTORIAL (Kan 2024).