Įdiegimui naudojama žyma ol. Stilingo ul li sąrašų CSS dizaino pavyzdžiai

Sveiki, mieli tinklaraščio svetainės skaitytojai. Šiandien, kaip šio skyriaus dalis, noriu pakalbėti apie įvairius HTML sąrašus, kuriuos galima sukurti pagal specialiai tam sukurtas UL, OL, LI ir DL žymas. UL ir LI poros sukuria suženklintus sąrašus, OL ir LI poros – sunumeruotus sąrašus, o elementai DL, DT ir DD – vadinamuosius apibrėžimų sąrašus. Taip pat trumpai apžvelgsime įdėtųjų struktūrų kūrimo principus.

Norėčiau priminti, kad jau spėjome pakalbėti apie šiuolaikinio, taip pat lentelių išdėstymo pagrindus (). Be to, palietėme pagrindus ir išmokome.

Ženklų sąrašai, pagrįsti UL ir LI žymomis

UL žyma naudojama sąrašams su ženkleliais kurti, o OL žyma naudojama sunumeruotiems sąrašams kurti. Šios žymos yra suporuotos ir blokuoja žymes, kaip ir LI elementas.

Tarp atidarymo ir uždarymo žymų yra atskiri sąrašo elementai, kurie savo ruožtu yra įterpti į atidarymo ir uždarymo LI elementą. Viršuje ir apačioje HTML sąrašai Naršyklė prideda įtrauką į vieną eilutę, panašią į įtrauką, kurią sukuria pastraipos žyma.

Pavyzdžiui, pažvelkime į parinktį su ženkleliais, kuri gali atrodyti taip:

• Pirmoji eilutė
• Antra
• Paskutinis elementas

Atidarymo ir uždarymo UL žymose gali būti tik LI elementai, o į šiuos elementus (sąlygas) galite įterpti bet kokį turinį (tekstą, paveikslėlius, antraštes, pastraipas, nuorodas ir net kitus sąrašus).

Tie. UL naudojamas tik tam, kad būtų pateiktas suženklintas (neužsakytas) sąrašas ir viskas, ką matysite tinklalapį joje, įgyvendinama naudojant LI elementų turinį.

UL galite pakeisti žymeklio tipą, nurodydami skirtingas atributo „Tipas“ reikšmes. Jei UL elemento „Tipas“ (valdantis žymeklių išvaizdą) nenurodytas, tada bus rodoma numatytoji žymeklio išvaizda (diskas - apskritimas, užpildytas teksto spalva):

1. — užpildytas ratas (numatytasis);
   • - neužpildytas ratas;
     • - kvadratas

Aukščiau pateiktuose pavyzdžiuose nurodėme atributą „Tipas“ UL elemente naudodami šio tipožymekliai visiems daiktams. Tačiau atributas „Tipas“ taip pat gali būti nurodytas kiekvienai atskirai LI žymai, nustatant savo šio elemento žymeklio tipą.

Su ženkleliais pažymėto sąrašo pavyzdys įvairių tipų kiekvienos prekės žymeklis:

1. Žymeklis užpildyto disko pavidalu
2. Žymeklis nedažyto disko pavidalu
3. Kvadratas

Sunumeruoti sąrašai HTML formatu pagal OL žymą

Norėdami sukurti sunumeruotą sąrašą, naudojamos OL žymos, kuriose vėl bus LI elementai. OL ir LI, kaip jau minėjau, yra pagrįsti blokais (tai yra, jie paprastai užima visą joms skirtą erdvę) ir nieko, išskyrus LI elementus, negalima įdėti į OL.

Pasirodo, OL ir UL yra paslaugų žymos, kurios reikalingos tik tam, kad naršyklei nurodytų, kokio tipo sąrašą kuriame (su ženkleliu ar sunumeruotu). Sunumeruoto elemento atveju kiekvieno elemento kairėje matysime ne žymeklį, o skaičių ir tašką už jo:

1. Pirmoji eilutė
2. Antras punktas
3. Trečioji eilutė

Kaip jau minėjau aukščiau, UL, OL ir LI elementai turi galimybę naudoti atributą TYPE. Tai leidžia konfigūruoti žymeklio tipą arba nurodyti, kokie skaičiai ar raidės bus naudojami sąrašo elementams sunumeruoti. Sunumeruotame sąraše šio atributo parametrai gali turėti šias reikšmes:

1. — numeravimas bus atliekamas įprastais arabiškais skaitmenimis (ta pati parinktis bus naudojama pagal numatytuosius nustatymus, jei nėra atributo „Tipas“);
   1. — didžiosios raidės kaip numeracija;
      1. - mažosios raidės;
         1. - didieji romėniški skaitmenys;
            1. - mažosios raidės romėniški skaitmenys;

               Sunumeruoto sąrašo su skirtingais kiekvieno elemento numeravimo tipais pavyzdys:

               

               1. sunumeruoti dideliais romėniškais skaitmenimis
               2. Numeravimas mažomis lotyniškomis raidėmis
               3. Numeravimas mažais romėniškais skaitmenimis

               Kuriant sunumeruotus sąrašus taip pat galima pradėti numeruoti ne nuo vieno, o nuo START atribute nurodyto skaičiaus. Pavyzdžiui:

               1. Pirmasis elementas, kurio numeris nurodytas OL žymoje su atributu start="23".
               2. Kitas elementas su vienu didesniu numeriu
               3. Dar vienas

               OL atveju taip pat galite pradėti naują numeraciją nuo bet kokios reikšmės, pradedant nuo bet kurio elemento, šio elemento pradžioje LI įrašę atributą VALUE su reikiamu skaičiumi. Pavyzdžiui:

               1. Pirmas taškas su numeriu vienas
               2. Šis elementas gaus skaičių, nurodytą atribute value="32".
               3. Prekė su dideliu skaičiumi

               Sąrašų išvaizdos kūrimas CSS (stilių lapuose)

               Bet dažniausiai dabar išvaizdažymekliai nurodomi ne per atributą TYPE, o , kuriems nurodytos atitinkamos savybės.

               Čia tik pateiksiu įvairių nenumeruotų sąrašų ženklelių, kurių išvaizda yra nustatyta, pavyzdį atskiras failas su kaskadiniais stiliaus lapais.

               • Pirmas punktas
               • Antra
               • Paskutinis

               Bet apie tai kalbėsime kituose straipsniuose. Taip nustatoma UL žymenų išvaizda šiame tinklaraštyje. Paveikslėliai naudojami kaip žymekliai: įprastiems nenumeruoto sąrašo elementams - , įdėtiems nenumeruoto sąrašo elementams - .

               Specialūs ir įdėtieji sąrašai HTML kode

               Trečiasis ir paskutinis tipas vadinamas „apibrėžimų sąrašais“ ir jie nurodomi naudojant tris žymas – DL, DT ir DD. DL nurodo naršyklei, kad toliau pateikiamas apibrėžimų sąrašas.

               Paprastai šis tipas naudojamas (arba buvo skirtas naudoti) rašant žodyno įrašus, susidedančius iš terminų (įtraukti į DT žymas) ir jų aprašymus (įtraukti į DD žymas).

               Pirma kadencija

               Aprašymas

               Antra kadencija

               Jo aprašymas

               

               Jei pažvelgsite į aukščiau pateiktą pavyzdį, pastebėsite, kad DD elementas (termino aprašymas) yra poslinkis (40 pikselių) DT elemento (pačio termino) atžvilgiu.

               Paprastai DL, DT ir DD yra blokinės žymos, o į DT elementą galima įterpti tik turinį su eilutinėmis žymomis (pasirodo, kad antraštės ir pastraipos blokiniai elementai negali būti naudojami DT viduje). O DD žymų viduje galite įterpti bet kokius elementus, tiek eilutę, tiek bloką.

               Įdėtas sąrašas HTML jis sukurtas pagal analogiją su paprastu, tačiau pagrindinio sąrašo viduje kai kurie elementai vėl įtraukiami į pradžios ir pabaigos žymas UL arba OL.

               Atkreipkite dėmesį, kad elemento, kuriame bus sukurtas įdėtas elementas, uždarymo LI yra dedamas tik po viso įdėtojo sąrašo kodo (tai labai svarbu teisingas ekranas tinklalapyje). Įdėtas sąrašas gali atrodyti maždaug taip:

               

               1. Pirmoji pagrindinės pastraipa sunumeruota
               2. Antras punktas
                  • Pirmasis įdėtojo ženklelio elementas
                  • Antra
                  • Trečias ir paskutinis punktas
               3. Trečiasis elementas sunumeruotas

               Sėkmės tau! Greitai pasimatysime tinklaraščio svetainės puslapiuose

               Jums gali būti įdomu

               Kaip į HTML įterpti nuorodą ir paveikslėlį (nuotrauką) – IMG ir A žymės Pasirinkite, Parinktis, Teksto sritis, Etiketė, Laukų rinkinys, Legenda – žymos HTML formos išskleidžiamuosius sąrašus ir teksto lauką
               Svetainės HTML formos – žymos Form, Input and Select, Option, Textarea, Label ir kt., skirtos žiniatinklio formos elementams kurti
               Kaip spalvos nustatomos HTML ir CSS kode, RGB atspalvių pasirinkimas lentelėse, Yandex išvestis ir kitos programos
               Įterpti ir objektas – HTML žyma ir medijos turiniui (vaizdo, flash, garso) rodyti tinklalapiuose
               Antraštės žymos ir atributai H1-H6, horizontali linija Hr, eilutės lūžis Br ir pastraipos lūžis P pagal Html 4.01 standartą
               Lentelės HTML – lentelės, Tr ir Td žymos, taip pat Colspan, Cellpadding, Cellspacing ir Rowspan joms sukurti
               Kas yra hiperteksto žymėjimo kalba Html ir kaip peržiūrėti visų žymų sąrašą W3C tikrinimo priemonėje
               Šriftas (veidelis, dydis ir spalva), Blockquote ir išankstinės žymos – senas teksto formatavimas grynu HTML (nenaudojamas CSS)
               Iframe ir Frame – kas tai yra ir kaip geriausia naudoti rėmelius HTML
               Img – HTML žyma, skirta įterpti paveikslėlį (Src), sulygiuoti ir apvynioti tekstą aplink jį (lygiuoti), taip pat nustatyti foną (foną)

               Hiperteksto žymėjimo kalba HTML turi žymą

               , naudojamas sąrašams su ženkleliais kurti. Tai palaiko visi šiuolaikinės naršyklės ir leidžia rodyti elementus tokia tvarka, kuriai nereikia numeruoti. Pavyzdžiui, labai dažnai rodomi meniu punktai ir viskas, kas susiję su sąrašais puslapyje: patiekalai, produktai, įranga, įrankiai ir daug daugiau, ką reikia išvardyti nenurodant konkretaus elemento prioriteto.

               Žymos sintaksė

               • Elementas #1
               • 2 elementas
               • 3 elementas
               • ...

               Šis kodas svetainėje paverčiamas ženkleliais sudarytu sąrašu:

               • Elementas #1
               • 2 elementas
               • 3 elementas

               Žyma

               reikalauja privalomas naudojimas uždarymo žyma
               .

               Sąrašo elementams formuoti naudojama suporuota žyma. Tarp pradžios ir pabaigos žymų yra atskiri žodžiai, frazės, pastraipos, vaizdai, kodo dalys ir daug daugiau, kurie yra ženklelių sąrašo turinys.

               Koks gali būti sąrašo su ženkleliais turinys?

               Tai gali būti įvairus tekstas, įskaitant pavienius žodžius, frazes ir pastraipas, vaizdus, ​​įdėtus sąrašus, php kodo dalis ir daug daugiau, kuriuos reikia paprastai pažymėti.

               Pagal numatytuosius nustatymus kiekvienas sąrašo elementas su ženkleliais yra įtrauktas 40 pikselių į dešinę. Naudojant CSS stiliai, galime pakeisti ekraną šį sąrašą savo nuožiūra. Žyma

               yra blokinis, todėl užima visą jam prieinamą plotą, apribotą ekrano krašto, lentelės rėmelio ar kitų puslapio elementų.
               Leidžiami sąrašo sąraše priedai.

               Pavyzdžiui

               • Elementas #1
               • • Prekė Nr. 2-1
                 • 2-2 elementas
                 • 2-3 elementas
               • 3 elementas
               • ...

               Žymų atributai ir savybės

               Plačiai naudojamas žymos atributas

               yra tipo atributas, nurodantis, kaip atrodys sąrašo žymeklis. Gali gauti šias vertes

               1. type="disc" - žymeklis užpildyto apskritimo pavidalu (ši reikšmė yra numatytoji). Disko pavyzdys buvo šiek tiek aukštesnis.

               2. type="circle" - žymeklis skaidraus apskritimo pavidalu

               Pavyzdžiui:

               • Elementas #1
               • 2 elementas

               • Elementas #1
               • 2 elementas

               3. type="square" – kvadrato formos žymeklis

               Pavyzdžiui:

               • Elementas #1
               • 2 elementas

               Ir štai kaip tai atrodo puslapyje:

               • Elementas #1
               • 2 elementas
               1 pastaba

               CSS ženklelio tipas nurodomas naudojant list-style-type atributą:

               • ...

               Pažiūrėkime, kokias reikšmes gali turėti sąrašo stiliaus tipas:

               • diskas - apskritimo formos žymeklis (pavyzdys buvo aukščiau)
               • apskritimas - žymeklis skaidraus apskritimo pavidalu (pavyzdys buvo aukščiau)
               • kvadratas - kvadrato formos žymeklis (pavyzdys buvo aukščiau)
               • dešimtainis - žymeklis sunumeruoto sąrašo pavidalu arabiškais skaitmenimis: 1, 2, 3, ...
               • dešimtainis nulis - žymeklis sunumeruoto sąrašo pavidalu arabiškais skaitmenimis su nuliu priekyje: 01, 02, 03, ...
               • apatinė romėniška - žymeklis numeruoto sąrašo pavidalu romėniškoje abėcėlėje mažomis raidėmis: i, ii, iii, iv, v
               • viršutinė romėniška - žymeklis numeruoto sąrašo pavidalu romėniškoje abėcėlėje didžiosiomis raidėmis: I, II, III, IV, V
               • apatinė lotynų kalba - žymeklis sąrašo pavidalu lotyniškoje abėcėlėje mažomis raidėmis: a, b, c, d, ...
               • viršutinė lotynų kalba - žymeklis sąrašo pavidalu lotyniškomis abėcėlėmis didžiosiomis raidėmis: A, B, C, D, ...
               • žemutinė graikų kalba - žymeklis sąrašo pavidalu graikų abėcėlėje mažomis raidėmis
               • viršutinė graikų kalba - žymeklis sąrašo pavidalu graikų abėcėlėje didžiosiomis raidėmis

               2 pastaba

               Atributas gali būti priskirtas pačiai žymai

               , ir žymas
               • . Kai nustatote žymos atributą
                 visi sąrašo elementai bus rodomi taip, kaip nurodo atributas. Bet tam ar kitam elementui galime suteikti savo vaizdą. Pavyzdys paveikslėlyje:

                 Kodas atrodo taip:

                 • Elementas #1
                 • 2 elementas
                 • 3 elementas

                 • Elementas #1
                 • 2 elementas
                 • 3 elementas

                 Žymų žymeklių keitimas

                 naudojant CSS

                 Žymelių sąrašo elementai sukurti pagal žymą

                 , gali būti pažymėti savavališkais vaizdais. CSS naudojamas žymeklio tipui pakeisti. Pavyzdžiui

                 • Elementas #1
                 • 2 elementas
                 • 3 elementas

                 O štai kaip atrodo puslapyje:

                 • Elementas #1
                 • 2 elementas
                 • 3 elementas

                 C naudojant CSS galime nustatyti kitus žymeklio rodymo tipus. Bet jūs turite tai atsiminti, kai nurodote bet kokį žymos stilių

                 , jis taikomas visiems sąrašo elementams.

                 Sunumeruoti sąrašai yra elementų rinkinys su jų serijos numeriais. Numeravimo tipas ir tipas priklauso nuo žymos atributų

                 , kuris naudojamas sąrašui sudaryti. Kiekvienas sunumeruoto sąrašo elementas yra pažymėtas žyma
                 1. kaip parodyta žemiau.
                    1. Pirmas punktas
                    2. Antras punktas
                    3. Trečias punktas

                    Jei nenurodysite jokių papildomų atributų ir tiesiog parašykite žymą

                    , tada numatytasis yra sąrašas su arabiškais skaičiais (1, 2, 3,...), kaip parodyta 11.3 pavyzdyje.

                    11.3 pavyzdys. Sukurkite numeruotą sąrašą

                    Darbas su laiku

                    1. punktualumo kūrimas (niekada nieko nevėluosite);
                    2. vaistas nuo punktualumo (niekada neskubėsite);
                    3. laiko ir laikrodžių suvokimo pasikeitimas.

                    Šio pavyzdžio rezultatas parodytas fig. 11.3.

                    Ryžiai. 11.3. Sunumeruoto sąrašo vaizdas

                    Atminkite, kad sunumeruotas sąrašas taip pat prideda automatinę įtrauką teksto viršuje, apačioje ir kairėje.

                    Šios reikšmės gali būti naudojamos kaip numeravimo elementai:

                    • arabiški skaičiai (1, 2, 3, ...);
                    • didžiosios lotyniškos raidės (A, B, C, ...);
                    • mažosios lotyniškos raidės (a, b, c, ...);
                    • didieji romėniški skaitmenys (I, II, III, ...);
                    • mažosios raidės romėniški skaitmenys (i, ii, iii, ...).

                    Norėdami nurodyti sunumeruoto sąrašo tipą, naudokite žymos tipo atributą

                    . Galimos jo vertės pateiktos lentelėje. 11.2.
                    Lentelė 11.2. Sunumeruoto sąrašo tipai

                    Sąrašo tipas	HTML kodas	Pavyzdys
                    Arabiški skaičiai		1. Čeburaška 2. Krokodilas Gena 3. Šapokliakas
                    Lotynų abėcėlės didžiosios raidės		A. Čeburaška B. Krokodilas Gena C. Shapoklyak
                    Mažosios lotyniškos abėcėlės raidės		a. Čeburaška b. Krokodilas Gena c. Shapoklyak
                    Romėniški skaičiai didžiosiomis raidėmis		I. Čeburaška II. Krokodilas Gena III. Shapoklyak
                    Romėniški skaitmenys mažosiomis raidėmis		i. Čeburaška ii. Krokodilas Gena iii. Shapoklyak

                    Norėdami pradėti sąrašą su konkrečia reikšme, naudokite žymos atributą start

                    . Nesvarbu, koks sąrašo tipas yra nustatytas naudojant tipą , pradžios atributas veikia taip pat su romėniškais ir arabiškais skaitmenimis. 11.4 pavyzdyje parodyta, kaip sudaryti sąrašą naudojant didžiąsias romėniškąsias raides, prasidedančias aštuoniais.

                    11.4 pavyzdys. Sąrašo numeracija

                    8. Karalius Magnum XLIV
                    9. Karalius Siegfriedas XVI
                    10. Karalius Žygimantas XXI
                    11. Karalius Husbrantas I

                    Šio pavyzdžio rezultatas parodytas fig. 11.4.

                    

                    Ryžiai. 11.4. Sunumeruotas sąrašas su romėniškais skaitmenimis

                    Sąrašai gali būti sunumeruoti arba nenumeruoti.

                    Rodomi sunumeruoti sąrašai su kodu:

                    Sąrašas su skaičiais
                    1. 1 punktas
                    2. 2 punktas
                    3. 3 punktas

                    Nenumeruoti sąrašai rodomi su tokiu kodu:

                    Sąrašas su varnelėmis ar kitais simboliais
                    • 1 punktas
                    • 1 punktas
                    • 1 punktas

                    Kiekvienas bet kurio sąrašo elementas yra įtrauktas į li tag. Visi sąrašo elementai yra įtraukti į vieną bendrą ul arba ol žymą. Šių žymų stiliai parašyti stiliaus lape.

                    Kiekvienai žymai priskiriami konkretūs dizaino stiliai. Jie nurodo įtraukas iš teksto.

                    Sunumeruotame sąraše kiekvienam elementui nurodomi numeravimo stiliai.

                    Standartiniai arabiški skaitmenys apibūdinami reikšme po kablelio.

                    sąrašo stiliaus tipas: dešimtainis; /*arabiški skaitmenys*/

                    Norėdami suženklinti sąrašą, nurodykite simbolių stilių – kvadratai arba apskritimai.

                    sąrašo stiliaus tipas: ratas; /*ratai*/
                    sąrašo stiliaus tipas: kvadratas; /*kvadratai*/

                    Kiekvienam meniu elementui galima priskirti vaizdą.

                    list-style-image: url('kelias į vaizdą');

                    Paprastai šablonuose sunumeruotas sąrašas formuojamas paprastais skaičiais, o nenumeruotas – juodais kvadratais ir apskritimais. Tai nuobodu ir be išraiškos. Pataisykime tai.
                    

                    Kur sąrašo stiliai parašyti „Twenty Eleven“ šablone?

                    Atidarykite style.css failą. Raskite skyrių pavadinimu /* Teksto elementai */

                    Standartinis kodas atrodo taip:

                    Kaip sukurti numeruotą sąrašą?

                    Sunumeruotas sąrašas naudojant foną

                    Pažvelkite į šį mielą sunumeruoto sąrašo dizainą.

                    patinka? Pakartokime.

                    Raskite ol žymos stilius. Pridėkite prie jo naujų savybių.

                    Ol ( užpildymas: 0 tšk. 0 0 20 tšk.; paraštė: 0,5 em 0 1,571 em 1,9 em; spalva: #2E2E2E; sąrašo stiliaus tipas: nėra; šriftas: 15 piks. / 17 piks. Verdana, Arial, Helvetica, sans-serif; z-index : 2; priešpriešinis nustatymas: taškas 1 eilutės aukštis: 0 pikselių: #BDC3C7;

                    Kad suprastumėte, kur ir ką reikia pakeisti, kad atitiktų jūsų dizainą, išskaidykime šį kodą po gabalėlį.

                    sąrašo stiliaus tipas: nėra; — išjungia standartinių skaičių išvestį
                    priešpriešinis atstatymas: taškas; — nustato numeracijos skaitiklio kintamąjį
                    padėtis: santykinė; — numeraciją pateikia prie pačių prekių

                    prieš yra pseudo elementas, skirtas ol li žymai. Turi šiuos stilius:
                    turinys: kontra(taškas); — rodo kintamojo reikšmę
                    priešpriešinis prieaugis: 1 taškas; - padidina skaitiklį 1
                    padėtis: absoliuti;
                    fonas: #BDC3C7; — skaičių fonas (foną galima nustatyti su spalva arba gražia piktograma
                    marža – išorinės paraštės
                    padding – vidinis paminkštinimas
                    color – elemento teksto spalva
                    fonas – fonas
                    text-align – teksto lygiavimas
                    font-weight – šrifto storis (sotumas)

                    Savo stiliuose galite nustatyti bet kokias spalvas, lygiavimą, šrifto dydžius ir įtraukas.

                    Sunumeruotas sąrašas su unikaliu kiekvienos prekės paveikslėliu

                    Vienoje moterų svetainėje yra labai patrauklūs sunumeruoti sąrašai.

                    Kaip tai įgyvendinama? Pažiūrėkime į šį kodą:

                    /*pirmasis skaičius*/ ol li:first-child ( sąrašo stiliaus vaizdas: url (kelias į vaizdą su numeriu 1); ) /*antrasis skaičius*/ ol li:nth-child(2n) ( sąrašo stiliaus- vaizdas: url(kelias į vaizdą su numeriu 2 ) /*trečias skaičius*/ ol li:nth-child(3n) ( list-style-image: url(kelias į vaizdą su numeriu 3); ) /*); ketvirtas skaičius */ ol li:nth-child(4n) ( list-style-image: url(kelias į vaizdą su skaičiumi 4); ) /*Toliau rašome lygiai tą patį tik sekančių elementų numeriams*/

                    Tokio sunumeruoto sąrašo kode turite nurodyti visus prekių numerius ir kiekvienam iš jų priskirti unikalią piktogramą.

                    Jei straipsniuose sąrašuose naudojate iki 20 sunumeruotų elementų, tuomet pseudoklasės nth-child(An) reikia rašyti 20 kartų. Kad paskutinis stiliuose būtų n-asis vaikas(20n) pseudoklasė.

                    Stilių faile raskite eilutes, apibūdinančias sunumeruoto sąrašo dizainą (ol li tags).

                    Pridėkite prie jo pirmojo vaiko pseudoklasę. Nukopijuokite ir įklijuokite jį vieną kartą, tada pakeiskite šią ypatybę į nth-child(An) ir nukopijuokite tiek skaičių, kiek norite turėti savo piktogramą. Įveskite prekių numerius.

                    Prie kiekvieno skaičiaus pridėkite sąrašo stiliaus vaizdo ypatybę su savo unikalia piktograma.

                    Jei piktogramos svetainėje yra toli nuo elementų arba su jais persidengia, tuomet reikia redaguoti skaitmeninių piktogramų arba elementų teksto lygiavimą ir įtrauką.
                    

                    Kaip sukurti sąrašą su ženkleliais (be numerių)?

                    Sąrašas su ženkleliais ul li su besikeičiančiomis piktogramomis

                    Man labai patiko šis sąrašas su ženkleliais.

                    Ul ( užpildymas: 11 piks. 0 5 piks. 0; ) ul li ( užpildymas kairėje: 32 piks.; paraštės apačioje: 10 piks.; šriftas: normalus 15 piks. Verdana, sans-serif; spalva: #2E2E2E; linijos aukštis: 1,6; kraštinė apačioje: 1 piks. brūkšninis #ccc; užpildymas apačioje: 10 pikselių. ("images/sprite.jpg") 0px 2px nerepeat-style-type: circle; ul li:nth-child(2n):before ( turinys: ""; padėtis: absoliutus : 43px; margin-left: -35px: url("images/sprite.jpg") 0px -17px be kartojimo;

                    Vietoj standartinio sąrašo stiliaus galite priskirti ypatybę „kelias į piktogramą“ - list-style-image:url. Bet tada reikia nurodyti išorinę kairiąją paraštę nuo svetainės kraštų – be jos piktogramos nebus rodomos ir išeis už turinio srities.

                    Eksperimentui galite priskirti įtraukas:

                    Ul li (sąrašo stiliaus vaizdas: url (images/radio.png); paraštė kairėje: 30 pikselių; )

                    Piktogramų kaitaliojimą galima nustatyti su nth-child(An) savybe. Aukščiau pateiktame pavyzdyje naudojamas pseudoelementas prieš.

                    Kode yra vienas pseudoklasės n-asis vaikas(2n). Jo reikšmė yra 2. Pasirodo, kiekvienas lyginis taškas atitinka kitą piktogramą. Jei vietoj 2n rašote 2n+1, tada ant nelyginių taškų atsiras kita piktograma.

                    Kiekvienam sąrašo elementui galite nurodyti pabraukimą. Aukščiau pateiktame pavyzdyje taškai pabraukti punktyrinėmis linijomis.

                    Taip pat kiekvienam elementui galite priskirti rėmelius, fonus ir piktogramas. Tik nepersistenk. Mūsų tikslas yra ne visus sužavėti puošniu dizainu, o pagerinti turinio suvokimo kokybę.
                    

                    Kaip puslapyje pateikti kelis sąrašus su skirtingais dizainais?

                    Kartais reikia sudaryti kelis skirtingų stilių sąrašus.

                    Jei priskirsite bendrus stilius, visiems sąrašams bus priskirtas tas pats dizainas. Įvairūs sąrašai gali būti rodomas, jei ol arba ul žymai priskiriate atskirą ID ir įvesite jį straipsnio redagavimo html režimu. Na, šio ID stiliaus faile reikia parašyti atskirus stilius.

                    Pavyzdžiui, čia yra viena graži turinio dizaino parinktis:

                    HTML formatu sąrašą parašytumėte taip:

                    Turinys
                    1. 1 punktas
                    2. 2 punktas
                    3. 3 punktas

                    CSS rašytumėte tokius stilius:

                    Ol#sod (padding: 0px 20px 10px 51px; paraštė: 0,5em 0 0em 1em; spalva: #2E2E2E; sąrašo stiliaus tipas: nėra; fonas: #f1f4f5; kraštinė kairėje: #BDC3C7 4px vientisas; ekranas: įdėtas- blokas ) ol#sod li() ol#sod li:before( font-weight:normal !important )

                    Naujasis stilius nuo pagrindinio skiriasi ol žymos dizainu: fonas, rodymo stilius, eilutė turinio kairėje.

                    Tekste naudodami kelis skirtingo dizaino sąrašus, informacijos pateikimą padarysite dar įdomesnį. Pateikdami bet kokius elementus galite nustatyti kai kurias piktogramas, o išvardydami veiksmus galite nustatyti kitas. Čia dizainą riboja tik jūsų vaizduotė.

                    Šie metodai taip pat taikomi kuriant meniu elementus, antraštes ir kitus svetainės elementus.
                    

                    Kaip sukurti pagrindines nuorodas turinio sąraše?

                    Kaip juos įrašyti į HTML kodą? Viena kodo dalis įrėmina nuorodos inkarą, o kita kodo dalis dedama šalia tos vietos, kur mus reikia nukreipti spustelėjus nuorodą.

                    Turinys
                    1. 1 antraštė
                    2. 2 antraštė
                    3. 3 antraštė

                    Ir straipsnio tekste turite parašyti tai:

                    Antraštė 1… Antraštė 2… Antraštė 3…

                    Galbūt labiau patyrę žiniatinklio valdytojai gali ką nors mane pataisyti. Tiesiog patariu tai, ką pats išbandžiau praktiškai.

                    Jei vis dar turite klausimų, mielai juos pamatysiu komentaruose.

                    Ageeva Veronika.

                    Jus taip pat gali sudominti:

                    HTML žymės

                    Reikšmė ir taikymas

                    Sunumeruotas (užsakytas) sąrašas skirtas prekėms, kurios rodomos tam tikra tvarka. Sunumeruotas sąrašas prasideda žyma

                    (anglų kalbos santrumpa užsakytas sąrašas- užsakytas sąrašas). Kiekvienas sąrašo elementas prasideda žyma
                    1. (sąrašo elementas).

                       Naršyklės palaikymas

                       Atributas			Opera		IExplorer	Kraštas
                       pradžia, tipas	Taip	Taip	Taip	Taip	Taip	Taip
                       atvirkščiai	Taip	Taip	Taip	Taip	Nr	Nr

                       Atributai

                       Atributas	Reikšmė	Aprašymas
                       kompaktiškas	kompaktiškas	HTML5 nepalaikoma. Nurodoma, kad sąrašas turi būti mažesnis nei įprastas dydis (linijos aukštis: 80 %). Vietoj šio atributo naudokite CSS.
                       	atvirkščiai	Nurodoma, kad tvarka sunumeruotame (surūšiuotame) sąraše turėtų būti mažėjančia tvarka. Atributas nepalaikomas Interneto naršyklės Explorer ir Edge.
                       pradėti	numerį	Apibrėžia sunumeruoto (sutvarkyto) sąrašo pradinę reikšmę. Reikšmės turi būti sveikieji skaičiai, leidžiamos neigiamos reikšmės. Kai naudojamas su raidėmis (tipas = "A" ir tipas = "a"), atributo reikšmėje nurodytas skaičius yra raidės eilės numeris abėcėlėje. Pavyzdžiui, start = "4" atitiks raidę "D" ir sąrašas prasidės nuo jos. Kai naudojama reikšmė start = "27", skaitiklis atstatomas į nulį, o sąrašas tampa dviženklis ("27" = "AA", "28" = "AB", "29" = "AC". .).
                       tipo	1 (numatytasis) A (didelis) a (mažosios raidės) Aš (romėnų didelis) aš (romėnas mažas)	Apibrėžia ženklelio tipą, kuris naudojamas kuriant sunumeruotą (tvarkingą) sąrašą.

                       Naudojimo pavyzdys

                       1. Pirmas punktasAntras punktas
                       2. Trečias punktas

                       Puslapyje jis atrodys taip:

                       1. Pirmas punktas.
                       2. Antras punktas.
                       3. Trečias punktas.

                       Jei norite, kad sąrašas prasidėtų nuo konkretaus skaičiaus (ne nuo 1), tuomet turite nurodyti žymos pradžios atributą

                       .

                       Pavyzdžiui:

                       Kitas įdomus atributas yra tipas , kuris leis nurodyti abėcėlinę numeraciją („A“ – didžiosios raidės, „a“ – mažosios raidės) arba romėniškų skaitmenų numeraciją („I“ – didžiosios raidės, „i“ – mažosios raidės).

                       Pažvelkime į pavyzdį, kuriame pateikiamos visos galimos tipo atributo reikšmės (išskyrus numatytąją reikšmę):

                       >
                       1. Pirmas punktasAntras punktas
                       2. Trečias punktas
                       >
                       1. Pirmas punktasAntras punktas
                       2. Trečias punktas
                       >
                       1. Pirmas punktasAntras punktas
                       2. Trečias punktas
                       >
                       1. Pirmas punktasAntras punktas
                       2. Trečias punktas

                       Atkreipkite dėmesį, kad leidžiama kurti sunumeruotus (sutvarkytus) sąrašus, įdėtus į kitus sunumeruotus sąrašus (sąrašo elemento viduje

                       3. ):
                          1. Pirmas punktas
                             1. Pirmas punktasAntras punktas
                             2. Trečias punktas
                             Antras punktas
                             3. Trečias punktas

                             Puslapyje tai atrodys taip.