Kokia žyma apibrėžia sunumeruotą sąrašą. Sąrašas su ženkleliais. Sąrašai su ženkleliais HTML

Sąrašas su ženkleliais apibrėžiamas prieš kiekvieną sąrašo elementą pridedant mažą ženklelį, paprastai užpildyto apskritimo pavidalu. Pats sąrašas sudaromas naudojant konteinerį

, ir kiekvienas sąrašo elementas prasideda žyma
• kaip parodyta žemiau.
  • Pirmas punktas
  • Antras punktas
  • Trečias punktas

  Sąraše turi būti baigiamoji žyma

, kitaip įvyks klaida. Uždarymo žyma Nors ir nebūtina, visada rekomenduojame jį įtraukti į aiškiai atskirtus sąrašo elementus.

11.1 pavyzdyje parodytas HTML kodas, skirtas įtraukti į tinklalapį suženklintą sąrašą.

11.1 pavyzdys. Sukurkite sąrašą su ženkleliais

---

• Čeburaška
• Krokodilas Gena
• Shapoklyak
• Žiurkė Larisa

---

Šio pavyzdžio rezultatas parodytas fig. 11.1.

Ryžiai. 11.1. Ženklų sąrašo vaizdas

Atkreipkite dėmesį į kamšalus sąrašo viršuje, apačioje ir kairėje. Tokios įtraukos pridedamos automatiškai.

Žymekliai gali būti vienos iš trijų formų: apskritimo (numatytasis), apskritimo ir kvadrato. Norėdami pasirinkti žymeklio stilių, naudokite žymos tipo atributą

. Priimtinos vertės pateiktos lentelėje. 11.1
Lentelė 11.1. Išvardykite ženklelių stilius

Sąrašo tipas	HTML kodas	Pavyzdys
Sąrašas su apskritimo ženkleliais		Pirmas Antra Trečias
Sąrašas su apskritimo ženkleliais		Pirmas Antra Trečias
Sąrašas su kvadratinėmis kulkomis		Pirmas Antra Trečias

Žymeklių išvaizda gali šiek tiek skirtis įvairiose naršyklėse, taip pat keičiant šriftą ir teksto dydį.

Sąrašo su kvadratiniais ženkleliais sukūrimas parodytas 11.2 pavyzdyje.

11.2 pavyzdys. Žymeklių tipas

Įsitikinimų keitimas

• religinio tikėjimo pasikeitimas (neprivaloma: budizmas, konfucianizmas, induizmas). Specialus pasiūlymas – judaizmas ir islamas kartu;
• pasikeitęs tikėjimas mėgstamos vakarėlio neklystamumu;
• tikėjimas, kad ateiviai egzistuoja;
• pirmenybė politinei sistemai, kaip geriausiai tokio pobūdžio (galima rinktis iš: feodalizmo, socializmo, komunizmo, kapitalizmo).

Šio pavyzdžio rezultatas parodytas fig. 11.2.

Sąrašai yra kasdienio gyvenimo dalis. Užduočių sąrašas apibrėžia, kas daroma. Navigacijos maršrutuose pateikiamas nuoseklus nuorodų sąrašas. Receptams reikalingas ingredientų sąrašas ir instrukcijų sąrašas. Sąrašai randami beveik visur, todėl nesunku suprasti, kodėl jie populiarūs ir internete.

Kai norime naudoti sąrašą svetainėje, HTML siūlo tris skirtingus tipus: su ženkleliais, sunumeruotais ir aprašo sąrašu. Kokį sąrašo tipą ir ar apskritai naudoti, priklauso nuo turinio ir semantiškai tinkamiausio jo rodymo varianto.

Be trijų skirtingų HTML sąrašų tipų, yra keletas būdų, kaip sukurti šių sąrašų stilių naudojant CSS. Pavyzdžiui, galime pasirinkti, kokio tipo ženklą nurodyti sąraše. Žymeklis gali būti kvadratas, apskritimas, skaičius, raidė arba, galbūt, nė vieno. Be to, galime nuspręsti, kaip sąrašas turi būti rodomas – vertikaliai ar horizontaliai. Visos šios parinktys vaidina svarbų vaidmenį formuojant mūsų tinklalapius.

Sąrašai su ženkleliais

Sąrašas su ženkleliais arba netvarkingas yra tiesiog susijusių elementų, kurių eilės tvarka nesvarbu, sąrašas. Sąrašas su ženkleliais HTML sukuriamas naudojant blokų sąrašo elementą

. Kiekvienas atskiras elementas sąraše yra pažymėtas elementu
• .

  Pagal numatytuosius nustatymus dauguma naršyklių prie elemento prideda vertikalią paraštę ir kairįjį užpildymą

  , ir prieš kiekvieną elementą
  • uždeda vienos spalvos tašką. Šis taškas vadinamas sąrašo žymekliu ir gali būti pakeistas naudojant CSS.
    • Oranžinė
    • Žalias
    • Mėlyna

    Rodyti sąrašą su ženkleliais

    Sunumeruoti sąrašai

    Sunumeruotas arba užsakytas prekių sąrašas

    Labai panašus į sąrašą su ženkleliais, atskiri ženkleliai sukuriami tokiu pačiu būdu. Pagrindinis sąrašų skirtumas yra tas, kad tvarkant sąrašą svarbi yra elementų pateikimo tvarka.

    Kadangi tvarka svarbi, numeruotame sąraše naudojami skaičiai, o ne taškas kaip numatytasis ženklelis.

    1. Pasivaikščiokite Abrikosų gatve
    2. Pasukite į Vinogradnaya

    Sunumeruoto sąrašo demonstravimas

    Sunumeruoti sąrašai taip pat turi unikalius atributus, įskaitant pradžią ir atvirkštinį.

    pradžios atributas

    Atributas start nurodo skaičių, nuo kurio turi prasidėti sunumeruotas sąrašas. Pagal numatytuosius nustatymus sąrašai prasideda nuo 1, tačiau gali būti situacijų, kai sąrašas turėtų prasidėti nuo 30 ar kitu skaičiumi. Kai elementui naudojame pradžios atributą

    , tada galime tiksliai nustatyti, nuo kurio skaičiaus turi prasidėti sunumeruoto sąrašo skaičiavimas.

    Pradinis atributas priima tik sveikųjų skaičių reikšmes, nors sunumeruotuose sąrašuose gali būti naudojamos skirtingos numeravimo sistemos, pvz., romėniški skaitmenys.

    30. Pasivaikščiokite Abrikosų gatve
    31. Pasukite į Vinogradnaya
    32. Sustokite Shady gatvėje

    Starto atributo demonstravimas

    atvirkštinis atributas

    Atvirkštinis atributas, kai pridedamas prie elemento

    leidžia sąrašą rodyti atvirkštine tvarka. Penkių elementų, sunumeruotų nuo 1 iki 5, sąrašą galima apversti ir sunumeruoti nuo 5 iki 1.

    Atvirkštinis atributas yra Būlio atributas, todėl jis neįgyja jokios reikšmės. Tai gali būti tiesa arba klaidinga. False yra numatytoji reikšmė, reikšmė tampa tiesa, kai elemente pasirodo atvirkštinis atributas

    .
    1. Pasivaikščiokite Abrikosų gatve
    2. Pasukite į Vinogradnaya
    3. Sustokite Shady gatvėje

    Atvirkštinio požymio demonstravimas

    vertės atributas

    Vertės atributas gali būti taikomas atskiriems elementams

    1. sunumeruotame sąraše, kad pakeistumėte jo reikšmę sąraše. Bet kurio sąrašo elemento, rodomo po sąrašo elementu su vertės atributu, skaičius bus atitinkamai perskaičiuotas.

       Pavyzdžiui, jei antrojo sąrašo elemento vertės atributas nustatytas į 9, to sąrašo elemento numeris bus išvedamas taip, tarsi jis būtų devintas. Visi tolesni sąrašo elementai bus sunumeruoti nuo 9.

       1. Pasivaikščiokite Abrikosų gatve
       9. Pasukite į Vinogradnaya
       10. Sustokite Shady gatvėje

       Vertės atributų demonstravimas

       Aprašų sąrašai

       Kitas sąrašo tipas, kurį matysite internete (bet ne taip dažnai, kaip sąrašus su ženkleliais ar sunumeruotus sąrašus), yra aprašų sąrašas. Tokie sąrašai naudojami keletui terminų ir jų aprašymų identifikavimui, kaip, pavyzdžiui, žodynėlyje.

       HTML aprašo sąrašas sukuriamas naudojant bloko elementą

       . Užuot naudoję elementą

       Norint pažymėti sąrašo elementus, aprašų sąrašui reikalingi du bloko elementai:

       terminui ir

       aprašymui.

       Aprašų sąraše vienas po kito gali būti daug terminų ir aprašymų. Be to, tokiame sąraše viename apraše gali būti keli terminai, taip pat keli vieno termino aprašymai. Vienas terminas gali turėti kelias reikšmes ir būti aprašomas keliais. Ir atvirkščiai, vienas aprašymas gali atitikti kelis terminus.

       Pridedant aprašo sąrašo elementą

       turi eiti į stichiją

       . Terminas ir iš karto po jo esantis aprašymas yra susiję vienas su kitu. Todėl svarbi šių elementų tvarka.

       Pagal numatytuosius nustatymus elementas

       apima vertikalius paminkštinimus, panašius į elementus

       Ir
       . Be to, elementas
       pagal numatytuosius nustatymus apima kairiąją paraštę.
       studijos
       Skirti laiko ir dėmesio dėstomo dalyko žinių įgijimui, ypač per knygas.
       projektą
       Pateiktas planas ar brėžinys, kuriame parodyta, kaip pastatas, drabužis ar kitas daiktas atrodys ir veiks prieš jį pastatant ar pagaminant.
       Esami tikslai, planai ar ketinimai prieš juos įkūnijant ar įgyvendinant apčiuopiamą objektą.
       verslui
       Darbas
       Asmens nuolatinis užsiėmimas, profesija ar amatas.
       Aprašo sąrašo demonstravimas
       Įdėtieji sąrašai
       Funkcija, dėl kurios sąrašai yra labai galingi, yra įdėjimo funkcija. Kiekvienas sąrašas gali būti įdėtas į kitą sąrašą ir gali būti įdėtas kelis kartus. Tačiau galimybė be galo sudėti sąrašus nesuteikia jums laisvės tai daryti. Sąrašai turėtų būti rezervuoti konkrečiai ten, kur jie išlaiko semantiškiausią prasmę.
       Sąrašų įdėjimo gudrybė yra žinoti, kur prasideda ir baigiasi kiekvienas sąrašas ir sąrašo elementas. Kalbant konkrečiai apie sąrašus su ženkleliais ir numeriais – vienintelį elementą, kuris gali būti tiesiogiai viduje
       Ir
       yra elementas
       1. . Pakartokime – vienintelis elementas, kurį galime laikyti tiesioginiu elementų palikuoniu
          Ir
          , yra
          1. .

             Tačiau elemento viduje

          2. galima pridėti standartinį elementų rinkinį, įskaitant bet kokius elementus
             arba
             .

             Norėdami įdėti sąrašą, prieš uždarydami sąrašo elementą sukurkite naują sąrašą. Kai įdėtasis sąrašas bus baigtas ir uždarytas, uždarykite įtraukimo sąrašo elementą ir tęskite pradinį sąrašą.

             1. Pavedžioti šunį
             2. Sulenkite skalbinius
             3. Eikite į parduotuvę ir nusipirkite:
                • Pienas
                • duona
                • Sūris
             4. Pjauti veją
             5. gaminti vakarienę

             Įdėtų sąrašų demonstravimas

             Kadangi įdėtieji sąrašai gali būti šiek tiek painūs ir, jei jie daromi neteisingai, gali būti rodomi nepageidaujami stiliai, trumpai pažvelkime į juos. Elementai

             Ir
             gali būti tik elementų
             1. . Elementas
             2. gali būti bet koks įprastas elementas. Tačiau elementas
             3. turi būti bet kurio elemento tiesioginis palikuonis
                , arba
                .

                Taip pat verta paminėti, kad kai sąrašai įdedami į kitus sąrašus, jų žymekliai keisis priklausomai nuo įdėjimo gylio. Ankstesniame pavyzdyje sąraše su ženkleliais, įdėtame į sunumeruotą sąrašą, kaip žymekliai naudojamas apskritimas, o ne taškas. Šis pakeitimas įvyksta, nes sąrašas su ženkleliais yra įdėtas vienu lygiu numeruoto sąrašo viduje.

                Laimei, galime kontroliuoti, kaip ženkleliai atrodo bet kuriame lygyje, kurį apžvelgsime toliau.

                Stiliaus sąrašo elementai

                Sąrašai su ženkleliais ir sunumeruoti pagal numatytuosius nustatymus naudoja sąrašo elementų ženklelius. Sąrašuose su ženkleliais tai paprastai būna vientisos spalvos taškai, o sunumeruotuose sąrašuose – skaičiai. Naudojant CSS, galima tinkinti šių žymeklių stilių ir padėtį.

                sąrašo tipo nuosavybė

                Sąrašo stiliaus tipo ypatybė naudojama sąrašo elemento žymeklio turiniui nustatyti. Galimos reikšmės svyruoja nuo kvadratų ir dešimtainių skaičių iki armėniško numeravimo ir CSS stiliaus, kurį galima pridėti prie elementų

                ,
                arba
                1. .

                   Bet kokia sąrašo stiliaus tipo nuosavybės reikšmė gali būti įtraukta į sąrašą su ženkleliais arba numeriais. Turėdami tai omenyje, sąraše su ženkleliais galite naudoti numeraciją, o sunumeruotame sąraše – neskaitinius ženklelius.

                   • Oranžinė
                   • Žalias
                   • Mėlyna

                   Ul (sąrašo stiliaus tipas: kvadratas; )

                   Sąrašo stiliaus tipo nuosavybės demonstravimas

                   sąrašo stiliaus vertės

                   Kaip minėta anksčiau, sąrašo stiliaus ypatybėje yra keletas skirtingų reikšmių. Toliau pateiktoje lentelėje parodytos šios vertės ir atitinkamas jų turinys.

                   Vaizdo naudojimas kaip sąrašo žymeklis

                   Gali ateiti laikas, kai numatytųjų sąrašo stiliaus tipo nuosavybės verčių nepakaks ir mes norime apibrėžti savo sąrašo žymeklį. Dažniausiai tai daroma įdedant kiekvieno elemento fono paveikslėlį.

                2. .

                   Procesas apima bet kokios numatytosios sąrašo stiliaus tipo nuosavybės vertės pašalinimą ir fono paveikslėlio bei paraščių pridėjimą prie elemento

                3. .

                   Daugiau informacijos – nustačius sąrašo stiliaus tipo ypatybę į None, bus pašalinti esami sąrašo žymekliai. Fono ypatybė nustatys fono vaizdą kartu su jo padėtimi ir, jei reikia, pakartos. O užpildymo ypatybė suteiks vietos fono paveikslėliui teksto kairėje.

                   • Oranžinė
                   • Žalias
                   • Mėlyna

                   Li ( fonas: url("arrow.png") 0 50 % nesikartojimas; sąrašo stiliaus tipas: nėra; užpildymas kairėje: 12 pikselių; )

                   Vaizdo rodymas kaip žymeklis

                   sąrašo stiliaus pozicijos nuosavybė

                   Pagal numatytuosius nustatymus sąrašo ženkleliai yra elemento turinio kairėje

                4. . Šis padėties nustatymo stilius apibūdinamas kaip išorėje , o tai reiškia, kad visas turinys bus rodomas tiesiai dešinėje, už sąrašo žymeklio ribų. Naudodami list-style-position ypatybę galime pakeisti numatytąją išorės reikšmę į viduje arba paveldėti .

                   išorinis sąrašo žymeklį deda į kairę nuo elemento

                5. ir neleiskite jokiam turiniui tekėti žemiau šio žymeklio. Vidinė reikšmė (kuri retai naudojama ir gali būti matoma) pateikia sąrašo žymeklį pirmoje elemento eilutėje
                6. ir leidžia turiniui apvynioti žymeklį, jei reikia.
                   • Keksiukai...
                   • Purškimas...

                   Ul (sąrašo stiliaus padėtis: viduje; )

                   Sąrašo stiliaus pozicijos nuosavybės demonstravimas

                   Bendrojo nuosavybės sąrašo stilius

                   Sąrašo ypatybės, kurias neseniai aptarėme, sąrašo stiliaus tipas ir sąrašo stiliaus pozicija , gali būti sujungtos į vieną bendrą ypatybę, sąrašo stilių . Šioje savybėje vienu metu galime naudoti vieną arba visas sąrašo savybių vertes. Šių reikšmių tvarka turėtų būti tokia: list-style-type, po kurio seka sąrašo stiliaus-pozicija .

                   Ul (sąrašo stilius: apskritimas viduje; ) ol (sąrašo stilius: žemesnis romėniškas; )

                   Horizontalus sąrašo rodymas

                   Kartais norime sąrašus rodyti horizontaliai, o ne vertikaliai. Galbūt norime padalyti sąrašą į kelis stulpelius, kad sudarytume naršymo sąrašą arba į vieną eilutę patalpintume kelis sąrašo elementus. Priklausomai nuo turinio ir pageidaujamos išvaizdos, yra keletas būdų, kaip sąrašus rodyti kaip vieną eilutę, pavyzdžiui, paimant elementų rodymo ypatybes

                7. pvz., įterptoji arba eilutinio blokavimo funkcija arba naudojant plūduriuojančią ypatybę.

                   Sąrašo rodymas

                   Greičiausias būdas rodyti sąrašą vienoje eilutėje – pateikti elementus

                8. rodyti ypatybę su reikšme inline arba inline-block . Taip bus sudėti visi elementai
                9. vienoje eilutėje vienodais tarpais tarp kiekvieno sąrašo elemento.

                   Jei tarpai tarp elementų

                10. sukelia problemų, juos galima pašalinti naudojant tuos pačius metodus, kuriuos aptarėme 5 pamokoje „Turinio padėties nustatymas“.

                    Daug dažniau vietoj inline reikšmės naudosime inline-block reikšmę. Inline-block vertė leidžia lengvai pridėti vertikalų užpildą ir kitą erdvę prie elementų

                11. , o eilutės reikšmė ne.

                    Kai rodymo ypatybės reikšmė pakeičiama į eilutę arba eilutinį bloką , sąrašo žymeklis, nesvarbu, ar tai taškas, skaičius ar kita, pašalinamas.

                    • Oranžinė
                    • Žalias
                    • Mėlyna

                    Li ( ekranas: eilutinis blokas; paraštė: 0 10 piks.; )

                    Sąrašo su eilutiniu bloku demonstravimas

                    Sąrašai su plūdine

                    Rodymo ypatybę pakeisti į eilutę arba eilutinį blokavimą yra greita, tačiau pašalinami sąrašo žymekliai. Jei jų reikia, pridėkite plūdę prie kiekvieno elemento

                12. yra geresnis pasirinkimas nei pakeisti rodymo ypatybę.

                    Visų elementų montavimas

                13. plūduriavimo savybės, pvz., kairėje, sulygiuos visus elementus horizontaliai
                14. tiesiai vienas šalia kito be jokių tarpų tarp jų. Kai naudojame plūdę
                15. , sąrašo žymeklis rodomas pagal numatytuosius nustatymus ir bus elemento viršuje
                16. šalia jo. Kad sąrašo žymeklis nebūtų rodomas ant kitų elementų
                17. , turi būti pridėta horizontali paraštė arba paminkštinimas.
                    • Oranžinė
                    • Žalias
                    • Mėlyna

                    Li (plaukimas: kairėje; paraštė: 0 20 tšk.; )

                    Sąrašo demonstravimas su plūduriu

                    Kaip ir su bet kuriais slankiojančiais elementais, tai nutraukia puslapio eigą. Turime nepamiršti išvalyti plūdės ir grąžinti puslapį į normalų srautą – dažniausiai naudojamas clearfix metodas.

                    Naršymo sąrašo pavyzdys

                    Dažnai kuriame ir randame naršymo meniu, kuriuose naudojami netvarkingi sąrašai. Šie sąrašai paprastai išdėstomi horizontaliai, naudojant vieną iš dviejų anksčiau paminėtų metodų. Pavyzdžiui, čia yra horizontalus naršymo meniu, sudarytas naudojant netvarkingą sąrašą, kuriame yra elementai

                18. rodomi kaip eilutinis blokas .

                    Navigacija ul ( šriftas: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif; paraštė: 0; užpildymas: 0; teksto transformacija: didžiosios raidės; ) .navigation li ( ekranas: inline-block; ) .navigation a ( background: #395870 background: linear-gradient (#49708f, #293f50): 1px solid rgba(0, 0, 0, .3) .navigation a:hover; fonas: #314b60 box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3 ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li: paskutinis vaikas a ( kraštinė dešinėje: 0; kraštinės spindulys: 0 4 tšk. 4 tšk. 0; )

                    Naršymo sąrašo demonstravimas

                    Apie praktiką

                    Dabar, kai žinome, kaip kurti sąrašus HTML ir CSS, pažvelkime į mūsų Styles Conference svetainę ir pažiūrėkime, kur galėtume naudoti sąrašus.

                    Dabar naršymo meniu elementuose

                    Ir