Kaip naudoti ul html. Kaip sudėti sąrašo elementus horizontaliai? Kur sąrašo stiliai rašomi „Twenty Eleven“ šablone

Pradžia / Naršyklės

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

      .

      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.

                    Jei nuspręsite pakeisti standartinius ul ir li sąrašus, ši tema jums bus įdomi. Nes čia jūs išmoksite keletą originalūs sprendimai. Tai tikrai padės pakeisti standartinę išvaizdą į unikalią, kur naudojamas CSS stilius, kuriant sąrašus. Privalumas yra tas, kad naudosime tik vieną klasę, o tai radikaliai pakeis išvaizdą. Be šių parametrų, galite nurodyti, kokiu numeriu sąrašas turėtų prasidėti, čia galite viską padaryti patys. Numatytoji numeruotų sąrašų pradinė reikšmė yra pirmoji arba raidė A.

                    Nesusipratę su pagrindiniais dalykais, dabar atidžiau pažvelgsime į elementus, naudojamus įvairioms dizaino dalims suteikti struktūrą ir prasmę. Jei kas nežino, ul ir li yra daug geresnis pasirinkimas nei paprastas tekstas, nes kai tekstas suvyniotas, ypač mobilusis telefonas, puikiai įsitraukia ir neapvynioja žymeklio.

                    Sąrašai laikomi puikiu būdu pateikti informaciją puslapiuose, nes juos lengva skaityti ir jie gerai atrodo. Daugelis žmonių mano, kad taškai yra maži vaizdai, tačiau iš tikrųjų jie visi sukurti naudojant gana paprastą HTML kodą. Galite įterpti skirtingų tipų sąrašus, jei norite, tiesiog nepamirškite juos teisingai uždaryti. Visose šiose sąrašo komandose galite žaisti su norimu tekstu.

                    Taip pat turite žinoti, kad iš pradžių sąrašuose yra keli elementai:

                    1 . Netvarkinga informacija.
                    2 . Sutvarkyta informacija.
                    3 . Apibrėžimai.

                    Pradėkime diegimą:

                    1. Parinktis:


                    • Sąrašo elementas

                    • Unikalus sąrašas

                    • Originalūs sąrašai

                    • ZORNET.RU – žiniatinklio valdytojas

                    • Kitas sąrašas


                    CSS

                    Ksangelopanas (
                    paraštė: 19 pikselių 0 0;
                    pamušalas:0;
                    sąrašo stilius: nėra;
                    priešpriešinis nustatymas iš naujo: li;
                    }
                    .ksangelopan li (
                    kraštinė: 2px solid #3575ad;
                    fonas: #d7dee4;
                    padėtis: santykinė;
                    paraštė-apačia: 17 pikselių;
                    pamušalas: 15 piks. 9 piks.;
                    }
                    .ksangelopan li:hover (
                    z indeksas: 1;
                    }
                    .ksangelopan li:before (
                    kraštinė: 2px solid #2270b3;
                    padėtis: absoliuti;
                    viršuje: -14px;
                    pamušalas: 3px 9px;
                    šrifto dydis: 11 pikselių;
                    šrifto svoris: paryškintas;
                    spalva: #246eaf;
                    fonas: #f2f4f7;
                    priešpriešinis prieaugis: li;
                    turinys: counter(li);
                    -Webkit-transition-truation: 0,4s;
                    perėjimo trukmė: 0,4s;
                    }
                    .ksangelopan li:hover:prieš (
                    fonas: #2672b3;
                    spalva: #f7f9fb;
                    -Webkit-transform: translate(-11px, 0);
                    -ms-transformuoti: išversti(-11px, 0);
                    -o-transformuoti: išversti(-11px, 0);
                    transformuoti: išversti(-11px, 0);
                    }
                    .ksangelopan li:after (
                    turinys: "";
                    padėtis: absoliuti;
                    perėjimo trukmė: 0,3 s;
                    -Webkit-transition-property: plotis;
                    pereinamoji savybė: plotis;
                    z indeksas: -1;
                    fonas: #FFF;
                    aukštis: 100%;
                    kairėje: 0;
                    viršuje: 0;
                    plotis: 0;
                    }
                    .ksangelopan li:hover:after (
                    plotis: 100%;
                    }


                    Tai viskas dėl įrengimo.

                    2 Antras variantas:


                    • Sąrašo elementas

                    • Unikalus sąrašas

                    • Originalūs sąrašai

                    • ZORNET.RU – žiniatinklio valdytojas

                    • Kitas sąrašas


                    CSS

                    Beleduzlopamges (
                    paraštė-apačia: 8 pikseliai;
                    pamušalas:0;
                    sąrašo stilius: nėra;
                    priešpriešinis nustatymas iš naujo: li;
                    }
                    .beleduzlopamges li (
                    padėtis: santykinė;
                    kraštinė: 2px solid #195588;
                    fonas: #eff3f7;
                    užpildymas: 15 piks. 19 piks. 15 piks. 27 piks.;
                    paraštė: 12 piks. 0 12 piks. 40 piks.;
                    -Webkit-transition-duration: 0,3s;
                    perėjimo trukmė: 0,3 s;
                    }
                    .beleduzlopamges li:hover (
                    fonas: #FFF;
                    }
                    .beleduzlopamges li:before (
                    linijos aukštis: 32 pikseliai;
                    padėtis: absoliuti;
                    viršuje: 4px;
                    kairėje: -39px;
                    plotis: 39 pikseliai;
                    teksto lygiavimas: centre;
                    šrifto dydis: 16 pikselių;
                    šrifto svoris: paryškintas;
                    spalva: #f9f5f5;
                    fonas: #275b88;
                    priešpriešinis prieaugis: li;
                    turinys: counter(li);
                    perėjimo trukmė: 0,2s;
                    }
                    .beleduzlopamges li:hover:before (
                    plotis: 46px;
                    }
                    .beleduzlopamges li:after (
                    padėtis: absoliuti;
                    kairėje: 0;
                    viršuje: 4px;
                    turinys: "";
                    aukštis: 0;
                    plotis: 0;
                    kraštinė: 16px vientisas skaidrus;
                    kraštinė-kairė-spalva: #275b88;
                    -Webkit-transition-duration: 0,2s;
                    perėjimo trukmė: 0,2s;
                    }
                    .beleduzlopamges li:hover:after (
                    paraštė kairėje: 6 pikseliai;
                    }


                    Galite savarankiškai nustatyti centrinę gama, kad ji atitiktų pagrindinį svetainės stilių.

                    3 Trečias variantas:


                    • uCoz scenarijai

                    • uCoz šablonai

                    • Svetainės dizainas

                    • Svetainių stiliai

                    • Stilius su CSS


                    CSS

                    Nizualisanelag (
                    pamušalas:0;
                    sąrašo stilius: nėra;
                    priešpriešinis nustatymas iš naujo: li;
                    }
                    .nizualisanelag li (
                    padėtis: santykinė;
                    užpildymas: 9 piks. 17 tšk. 17 piks. 25 piks.;
                    paraštė kairėje: 39 pikseliai;
                    perėjimo trukmė: 0,2s;
                    žymeklis: rodyklė;
                    šrifto svoris: paryškintas;
                    spalva: #343638;
                    }
                    .nizualisanelag li:before (
                    kraštinė: 3px vientisas skaidrus;
                    linijos aukštis: 35 pikseliai;
                    padėtis: absoliuti;
                    viršuje: 0;
                    kairėje:-29px;
                    plotis: 41px;
                    text-align:center;
                    šrifto dydis: 14 pikselių;
                    šrifto svoris: paryškintas;
                    spalva: #619dce;
                    priešpriešinis prieaugis: li;
                    turinys: counter(li);
                    perėjimo trukmė: 0,3 s;

                    dėžutės dydis: bortelis-dėžė;
                    }
                    .nizualisanelag li:hover:before (
                    spalva: #337AB7;
                    }
                    .nizualisanelag li:after (
                    padėtis: absoliuti;
                    viršuje: 0;
                    kairėje: -29px;
                    plotis: 41px;
                    aukštis: 41px;
                    kraštinė: 5px solid #468bd0;
                    sienos spindulys: 50%;
                    turinys: "";
                    neskaidrumas: 0,5;
                    -Webkit-box-dydis: border-box;
                    -moz-box-dydis: border-box;
                    dėžutės dydis: bortelis-dėžė;
                    }
                    .nizualisanelag li:hover:after (
                    animacija: 500 ms lengvas įėjimas-išėjimas 0s bounceIn;
                    neskaidrumas: 1;
                    }

                    @keyframes bounceIn (
                    0% {
                    neskaidrumas: 0;
                    transformuoti: scale3d(.3, .3, .3);
                    }
                    20% {
                    transformuoti: scale3d(1.3, 1.3, 1.3);
                    }
                    40% {
                    transformuoti: scale3d(.9, .9, .9);
                    }
                    60% {
                    neskaidrumas: 1;
                    transformuoti: scale3d(1.03, 1.03, 1.03);
                    }
                    80% {
                    transformuoti: scale3d(.97, .97, .97);
                    }
                    į (
                    neskaidrumas: 1;
                    transformuoti: scale3d(1, 1, 1);
                    }
                    }


                    Yra su gražia animacija.

                    4 Ketvirtasis variantas:


                    • Pirmasis svetainės elementas

                    • Antrasis svetainės elementas

                    • Trečias svetainės elementas

                    • Ketvirtasis svetainės elementas

                    • Penktasis svetainės elementas


                    CSS

                    Kamšalas:0;
                    sąrašo stilius: nėra;
                    }
                    .kudezamuden li(
                    pamušalas: 6px;
                    }
                    .kudezamuden li:before (
                    užpildymas-dešinė: 11px;
                    šrifto svoris: paryškintas;
                    spalva: #4979a0;
                    turinys: "\2606";
                    perėjimo trukmė: 0,4s;
                    }
                    .kudezamuden li:hover:before (
                    spalva: #235e90;
                    turinys: "\2605";
                    }


                    Panašus ankstesnės versijos, pakeista tik pati piktograma.

                    Apskritai tai yra nedidelis sąrašų pasirinkimas, kurį gali sudaryti žiniatinklio valdytojas gražus sąrašas portale, kur jis pats gali daugiau suprojektuoti, kaip pats nori matyti.

                    Jei elementus reikia įdėti į sunumeruotą sąrašą, o ne su ženkleliais, bus naudojamas užsakytas HTML. Šis sąrašas sukurtas naudojant ol žymą. Numeravimas prasideda nuo vieno ir didėja po vieną kiekvienam paskesniam sąrašo elementui su li žyma.

                    Vienintelis skirtumas yra tas, kad ši žyma yra griežtai skirta numeravimo sąrašams. Žymos pavadinimas kilęs iš anglų kalbos santrumpos „Ordered List“ – sunumeruotas sąrašas.

                    Žymos sintaksė

                      1. Elementas #1
                      2. 2 elementas
                      3. 3 elementas
                      4. ...

                  Kur tipo="value" atributas gali turėti šias reikšmes

                  • A - nustato žymeklius didžiosiomis lotyniškomis raidėmis (A, B, C..);
                  • a - nustato žymeklius mažosiomis lotyniškomis raidėmis (a, b, c..);
                  • I - nustato žymeklius didelių romėniškų skaitmenų pavidalu (I, II, III, IV..);
                  • i - nustato žymeklius mažų romėniškų skaitmenų pavidalu (i, ii, iii, iv..);
                  • 1 (numatytasis) - nustato žymeklius arabiškų skaitmenų pavidalu (1, 2, 3..);

                  Atributas start="value" nurodo pradinę ataskaitos reikšmę (pradinę reikšmę).

                  Atvirkštinis atributas nurodo atvirkštinį skaičiavimą (jei reikia).

                  Žyma

                    reikalauja privalomo uždarymo žymos naudojimo

                  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.

                  Pastaba

                  Sąraše galite pakeisti paskyrą į savo. Šiuo tikslu žymoje yra specialus atributas value="".

                • , kuriai priskirta kai kurie skaitinė reikšmė. Pavyzdžiui

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

                Pavyzdžiai su sunumeruotais sąrašais html (
                  )

                1 pavyzdys. HTML sunumeruotas sąrašas lotyniškomis raidėmis

                Pavyzdys su didžiosiomis raidėmis

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

                Pavyzdys su mažosiomis raidėmis

                1. 10 elementas
                2. 11 elementas
                3. 12 elementas

                Štai kaip atrodo puslapyje:

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

                2 pavyzdys. HTML sunumeruotas sąrašas romėniškomis raidėmis

                Pavyzdys su didžiosiomis raidėmis

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

                Štai kaip atrodo puslapyje:

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

                Pavyzdys su mažosiomis raidėmis

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

                Štai kaip atrodo puslapyje:

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

                3 pavyzdys. Sunumeruotas sąrašas html skirtinga pradinė padėtis

                Pavyzdys, rodantis starto atributo, leidžiančio nustatyti pradinę skaitiklio reikšmę, galimybes.

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

                Štai kaip atrodo puslapyje:

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

                4 pavyzdys. Skaičių keitimas html sunumeruotuose sąrašuose

                Žemiau pateikiamas pavyzdys, kaip pakeisti skaitiklio reikšmes naudojant vertės atributą, kai žymose rodomi nauji elementai

              • .

                1. Elementas #1
                2. 2 elementas
                3. 3 elementas
                4. 4 elementas

                Štai kaip atrodo puslapyje:

                1. Elementas #1
                2. 2 elementas
                3. 3 elementas
                4. 4 elementas

                5 pavyzdys. Atvirkščiai sunumeruotas sąrašas html

                Žemiau pateikiamas atvirkštinio sunumeruoto sąrašo pavyzdys (skaičiuojama atvirkštine tvarka).

                1. Elementas #1
                2. 2 elementas
                3. 3 elementas
                4. 4 elementas

                Štai kaip atrodo puslapyje:

                1. Elementas #1
                2. 2 elementas
                3. 3 elementas
                4. 4 elementas

                Elementas

                  (iš angliško „netvarkingo sąrašo“) sukuria sąrašą su ženkleliais (netvarkinga). Paprastai elementas
                    naudojamas sąrašams kurti, kai pakeitus šio sąrašo elementų tvarką, sąrašo reikšmė iš esmės nepasikeičia.

                    Žyma

                      reiškia bloko elementus, todėl jis užims visą jam prieinamą plotį, o aukščio dydis priklausys nuo turinio kiekio.

                      Sunumeruotų sąrašų elementai apibrėžiami naudojant žymą

                    • , kuriame, be teksto, gali būti ir kitų HTML elementų (sąrašai, vaizdai, antraštės, pastraipos ir kt.). Pagal numatytuosius nustatymus suženklinti sąrašai tinklalapyje rodomi kaip sąrašas, prasidedantis mažu juodu apskritimu. Rodydami sąrašo elementus naršyklės prideda nedidelę paraštę kairėje.

                      Pastaba: Jei reikia

                        taikoma CSS nuosavybė, tada elementai
                      • paveldėti šias savybes.

                        Patarimas: Norėdami pakeisti žymeklio tipą, naudokite list-style-type CSS ypatybę arba list-style-image ypatybę, kuri leidžia žymeklius pakeisti vaizdais. Norėdami sukurti sunumeruotus sąrašus, naudokite žymą

                          .

                          Sintaksė

                            ...
                          • ...
                            • ...

                          Uždarymo žyma

                          Reikalingas.

                          Atributai

                          CompactNebenaudojama HTML5 Sumažina įtraukas ir tarpus tarp eilučių. type HTML5 Nustato sąrašo žymeklio tipą.

                          Prieinamas šiam elementui pasauliniai atributai Ir įvykius.

                          Numatytasis stilius

                          Dauguma naršyklių rodys elementą

                            su šiais CSS reikšmės numatytasis:

                            Ul ( ekranas: blokas; sąrašo stiliaus tipas: diskas; paraštė viršuje: 1 em; paraštė apačioje: 1 em; paraštė kairėje: 0; paraštė dešinėje: 0; užpildymas kairėje: 40 pikselių; )

                            HTML 4.01 ir HTML5 skirtumai

                            Kompaktiški ir tipo atributai nepalaikomi HTML5.

                            Naudojimo pavyzdys:

                            Netvarkingas HTML sąrašas:

                            HTML pavyzdys:

                            Išbandykite patys
                            • Kava
                            • Arbata
                            • Kakava

                            Specifikacijos

                            Specifikacija Būsena
                            WHATWG HTML gyvenimo standartas (WHATWG) Gyvenimo lygis
                            HTML 4.01 (W3C) Rekomendacija
                            HTML5 (W3C) Rekomendacija
                            HTML 5.1 (W3C) Rekomendacija

                            Naršyklės palaikymas

                            Išbandykite patys – pavyzdžiai

                            Kaip padaryti, kad sąrašas prasidėtų kitu skaičiumi nei 1?

                            Tęskime pokalbius apie html pradžią. Šiame straipsnyje noriu pakalbėti apie tai, kaip tekste kurti pastraipas, sąrašus ir antraštes. Taip pat apie atskiras žymas
                            Ir

                            .

                            Primygtinai patariu perskaityti pirmąją šios serijos pamoką, taip pat įvadinį straipsnį apie html studijų pradžią tiems, kurie dar nėra su jais susipažinę.

                            Dabar mes tęsime žymų tyrimą. Darysiu prielaidą, kad skaitytojas jau yra susipažinęs su aukščiau pateiktų straipsnių medžiaga.

                            Kaip visada, darbo planas:

                            1. Pastraipos
                            2. Eilučių pertraukos
                            3. Sąrašai ir sąrašo elementai
                            4. Antraštės
                            5. Horizontalios liniuotės

                            Pastraipos

                            Tekstas beveik visada susideda iš pastraipų. Pastraipa yra teksto elementas, perteikiantis visą mintį.

                            html, pastraipa, kaip matyti iš pavadinimo, žymima . Raidė „p“ yra paimta iš žodžio „paragrafas“, kuris tiesiog reiškia „pastraipa“.

                            Pažiūrėkime į pavyzdį:

                            Pirmos pastraipos tekstas. Jame yra mintis. Bet dabar mintis baigėsi.


                            Kita mintis jau prasidėjo ir mes ją rašome kitoje pastraipoje.

                            Kaip matote, pastraipų naudojimas yra labai paprastas ir nereikalauja jokių specialių komentarų. Jei peržiūrėsime šį kodą naršyklėje, pamatysime dvi eilutes, tarp kurių yra viena tuščia eilutė. Rusiškuose tekstuose įprasta pastraipą atskirti ne tuščia eilute, o perkeliant pirmąją eilutę į dešinę. Bet būtent toks formatavimas dažnai naudojamas internete, todėl dažnai paliekamas rusakalbiuose tekstuose. Tačiau jei toks elgesys jums nepatinka, galite jį pakeisti naudodami CSS.

                            Eilučių pertraukos

                            Kartais reikia išversti eilutę nebaigus minties ar neuždarius pastraipos. Tai yra, tiesiog eikite į naują eilutę. Tam yra viena žyma
                            . Štai jo naudojimo pavyzdys:

                            Linksmai pučia vėjas

                            Ir valtis įsibėgėja

                            Jis bėga bangomis
                            Su pakeltomis burėmis.

                            Šis A.S. eilėraščio fragmentas. Puškinas padėjo mums iliustruoti žymos veiksmą
                            . Specialiai įdėjau paskutines dvi šio ketureilio eilutes į vieną kodo eilutę, kad parodyčiau, jog eilutės perkeliamos į naują eilutę ne todėl, kad įdėjome eilučių pertraukas, o todėl, kad įdėjome žymas
                            . Ši žyma yra labai paprasta ir nereikalauja išsamaus paaiškinimo, todėl čia nebekalbėsime.

                            Sąrašai,
                              ir sąrašo elementus

                            Kartais reikia ką nors išvardyti tekste. Šiuo tikslu naudojamos trys žymos: ul, ol, li. Visos šios žymos yra sudėtinio rodinio žymos, tačiau žyma visada yra viename iš konteinerių arba ir neturi jokios reikšmės už jų ribų. ul konteineris naudojamas, kai mums nerūpi išvardytų elementų tvarka ir nenorime sutelkti dėmesio į jų rodymo tvarką. Priešingai, ol žyma sutelkia dėmesį į elementų seką, automatiškai sunumeruodama kiekvieną eilutę. Pažiūrėkime į pavyzdį:


                            • bandelė

                            • Pyragas

                            • Kepalas

                            • Pyragas

                            Naršyklės ekrane šis kodas atrodys taip:

                            • bandelė
                            • Pyragas
                            • Kepalas
                            • Pyragas

                            Jei tiesiog pakeisime ul žymą ol žyma, gausime numeruotą sąrašą:


                            1. bandelė

                            2. Pyragas

                            3. Kepalas

                            4. Pyragas

                            Dabar tai atrodo taip:

                            1. bandelė
                            2. Pyragas
                            3. Kepalas
                            4. Pyragas

                            Niekas nedraudžia sudėti vieną sąrašą į kitą, sudaryti įdėtus sąrašus su posąraščiais:


                              Įrankiai:
                            • Pjūklas

                            • Atsuktuvai

                              1. Tiesiai

                              2. Kryžius



                            • Gręžtuvas

                            Norėdami priprasti prie šių sąrašų, turite šiek tiek paeksperimentuoti. Yra dar vienas sąrašo tipas, bet jis retai naudojamas, todėl dabar apie jį nekalbėsiu. Gal kitame straipsnyje.

                            Žinoma, kaip ir visa kita, išvaizdaŠiuos elementus galima neatpažįstamai modifikuoti naudojant CSS.

                            Antraštės

                            Žinoma, pastraipos padeda struktūrizuoti dokumentus. Tačiau norėdami suskaidyti didelį tekstą į mažesnes logines dalis, galite pavadinti kiekvieną iš jų. Kiekvienoje dalyje gali būti papildomų poskyrių su savo žemesnio lygio antraštėmis ir pan. Norėdami nustatyti pavadinimą, naudokite žymas , kur „x“ yra skaičius nuo 1 iki 6. Kuo didesnis skaičius, tuo žemesnė antraštė. Tai yra, aukščiausio lygio antraštė bus vadinama h1, o apatinio lygio antraštė bus vadinama h6. Pagal numatytuosius nustatymus tekstas šiose antraštėse rodomas dideliu šriftu ir su įtrauka. Šis tekstas rodomas visoje eilutėje, tai yra, hx žymos yra blokinės žymos. Žyma h1 turi didžiausią šriftą, o h6 - mažiausią šriftą. Paprastai puslapyje yra viena, daugiausia dvi aukščiausio lygio h1 žymos. Kai lygis mažėja, žymų skaičius didėja. Tačiau retai kada žiniatinklio valdytojas sugebės taip suskaidyti tekstą, kad jam reikia 5 ar 6 lygio antraštės. Net 4 lygis naudojamas retai.

                            Mažiau žodžių, daugiau veiksmų!

    Redaktoriaus pasirinkimas

    © 2024 ermake.ru - Apie kompiuterių taisymą - Informacinis portalas