Vakker punktliste i css. CSS-design: Taming Lists

Eksempel 1: Lag en punktliste

Resultat dette eksemplet vist i fig. 1. Firkantede markører brukes og deres utvendige plassering i forhold til teksten.

Ris. 1. Listevisning endret ved hjelp av stiler

Bruk for å angi ditt eget bilde som markør eiendom i listestil-bilde som vist i eksempel 2.

Eksempel 2: Bruk av bilder som markører

• Tittelen skal være kortere enn tre linjer.
• Når du navngir seksjoner, bruk etablerte termer, som f.eks Gjestebok, chat, lenke, hjemmeside og andre.
• Før du bruker et teknisk begrep eller et ord, må du bestemme om det skal forstås av leseren.

Resultatet av dette eksemplet er vist i fig. 2. Et lite bilde brukes som markører.

Ris. 2. Bilder som markører

Noen eksempler på skapelse ulike lister er gitt i tabell. 2.

Hei, kjære lesere av bloggsiden. I dag vil det være en annen artikkel om egenskapene til cascading stilark. I det vi vil snakke om styling ved hjelp av CSS-regler.

Generelt skiller lister seg mellom blokkelementer. Dette skyldes det faktum at de inkluderer kuler og nummerering som plasseres av nettleseren selv.

Liste stil eiendom - design av en liste på en html side

I CSS-språk Det er tre egenskaper som starter med listestil, som er ansvarlige for utformingen av punktlister og nummererte lister. I tillegg er det også et team listestil regel, slik at du kan redusere mengden kode.

Alle disse egenskapene kan brukes til begge html-elementer li, og for elementene ul og ol. Den eneste forskjellen er at hvis reglene er skrevet for en spesifikk verdi av li-listen, vil den bare bli brukt på den. Og hvis de samme css-reglene er skrevet for ul- eller ul-beholdere, vil de bli brukt på alle li-elementer i disse beholderne.

La oss starte med attributtet liste-stil-type, som setter type markører eller nummerering for listeelementer:

liste-stil-type: plate|sirkel|kvadrat|desimal|desimal-ledende-null|nedre-romersk|øvre-romersk|nedre-gresk|nedre-alfa|nedre-latinsk|øvre-alfa|øvre-latinsk|armensk| georgisk|ingen|arve

Som du kan se, har egenskapen listestil-type mange tilgjengelige verdier, som kan spesifisere både type markør og forskjellige typer nummerering.

• plate - en markør i form av en svart sirkel (standardverdi for punktlister).
• sirkel - markør i form av en ufylt sirkel.
• firkant - markør i form av en firkant. Det kan være lyst eller mørkt, avhengig av nettleseren.
• desimal - nummerering med arabiske tall (standardverdi for nummererte lister).
• desimal-ledende-null - nummerering i arabiske tall fra 01 til 99 med en innledende null.
• lavere-romersk - nummerering i små romertall.
• øvre-romersk - nummerering i store romertall.
• lavere-gresk - nummerering med små greske bokstaver.
• lavere alfa og lavere latin - nummerering med små latinske bokstaver.
• øvre-alfa og øvre-latinsk - nummerering med store latinske bokstaver.
• armensk - nummerering med tradisjonelle armenske tall.
• georgisk - nummerering med tradisjonelle georgiske tall.
• ingen - merking og nummerering vil ikke bli utført i det hele tatt.

Slik vil listeelementene se ut i nettleseren med forskjellige betydninger liste-stil-type:

Ved hjelp av CSS-stiler det spiller ingen rolle hvilket element (OL eller UL) som brukes til å lage listen. OL og UL skiller seg bare i standard oppførsel, og med egenskapen listestil-type kan du enkelt gjøre en liste til en annen.

Stilattributt liste-stil-bilde lar deg angi som markør liste elementer grafisk bilde . Når du bruker list-style-image-attributtet, ignoreres verdien av list-style-type-attributtet:

liste-stil-bilde: ingen|<интернет-адрес файла изображения>|arve

Betydning ingen fjerner bildemarkøren og setter den til normal, ikke grafisk. Dette er standard oppførsel.

Når du angir adressen til bildefilen, vil bildet settes inn i stedet for markøren. Som med å bruke , kan du bruke både absolutte og relative adresser som bildeadresse. Hvis nettleseren ikke klarer å laste inn bildet, vil standardmarkøren eller nummereringen brukes eller det som er spesifisert i egenskapen i list-style-type.

Eksempel på en liste med et bilde som markør:

• første listeelement;


• andre listeelement;


• tredje punkt på listen.

Og slik ser det ut:

• første listeelement;
• andre listeelement;
• tredje punkt på listen.

Det er klart at når du velger et bilde som markør, er det bedre å velge et lite bilde.

Og den siste CSS-egenskapen fra listestil-serien er liste-stil-posisjon som lar deg spesifisere plasseringen av en kule eller nummerering i et listeelement. Det kan være to alternativer for verdien:

liste-stil-posisjon: inne|utenfor

I tilfelle av verdi innsiden en markør eller nummerering plasseres som inne i en liste, og i etuiet utenfor utenfor li-elementer. Standardverdien er utenfor og markøren flyttes utenfor.

Eksempelliste med forskjellige listestil-posisjonsverdier:

• i første ledd er alt som standard;
• i andre ledd er listestil-posisjon satt til inne. I dette tilfellet, merk at den andre linjen er plassert i flukt med markøren;
• på dette punktet er liste-stil-posisjon lik utenfor.

Prefabrikkert CSS listestil regel

Følgende egenskap i CSS-listestil er en prefabrikert for stylinglister. Den lar deg skrive alle de tre CSS-reglene som er diskutert ovenfor i én enkelt. Rekkefølgen for å spesifisere verdiene i den kan være hvilken som helst, og parametrene du ikke spesifiserer i listestilen vil bli tatt av nettleseren som standard.

Verdiene i kompileringsregelen i listestil skal skilles med mellomrom:

liste-stil: liste-stil-type liste-stil-bilde liste-stil-posisjon;

En ekte CSS-regel for stylinglister kan se omtrent slik ut:

liste-stil: sirkel url (http://site/images/marker.png) utenfor;

Dermed lar egenskapen listestil deg redusere mengden kode betydelig, fordi i stedet for tre regler er det nok å angi bare én.

Som nevnt ovenfor kan verdier spesifiseres i hvilken som helst rekkefølge og i hvilken som helst mengde. Så for eksempel for å fjern markører fra menylisten det er nok å skrive:

liste-stil: ingen;

Det samme kan gjøres ved å bruke egenskapen list-style-type:

liste-stil-type: ingen;

Dette er historien om html design lister ved hjelp av cascading stilark vil jeg fullføre. For å finne ut om andre CSS-egenskaper du kan lese artikler fra ""-delen og ikke glem å abonnere på bloggoppdateringer. Ser deg igjen!

HTML-lister (

for nummerert,
for unummererte lister) brukes svært ofte. I denne opplæringen vil vi gå lenger enn å lage vanlige lister og vise deg 8 forskjellige, iøynefallende måter å designe dem på. HTML-lister bruker CSS. Vi vil bruke ren CSS for å få en kjedelig liste til å se kul ut og til og med få ekstra funksjonalitet.



Slik ser standardnummererte og unummererte lister ut:

1. Nummerert listeelement #1
2. Nummerert listeelement #2
3. Nummerert listeelement #3
• Uordnet listeelement #1
• Uordnet listeelement #2
• Uordnet listeelement #3

Ta en titt på eksemplet for å se hva vi skal lage.

Ser mye bedre ut, gjør det ikke? Og du kan lage alt dette bare ved å legge til en liten CSS-kode. Vil du vite hvordan du gjør dette? La oss komme i gang!

Liste #1: Enkel meny



Den vanligste bruken av lister på nettsider er å lage menyer. Dette eksemplet viser kode som vil skape en enkel, minimalistisk, men elegant meny.

HTML

• Hjem
• Blogg
• Om
• Kontakt

CSS

/* Liste #1 */ #list1 ( ) #list1 ul ( list-style:none ; text-align:center ; border-top: 1 px solid #eee ; border-bottom: 1 px solid #eee ; polstring: 10 piksler 0 ; ) #list1 ul li ( display:inline ; text-transform:store bokstaver ; utfylling: 0 10px; avstand mellom bokstavene: 10 piksler; ) #list1 ul li a ( tekstdekorasjon:ingen ; farge :#eee ; ) #liste1 ul li a:hover ( tekstdekorasjon:understreking ; )

Liste #2: Ulik font for tall



Det vanskelige med lister er at alt på listen må se likt ut. Tallene i listen må ha samme farge og skrifttype som teksten.

Men legger til tilleggselement listeelement, Du kan omgå disse begrensningene og lage en veldig uvanlig liste. Slik gjør du det:

HTML

1. Nederland er et land i...

2. Amerikas forente stater er en føderal konstitusjonell ...

3. Filippinene offisielt kjent som republikken ...

4. Storbritannia av Storbritannia og...

CSS

/* Liste #2 */ #liste2 ( bredde: 320 piksler; ) #list2 ol ( font-style:kursiv; font-family:Georgia, Times, serif; font-size: 24px; farge :#bfe1f1 ; ) #list2 ol li ( ) #list2 ol li p ( padding: 8 px; font-style:normal ; font-family:Arial ; skriftstørrelse: 13 piksler; farge :#eee ; kantlinje-venstre: 1px solid # 999 ; ) #list2 ol li p em ( display:block ; )

Liste #3: Liste med indekser



Du kan endre indeksstilen for en uordnet liste til noen av de innebygde visningene, men du kan også endre den til et bilde. Denne metoden vil gjøre listen enda mer attraktiv. La oss se på hvordan du gjør dette.

HTML

• Java
• .NETT
• C++
• PHP

CSS

/* Liste #3 */ #list3 ( ) #list3 ul ( list-style-image : url ("../images/arrow.png" ) ; farge :#eee ; font-size: 18 piksler; ) #list3 ul li ( linjehøyde: 30 piksler; }

Liste #4: iPhone-stilliste



Denne listen er hentet fra artikkelen "iPhone Contacts App Using CSS and Jquery". Det ser ut som en liste fra iPhones Kontakter-app. Litt mer stil for nettstedet ditt.

HTML

• Toronto 2004
• Beijing 2008
• London 2012
• Rio de Janeiro 2016

CSS

/* Liste #4 */ #liste4 ( bredde: 320 piksler; font-family:Georgia, Times, serif; skriftstørrelse: 15 piksler; ) #liste4 ul ( listestil : ingen ; ) #liste4 ul li ( ) #liste4 ul li a ( display:blokk ; tekstdekorasjon: ingen ; farge :# 000000 ; bakgrunnsfarge :#FFFFFF ; linjehøyde: 30 piksler; border-bottom-style:solid ; border-bottom-width: 1 px; border-bottom-color :#CCCCCC ; polstring-venstre: 10 piksler; markør:peker ; ) #list4 ul li a:hover ( farge :#FFFFFF ; background-image:url (../images/hover.png ) ; background-repeat:repeat-x ; ) #list4 ul li a sterk ( margin-right: 10 piksler; }

Liste #5: Trelister



Trelister, dvs. nestede lister, kan være veldig nyttige og vakre. Ved å bruke det tredje eksemplet, en pekerliste, kan vi lage en utvidet liste. Selvfølgelig kan du til og med gjøre lister sammenleggbare og utvidbare ved å bruke jQuery, men vi dekker kun CSS her.

HTML

1. Google
   1. Picasa
   2. Feedburner
   3. Youtube
2. Microsoft
   1. Corel Corporation
   2. Zignals
   3. ByteTaxi
3. Yahoo!
   1. Xoopit
   2. BuzzTracker
   3. MyBlogLog

CSS

/* Liste #5 */ #liste5 ( farge :#eee ; ) #liste5 ol ( font-size: 18 piksler; ) #list5 ol li ( ) #list5 ol li ol ( list-style-image : url ("../images/nested.png" ); utfylling: 5 px 0 5px 18px ; skriftstørrelse: 15 piksler; ) #list5 ol li ol li ( farge :#bfe1f1 ; høyde: 15 piksler; marg-venstre: 10 piksler; }

Liste #6: Romertall og tekst med flere linjer



Som standard bruker en nummerert liste arabiske tall (1, 2, 3, 4 osv.) for nummerering. Ved å endre verdien til egenskapen listestil-type kan du velge andre nummereringsstiler, for eksempel romertall.

Også som standard er listepekerne plassert utenfor listen, du kan se dette i det andre eksemplet, en annen font for tallene. For å omgå denne begrensningen kan du endre verdien til listestil-posisjon-egenskapen slik at nummereringen er plassert inne i listen.

HTML

1. Lorem ipsum dolor sit amet, ...
   Fusce sit amet...
2. Aenean plasseret lectus tristique...
   Vivamus interdum...
3. Mauris eget sapien arcu, vitae...
   Phasellus neque risus...
4. Phasellus feugiat lacus...
   Duis rhoncus...

CSS

/* Liste #6 */ #list6 ( font-family : "Trebuchet MS" , "Lucida Grande" , Verdana, Lucida, Geneve, Helvetica, Arial, sans-serif ; ) #list6 ol ( liste-stil-type : øvre -romersk; farge:#eee; skriftstørrelse: 14 piksler; liste-stil-posisjon: inne; ) #list6 ol li ( )

Liste #7: Kommaseparert liste med én linje



Lister brukes oftest til å vise elementer under hverandre. Men hva om du vil lage en enlinjeliste? Du kan oppnå dette ved å sette visningsegenskapen til inline. Men hvis du bruker tekst, foretrekker du kanskje å lage en kommadelt liste. Hvordan oppnå dette? Bruke pseudoklassen:etter.

HTML

• Første innebygde element
• Andre innebygde element
• Tredje innebygd element
• Fjerde innebygde element

CSS

/* Liste #7 */ #list7 ( ) #list7 ul ( farge :#eee ; font-size: 18 piksler; font-family:Georgia, Times, serif; ) #list7 ul li (display : inline ; ) #list7 ul li:after ( content : ", " ; ) #list7 ul li.last :after ( innhold : "." ; )

Liste #8: Roterende meny

Her siste metode, som fungerer med CSS3 og støttes av nettlesere Firefox, Safari og Chrome. Når du holder musen over blokkelement, vil den gå inn i aktiv rotert tilstand. Denne metoden er kanskje ikke særlig nyttig, men den er fin å se på.

• Om
• Kontakt