Smuk punktliste i css. CSS Design: Taming Lists

Eksempel 1: Opret en punktopstilling

Resultat dette eksempel vist i fig. 1. Der anvendes kvadratiske markører og deres ydre placering i forhold til teksten.

Ris. 1. Listevisning ændret ved hjælp af stilarter

Anvend for at indstille dit eget billede som en markør ejendom i listestil-billede som vist i eksempel 2.

Eksempel 2: Brug af billeder som markører

• Titlen skal være kortere end tre linjer.
• Når du navngiver sektioner, skal du bruge etablerede udtryk, som f.eks Gæstebog, chat, link, startside og andre.
• Før du bruger et teknisk udtryk eller et ord, skal du beslutte, om det vil blive forstået af læseren.

Resultatet af dette eksempel er vist i fig. 2. Et lille billede bruges som markører.

Ris. 2. Billeder som markører

Nogle eksempler på skabelse forskellige lister er angivet i tabel. 2.

Hej kære læsere af bloggen. I dag vil der være en anden artikel om egenskaberne ved cascading style sheets. I det vi taler om styling ved hjælp af CSS-regler.

Generelt adskiller lister sig blandt blokelementer. Dette skyldes, at de inkluderer punkttegn og nummerering, der placeres af browseren selv.

Listestil egenskab - design af en liste på en html-side

I CSS sprog Der er tre egenskaber, der starter med listestil, og som er ansvarlige for udformningen af ​​punktopstilling og nummererede lister. Derudover er der også et hold liste-stil regel, så du kan reducere mængden af ​​kode.

Alle disse egenskaber kan bruges til begge html elementer li, og for elementerne ul og ol. Den eneste forskel er, at hvis reglerne er skrevet for en bestemt værdi af li-listen, så vil den kun blive anvendt på den. Og hvis de samme css-regler er skrevet for ul- eller ul-containere, så vil de blive anvendt på alle li-elementer indeholdt i disse containere.

Lad os starte med attributten liste-stil-type, som sætter type markører eller nummerering for listepunkter:

liste-stil-type: disk|cirkel|firkant|decimal|decimal-ledende-nul|nedre-romersk|øvre-romersk|nedre-græsk|nedre-alfa|nedre-latin|øvre-alfa|øvre-latinsk|armensk| georgisk|ingen|arver

Som du kan se, har egenskaben list-style-type mange tilgængelige værdier, som kan angive både typen af ​​markør og forskellige slags nummerering.

• disk - en markør i form af en sort cirkel (standardværdi for punktopstilling).
• cirkel - markør i form af en uudfyldt cirkel.
• firkant - markør i form af en firkant. Det kan være lyst eller mørkt, afhængigt af browseren.
• decimal - nummerering med arabiske tal (standardværdi for nummererede lister).
• decimal-førende-nul - nummerering i arabiske tal fra 01 til 99 med et indledende nul.
• lavere-romersk - nummerering i små romertal.
• øvre-romersk - nummerering i store romertal.
• lavere-græsk - nummerering med små græske bogstaver.
• lavere alfa og lavere latin - nummerering med små latinske bogstaver.
• øvre-alfa og øvre-latin - nummerering med store latinske bogstaver.
• armensk - nummerering ved hjælp af traditionelle armenske tal.
• georgisk - nummerering ved hjælp af traditionelle georgiske tal.
• ingen - mærkning og nummerering vil slet ikke blive udført.

Sådan vil listepunkterne se ud i browseren med forskellige betydninger liste-stil-type:

Ved brug af CSS stilarter det er lige meget hvilket element (OL eller UL) der bruges til at oprette listen. OL og UL adskiller sig kun i standardadfærd, og med egenskaben listestil-type kan du nemt forvandle en slags liste til en anden.

Stil attribut liste-stil-billede giver dig mulighed for at indstille som markør listeelementer grafisk billede . Når du bruger attributten list-style-image, ignoreres værdien af ​​list-style-type attributten:

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

Betyder ingen fjerner billedmarkøren og indstiller den til normal, ikke grafisk. Dette er standardadfærden.

Når du angiver adressen på billedfilen, vil billedet blive indsat i stedet for markøren. Som med at bruge , kan du bruge både absolutte og relative adresser som billedadresse. Hvis browseren ikke er i stand til at indlæse billedet, vil standardmarkøren eller -nummereringen blive brugt eller det, der er angivet i egenskaben i list-style-type.

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

• første listepunkt;


• andet listepunkt;


• tredje punkt på listen.

Og sådan ser det ud:

• første listepunkt;
• andet listepunkt;
• tredje punkt på listen.

Det er klart, at når du vælger et billede som markør, er det bedre at vælge et lille billede.

Og den sidste CSS-egenskab fra listestil-serien er liste-stil-position som giver dig mulighed for at angive placeringen af ​​en punkttegn eller nummerering i et listeelement. Der kan være to muligheder for værdien:

liste-stil-position: inde|udvendig

I tilfælde af værdi inde en markør eller nummerering placeres som inde i en liste og i etuiet uden for uden for li-elementer. Standardværdien er udenfor, og markøren flyttes udenfor.

Eksempelliste med forskellige listestil-positionsværdier:

• i første afsnit er alt som standard;
• i andet afsnit er liste-stil-position sat til inde. I dette tilfælde skal du bemærke, at den anden linje er placeret i plan med markøren;
• på dette tidspunkt er liste-stil-position lig med outside.

Præfabrikeret CSS liste-stil regel

Den følgende egenskab i CSS-listestil er en præfabrikeret til stylinglister. Det giver dig mulighed for at skrive alle tre CSS-regler diskuteret ovenfor i en enkelt. Rækkefølgen for at specificere værdierne i den kan være en hvilken som helst, og de parametre, du ikke angiver i listestilen, vil blive taget af browseren som standard.

Værdierne i kompileringsreglen i listestil skal adskilles med mellemrum:

liste-stil: liste-stil-type liste-stil-billede liste-stil-position;

En rigtig CSS-regel for stylinglister kan se sådan ud:

liste-stil: cirkel url (http://site/images/marker.png) udenfor;

Således giver egenskaben listestil dig mulighed for at reducere mængden af ​​kode betydeligt, fordi i stedet for tre regler er det nok kun at indstille én.

Som nævnt ovenfor kan værdier angives i enhver rækkefølge og i enhver mængde. Så for eksempel for at fjern markører fra menulisten det er nok at skrive:

liste-stil: ingen;

Det samme kan gøres ved at bruge egenskaben list-style-type:

liste-stil-type: ingen;

Dette er historien om html design lister ved hjælp af cascading style sheets vil jeg afslutte. At finde ud af om andre CSS-egenskaber du kan læse artikler fra afsnittet "" og glem ikke at abonnere på blogopdateringer. Vi ses!

HTML lister (

for nummereret,
for unummererede lister) bruges meget ofte. I denne tutorial går vi videre end at oprette almindelige lister og viser dig 8 forskellige, iøjnefaldende måder at designe dem på. HTML lister ved hjælp af CSS. Vi vil bruge ren CSS at få en kedelig liste til at se cool ud og endda få yderligere funktionalitet.



Sådan ser standardnummererede og unummererede lister ud:

1. Nummereret listepunkt #1
2. Nummereret listepunkt #2
3. Nummereret listeelement #3
• Uordnet listepunkt #1
• Uordnet listepunkt #2
• Uordnet listepunkt #3

Tjek eksemplet for at se, hvad vi laver.

Ser meget bedre ud, gør det ikke? Og du kan oprette alt dette blot ved at tilføje en lille CSS-kode. Vil du vide, hvordan man gør dette? Lad os komme igang!

Liste #1: Simpel menu



Den mest almindelige brug af lister på hjemmesider er at lave menuer. Dette eksempel viser kode, der vil skabe en enkel, minimalistisk, men elegant menu.

HTML

• Hjem
• Blog
• Om
• Kontakt

CSS

/* Liste #1 */ #liste1 ( ) #liste1 ul ( liste-stil: ingen ; tekst-align: center ; border-top: 1 px solid #eee ; border-bottom: 1 px solid #eee ; polstring: 10px 0 ; ) #list1 ul li ( display:inline ; text-transform:store bogstaver ; polstring: 0 10px; bogstavmellemrum: 10px; ) #list1 ul li a ( tekst-dekoration:ingen ; farve :#eee ; ) #liste1 ul li a:hover ( tekst-dekoration:understregning ; )

Liste #2: Forskellig skrifttype til tal



Det vanskelige med lister er, at alt på listen skal se ens ud. Tallene på listen skal have samme farve og skrifttype som teksten.

Men tilføjer ekstra element liste-element, Du kan omgå disse begrænsninger og oprette en meget usædvanlig liste. Sådan gør du:

HTML

1. Holland er et land i...

2. Amerikas Forenede Stater er en føderal forfatning ...

3. Filippinerne officielt kendt som Republikken ...

4. Det Forenede Kongerige af Storbritannien og...

CSS

/* Liste #2 */ #liste2 ( bredde: 320px; ) #list2 ol ( font-style:italic; font-family:Georgia, Times, serif; font-size: 24px; farve :#bfe1f1 ; ) #list2 ol li ( ) #list2 ol li p (polstring: 8px; font-style:normal ; font-family:Arial ; skriftstørrelse: 13 px; farve :#eee ; kant-venstre: 1px fast # 999 ; ) #list2 ol li p em ( display:blok ; )

Liste #3: Liste med indekser



Du kan ændre indeksstilen for en uordnet liste til nogle af de indbyggede visninger, men du kan også ændre den til et billede. Denne metode vil gøre listen endnu mere attraktiv. Lad os se på, hvordan man gør dette.

HTML

• Java
• .NET
• C++
• PHP

CSS

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

Liste #4: iPhone-stilliste



Denne liste er taget fra artiklen "iPhone Contacts App Using CSS and Jquery". Det ligner en liste fra iPhones Kontakter-app. Lidt mere stil til din hjemmeside.

HTML

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

CSS

/* Liste #4 */ #liste4 ( bredde: 320px; font-family:Georgia, Times, serif; skriftstørrelse: 15 px; ) #liste4 ul ( liste-stil : ingen ; ) # liste4 ul li ( ) # liste4 ul li a ( display:blok ; tekst-dekoration: ingen ; farve :# 000000 ; baggrundsfarve :#FFFFFF ; linjehøjde: 30 px; border-bottom-style:solid ; kant-bund-bredde: 1 px; border-bottom-color :#CCCCCC ; polstring-venstre: 10px; cursor:pointer ; ) #list4 ul li a:hover ( farve :#FFFFFF ; background-image:url (../images/hover.png ); background-repeat:repeat-x ; ) #list4 ul li a strong ( margin-right: 10px; }

Liste #5: Trælister



Trælister, dvs. indlejrede lister, kan være meget nyttige og smukke. Ved at bruge det tredje eksempel, en markørliste, kan vi oprette en udvidet liste. Selvfølgelig kan du endda gøre lister sammenklappelige og udvidelige ved hjælp af jQuery, men vi dækker 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 ( farve :#eee ; ) #liste5 ol ( font-size: 18 px; ) #list5 ol li ( ) #list5 ol li ol ( list-style-image : url ("../images/nested.png" ); udfyldning: 5 px 0 5px 18px ; skriftstørrelse: 15 px; ) #list5 ol li ol li ( farve :#bfe1f1 ; højde: 15 px; margin-venstre: 10px; }

Liste #6: Romertal og tekst med flere linjer



Som standard bruger en nummereret liste arabiske tal (1, 2, 3, 4 osv.) til nummerering. Ved at ændre værdien af ​​egenskaben listestil-type kan du vælge andre nummereringstypografier, såsom romertal.

Listemarkørerne er også som standard placeret uden for listen, du kan se dette i det andet eksempel, en anden skrifttype til tallene. For at omgå denne begrænsning kan du ændre værdien af ​​egenskaben listestil-position, så nummereringen er placeret inde i listen.

HTML

1. Lorem ipsum dolor sit amet, ...
   Fusce sit amet...
2. Aenean placer 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 ; farve :#eee ; 14 px; liste-stil-position: inde; ) #list6 ol li ( )

Liste #7: Kommasepareret, enkelt-linje liste



Lister bruges oftest til at vise elementer under hinanden. Men hvad nu hvis du vil oprette en liste på én linje? Du kan opnå dette ved at indstille egenskaben display til inline. Men hvis du bruger tekst, foretrækker du måske at oprette en kommasepareret liste. Hvordan opnår man dette? Brug af pseudoklassen:after.

HTML

• Første inline element
• Andet inline element
• Tredje inline element
• Fjerde inline-element

CSS

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

Liste #8: Roterende menu

Her sidste metode, som fungerer med CSS3 og understøttes af Firefox, Safari og Chrome browsere. Når du holder musen over blokelement, vil den gå ind i den aktive roterede tilstand. Denne metode er måske ikke særlig nyttig, men den er rar at se på.

• Om
• Kontakt