გამოიყენეთ CSS-ის ul li სიების თანამედროვე დიზაინი. რიგის ნომრების (ციფრების) სტილიზაცია მოწესრიგებულ სიებში ol დანომრილი სიების შესაქმნელად გამოიყენება vikory ტეგები

იმ სტაგნაციის მნიშვნელობა

ნუმერაცია (შეკვეთა) არის ელემენტების მნიშვნელობების ჩამონათვალი, რომლებიც სწორი თანმიმდევრობით გამოჩნდება. ნუმერაციის სია იწყება ტეგით

(მოკლე ინგლისურისთვის შეკვეთილი სია- შეკვეთების სია). სიაში კანის ელემენტი იწყება ტეგით
1. (სიის ელემენტი).

   ბრაუზერის მხარდაჭერა

   ატრიბუტი			ოპერა		IExplorer	ზღვარი
   დაწყება, აკრიფეთ	Ისე	Ისე	Ისე	Ისე	Ისე	Ისე
   შებრუნებული	Ისე	Ისე	Ისე	Ისე	არა	არა

   ატრიბუტები

   ატრიბუტი	მნიშვნელობა	აღწერა
   კომპაქტური	კომპაქტური	არ არის მხარდაჭერილი HTML5-ში. მიუთითებს, რომ სია თავდაპირველ ზომაზე მცირეა (ხაზის სიმაღლე: 80%). Vickory CSS ამ ატრიბუტის შესაცვლელად.
   	შებრუნებული	მე აღვნიშნავ, რომ დანომრილი (შეკვეთილი) სიის თანმიმდევრობა შეიძლება დაიცვას წესები. ატრიბუტი არ არის მხარდაჭერილი ბრაუზერების მიერ Internet Explorerრომ ზღვარი.
   დაწყება	ნომერი	ეს ნიშნავს დანომრილი სიის პირველ მნიშვნელობას. ხარვეზის მნიშვნელობები ხელუხლებელია, ნებადართულია უარყოფითი მნიშვნელობების დამატება. ასოებთან გამოყენებისას (ტიპი = "A" და ტიპი = "a"), ფასეულ ატრიბუტში მითითებული რიცხვი არის ასოს სერიული ნომერი ანბანში. მაგალითად, start = "4" მიუთითებს ასოებს "დ"და სია თავად გაჩნდება მისგან. თუ მნიშვნელობა start = "27" შეიცვლება, სია აღდგება ნულამდე და სია ხდება ორნიშნა ("27" = "AA", "28" = "AB", "29" = "AC". ...).
   ტიპი	1 (დასუფთავებისთვის) Დიდი) a (მალი) მე (რომაელი დიდებულები) მე (პატარა რომაული)	მიუთითებს მარკერის ტიპს, რომელიც გამოჩნდება დანომრილ (მოწესრიგებულ) სიაში.

   ვიკორისტანული კონდახი

   1. პირველი წერტილიკიდევ ერთი წერტილი
   2. მესამე წერტილი

   ის ასე გამოიყურება გვერდზე:

   1. პირველი წერტილი.
   2. კიდევ ერთი წერტილი.
   3. მესამე წერტილი.

   თუ გსურთ სია დაიწყოს საწყისი ნომრით (არა 1), თქვენ უნდა მიუთითოთ დაწყების ატრიბუტი ტეგისთვის.

   .

   Მაგალითად:

   კიდევ ერთი მნიშვნელოვანი ატრიბუტია type , რომელიც საშუალებას გაძლევთ მიუთითოთ ასოების ნუმერაცია ("A" - დიდი, "a" - პატარა), ან ნუმერაცია რომაული ციფრებიდან ("I" - დიდი რეგისტრისთვის, "i" - პატარა რეგისტრისთვის).

   მოდით შევხედოთ მაგალითს, რომელიც აჩვენებს ტიპის ატრიბუტის ყველა შესაძლო მნიშვნელობას (გარდა ტიპის მნიშვნელობებისა):

   >
   1. პირველი წერტილიკიდევ ერთი წერტილი
   2. მესამე წერტილი
   >
   1. პირველი წერტილიკიდევ ერთი წერტილი
   2. მესამე წერტილი
   >
   1. პირველი წერტილიკიდევ ერთი წერტილი
   2. მესამე წერტილი
   >
   1. პირველი წერტილიკიდევ ერთი წერტილი
   2. მესამე წერტილი

   ვაფასებ, რომ დაშვებულია დანომრილი (მოწესრიგებული) სიების ფორმირება, რომლებიც შედის სხვა დანომრილ სიებში (სიის ელემენტის შუაში)

   3. ):
      1. პირველი წერტილი
         1. პირველი წერტილიკიდევ ერთი წერტილი
         2. მესამე წერტილი
         კიდევ ერთი წერტილი
         3. მესამე წერტილი

         ის ზუსტად ასე გამოიყურება გვერდზე.

         მოდით გავაგრძელოთ ჩვენი აზრები html cobs-ის შესახებ. ამ სტატიაში მინდა ვისაუბრო იმაზე, თუ როგორ შევქმნათ აბზაცები, სიები და სათაურები ტექსტში. ასე რომ, ცალკეული ტეგების შესახებ
         і

         ---

         .

         ნამდვილად მოგიწოდებთ გაეცნოთ ამ სერიის პირველ გაკვეთილს, ასევე შესავალი სტატიას html ცოდნის დასაწყისის შესახებ მათთვის, ვინც ჯერ არ იცნობს მათ.

         ახლა ჩვენ გავაგრძელებთ ტეგების შეცვლას. ვვარაუდობ, რომ მკითხველი უკვე იცნობს ყველაზე მნიშვნელოვანი სტატიების მასალას.

         როგორც ადრე, რობოტის გეგმა:

         1. აბზაცები
         2. შექმენით რიგები
            
         3. სიები და სიის ელემენტები
         4. სათაურები
         5. ჰორიზონტალური ხაზები

            ---

         აბზაცები

         ტექსტი ხშირად შედგება აბზაცებისგან. აბზაცი არის ტექსტის მთელი ელემენტი, რომელიც ატარებს დასრულებულ აზრს.

         html-ში, აბზაცი, როგორც შეიძლება ვიმსჯელოთ სათაურიდან, არის დანიშნული. ასო „პ“ აღებულია სიტყვიდან „აბზაცი“, რაც თავისთავად „აბზაცს“ ნიშნავს.

         მოდით შევხედოთ კონდახს:

         პირველი აბზაცის ტექსტი. შურისძიების აზრი. კარგი, ფიქრი დასრულდა.
         

         
         

         სხვა ფიქრი უკვე დაწყებულია და ამას სხვა აბზაცში ვწერთ.
         

         როგორც ჩანს, აბზაცების აგება ძალიან მარტივია და არ საჭიროებს განსაკუთრებულ კომენტარს. თუ ბრაუზერში ხედავთ ამ კოდს, გვაქვს ორი მწკრივი, რომელთა შორის არის ერთი ცარიელი მწკრივი. რუსულ ტექსტებში ჩვეულებრივია აბზაცის დამატება არა ცარიელ მწკრივზე, არამედ პირველი რიგის მარჯვნივ გადატანა. მიუხედავად იმისა, რომ ინტერნეტში ეს ფორმატირება ხშირად სტაგნაციაშია, რაც ხშირად უარყოფილია რუსულ ტექსტებში. თუმცა, რადგან ეს ქცევა არ არის კონფიგურირებადი, ის შეიძლება შეიცვალოს დამატებითი CSS-ის გამოყენებით.

         შექმენით რიგები
         

         ზოგჯერ საჭიროა მწკრივის გადაწყობა თქვენი აზრის დამთავრების ან აბზაცის დახურვის გარეშე. უბრალოდ გადადით ახალ რიგში. რისთვისაც არის ერთი ტეგი
         . ღერძი კონდახი yogo zastosuvannya:

         ქარი მხიარულად უბერავს
         
         და ნავი უახლოვდება
         
         შეგიძლია საკუთარ თავთან ერთად გაიქცე
         აწეულ ფანჯრებზე.
         

         ეს ფრაგმენტი დაწერილია A.S. პუშკინა დაგვეხმარა ამ ტეგის ილუსტრირებაში
         . მე სპეციალურად დავტოვე კოდში ერთ რიგში მოთავსებული ამ მწკრივის ორი მწკრივი, რათა მეჩვენებინა, რომ სტრიქონები ახალ მწკრივში გადადის არა იმით, რომლებზეც ჩვენ მოვათავსეთ გადატანილი რიგები, არამედ მათ მეშვეობით, რომლებზეც დავაყენეთ ტეგები.
         . ეს ტეგი ძალიან მარტივია და არ საჭიროებს დეტალურ ახსნას, ამიტომ შევწყვიტოთ მისი განხილვა.

         სიები

         და სიების ელემენტები

         ზოგჯერ ტექსტს ინტერპრეტაცია სჭირდება. ამ ტეგისთვის არის სამი ტეგი: ul, ol, li. ყველა ტეგი არის კონტეინერის ტეგი, მაგრამ ტეგი ყოველთვის უნდა განთავსდეს ერთ-ერთ კონტეინერში და ეს არ იმოქმედებს მათ პოზიციაზე. კონტეინერი ul დარჩება, თუ არ გვაინტერესებს პოზიციების წესრიგი, რომ უსაფრთხოდ ვითამაშოთ და არ გვინდა ხაზი გავუსვა იმ თანმიმდევრობას, რომლითაც მივდივართ. და ol ტეგი, მაგალითად, ხაზს უსვამს ელემენტების გავლის თანმიმდევრობას, ავტომატურად ნუმერაციებს თითოეულ მწკრივს. მოდით შევხედოთ კონდახს:

         
         
         • ფუნთუშა
         
         
         • ღვეზელი
         
         
         • ბუხანეც
         
         
         • პირიგი
         
         

         ბრაუზერის ეკრანზე ეს კოდი ასე გამოიყურება:

         • ფუნთუშა
         • ღვეზელი
         • ბუხანეც
         • პირიგი

         თუ ჩვენ შევცვლით ul ტეგს ol ტეგით, ამოვიღებთ დანომრილ სიას:

         
         
         1. ფუნთუშა
         
         
         2. ღვეზელი
         
         
         3. ბუხანეც
         
         
         4. პირიგი
         
         

         ახლა ასე გამოიყურება:

         1. ფუნთუშა
         2. ღვეზელი
         3. ბუხანეც
         4. პირიგი

         არავინ აჩერებს ვინმეს ერთი სიის მეორეში ინვესტირებაში, წყობილი სიების ჩამოყალიბებაში გამოწერებით:

         
         ინსტრუმენტები:
         
         • დაინახა
         
         
         • ირონია
           
           
           
           1. პირდაპირ
           
           
           2. ხრესტოვა
           
           
           
           
         
         
         • საბურღი
         
         

         თქვენ მოგიწევთ ცოტა ექსპერიმენტი ჩაატაროთ ამ სიებთან, რომ შეეგუოთ მათ. არსებობს სხვა ტიპის სია, მაგრამ ის იშვიათად ჩერდება, ამიტომ არაფერი ვიცი ამის შესახებ. სხვა სიტყვებით რომ ვთქვათ, შესაძლებელია.

         რა თქმა უნდა, ამ ელემენტების გარეგნობა შეიძლება შეიცვალოს დამატებითი CSS-ის გარეშე.

         სათაურები

         რა თქმა უნდა, აბზაცები ხელს უწყობს დოკუმენტების სტრუქტურირებას. მაგრამ იმისათვის, რომ დიდი ტექსტი დავყოთ პატარა ლოგიკურ ნაწილებად, შეგვიძლია მათ ვუწოდოთ სკინები. კანის ნაწილი შეიძლება შეიცავდეს სხვა ნაწილებსაც, ქვედა დონის სათაურებით და ა.შ. ტეგები გამოიყენება სათაურის დასაყენებლად , სადაც "x" არის რიცხვი 1-დან 6-მდე. სათაური უფრო დაბალია, მით უფრო მაღალია რიცხვი. ასე რომ, უმაღლესი დონის სათაურს ეწოდება h1, ხოლო ყველაზე დაბალს - h6. როგორც წესი, ტექსტი, რომელიც ჩანს ამ სათაურებში, ნაჩვენებია დიდი, საფეხურიანი შრიფტით. ეს ტექსტი ნაჩვენებია მთელ მწკრივზე, ამიტომ hx ტეგები ბლოკის ფორმისაა. h1 ტეგს აქვს ყველაზე დიდი შრიფტი, ხოლო h6 ტეგს აქვს ყველაზე დიდი შრიფტი. როგორც წესი, გვერდზე არის ერთი, მაქსიმუმ ორი უმაღლესი დონის h1 ტეგი. დონის კლებასთან ერთად იზრდება ტეგების რაოდენობა. იშვიათია, რომ ვებმასტერს შეუძლია ტექსტის დაშლა ისე, რომ ეს მოითხოვს მე-5 ან მე-6 გამოცემის სათაურებს. No4 რევანდი იშვიათად ჩერდება.

         ნაკლები სიტყვა, მეტი მოქმედება!

         სიები არის დანომრილი ან უნომრო.

         დანომრილი სიები ნაჩვენებია კოდით:

         სია რიცხვებით
         1. პუნქტი 1
         2. წერტილი 2
         3. წერტილი 3

         ნებისმიერი უნომრო სიები ნაჩვენებია კოდით:

         სია გამშვები ნიშნებით ან სხვა სიმბოლოებით
         • პუნქტი 1
         • პუნქტი 1
         • პუნქტი 1

         სიის თითოეული ელემენტი მდებარეობს li ტეგში. სიაში ყველა ელემენტს აქვს იგივე ტეგი ul ან ol. ამ ტეგების სტილები რეგისტრირებულია სტილის ცხრილში.

         დიზაინის სტილები ხელმისაწვდომია კანის ტეგისთვის. ისინი მითითებულია ტექსტში.

         დანომრილი სიისთვის მითითებულია თითოეული ელემენტის ნუმერაციის სტილი.

         სტანდარტული არაბული ციფრები აღწერილია ათობითი მნიშვნელობების გამოყენებით.

         list-style-type: ათობითი; /*არაბული ციფრები*/

         ბურთულებიანი სიისთვის შეგიძლიათ მიუთითოთ სიმბოლოს სტილი - კვადრატები ან წრეები.

         list-style-type: წრე; /*მოხარშვა*/
         list-style-type: კვადრატი; /*კვადრატი*/

         კანის მენიუს ელემენტისთვის შეგიძლიათ აირჩიოთ სურათი.

         list-style-image: url('გზა გამოსახულებისკენ');

         ნუმერაციის შაბლონებში სია ფორმატირებულია მარტივი რიცხვებით და არა რიცხვებით - შავი კვადრატებით და წრეებით. მოსაწყენი და დაუჯერებელია. მოდით მივიღოთ ეს პირდაპირ.
         

         სიის რა სტილებია მითითებული Twenty Eleven შაბლონში?

         გახსენით style.css ფაილი. იპოვეთ განყოფილება სახელით /* ტექსტის ელემენტები */

         სტანდარტული კოდი ასე გამოიყურება:

         როგორ მოვაწყოთ გადარიცხვის ნუმერაცია?

         ნუმერაციის სია დამატებითი ფონზე

         გაოცდით, რამდენად მიმზიდველია დანომრილი სიის დიზაინი.

         Მომწონს? მოდი ისევ გავაკეთოთ.

         იპოვეთ სტილი ol ტეგისთვის. დაარეგისტრირეთ ახალი ავტორიტეტები.

         Ol ( შიგთავსი: 0px 0 0 20px; ზღვარი: 0.5em 0 1.571em 1.9em; ფერი: #2E2E2E; სიის სტილის ტიპი: არცერთი; : 2; counter-reset: point; ) ol li ( margin-ქვემო: 4px ; ხაზის სიმაღლე: 1.6; ფერი: #2E2E2E; წერტილი 1; ხაზის სიმაღლე: 1.6; სიმაღლე: 24 პიქსელი; ზღვარი მარცხნივ: -36 პიქსელი; მარცხნივ: 0 პიქსელი; სიგანე: 24 პიქსელი; ზღვარი ზედა: 1 პიქსელი; ცენტრი, პოზიცია: შრიფტის წონა: თამამი;

         იმისათვის, რომ გაიგოთ, რა უნდა შეცვალოთ თქვენი დიზაინისთვის, მოდით გადავხედოთ ამ კოდს ეტაპობრივად.

         list-style-type: none; - საშუალებას აძლევს სტანდარტული ნომრების ჩვენებას
         counter-reset: წერტილი; - ადგენს მნიშვნელობას ნუმერაციის მენეჯერისთვის
         პოზიცია: ნათესავი; - ათავსებს თავად ქულების ნუმერაციას

         ადრე - ფსევდო ელემენტი ol li ტეგისთვის. ხელმისაწვდომია შემდეგ სტილებში:
         შინაარსი: კონტრ(პუნქტი); - შეიყვანეთ ცვლილების მნიშვნელობა
         საპირისპირო ზრდა: პუნქტი 1; - მეტი მკურნალი 1-ით
         პოზიცია: აბსოლუტური;
         ფონი: #BDC3C7; — ფონი ციფრებისთვის (ფონის დაყენება შესაძლებელია ფერით ან ლამაზი ხატით
         ზღვარი - გარე მინდვრები
         padding - შიდა შესასვლელები
         ფერი - ელემენტის ტექსტის ფერი
         ფონი – tlo
         text-align – ტექსტის გასწორება
         font-weight – შრიფტის წონა

         თქვენს სტილში შეგიძლიათ დააყენოთ ნებისმიერი ფერი, შრიფტის ზომა და ჩაღრმავება.

         ნუმერაციის სია თითოეული ელემენტისთვის უნიკალური სურათებით

         ერთ-ერთ ქალთა საიტზე არის კიდევ უფრო დანომრილი სიები.

         როგორ განხორციელდა ეს? მოდით შევხედოთ შეურაცხმყოფელ კოდს:

         /*პირველი ნომერი*/ ol li:first-child ( list-style-image: url(გზა გამოსახულებისკენ ნომრით 1); ) /*სხვა ნომერი*/ ol li:nth-child(2n) (list-style - სურათი: url(გზა გამოსახულებისკენ ნომრით 2); ) /*მესამე ნომერი*/ ol li:nth-child(3n) (list-style-image: url(გზა გამოსახულებისკენ ნომრით 3); ) * / ol li :nth-child(4n) (list-style-image: url(სურათზე გადადით ნომრით 4); ) /*შემდეგ ჩვენ ზუსტად იგივეს ვწერთ ქულების შემდეგი რიცხვებისთვის*/

         ასეთი დანომრილი სიის კოდში, თქვენ ხელახლა უნდა აირჩიოთ ყველა ელემენტის ნომერი და მივანიჭოთ უნიკალური ხატი თითოეულ მათგანს.

         თუ თქვენ გაქვთ 20-მდე დანომრილი ელემენტი სტატიების სიებში და ვიკილისტებში, თქვენ უნდა დაწეროთ ფსევდოკლასი nth-child(An) 20-ჯერ. მოდით, შევინარჩუნოთ ფსევდოკლასი nth-child(20n) სტილებში.

         იპოვეთ სტრიქონები სტილის ფაილში, რომელიც აღწერს დანომრილი სიის დიზაინს (ol li tags).

         დაამატეთ ახალი ფსევდო-კლასის პირველი შვილი. დააკოპირეთ და ჩასვით ერთხელ, შემდეგ შეცვალეთ ეს ძალა nth-child(An)-ზე და დააკოპირეთ იმდენი რიცხვი, რამდენიც გსურთ თქვენი ხატისთვის. შეიყვანეთ ნივთის ნომრები.

         კანის ნომრისთვის, ჩაწერეთ power list-style-image ძალაუფლების უნიკალური ხატით.

         თუ საიტზე ხატები მდებარეობს წერტილებიდან შორს ან გადაფარავს მათ, აუცილებელია ციფრული ხატების გასწორება და წერტილების ტექსტი.
         

         როგორ დავაფორმოთ მონიშნული (არანომრიანი) სია?

         მარკირების სია ul li ხატებით, რომლებიც მონიშნულია.

         მე უკვე მივიღე პატივი ასეთი მარკირების სიით

         Ul ( padding: 11px 0 5px 0; ) ul li ( padding-მარცხნივ: 32px; ზღვარი-ქვედა: 10px; შრიფტი: ნორმალური 15px Verdana, sans-serif; ფერი: #2E2E2E; 1px წყვეტილი #ccc: padding-pxtom და ბავშვი(2ნ): ადრე ( შინაარსი: ""; სიმაღლე: 43 პიქსელი; მარცხნივ: -35 პიქსელი; ზღვარი ზევით: -2 პიქსელი; ფონი: url ("images/sprite.jpg") 0px -17 პიქსელი განმეორების გარეშე; სია -სტილი-ტიპი: წრე;

         თქვენ შეგიძლიათ შეცვალოთ სტანდარტული სიის სტილის ტიპი "გასეირნება ხატზე" - list-style-image: url. წინააღმდეგ შემთხვევაში, თქვენ უნდა დაარეგისტრიროთ გარე მარცხენა წვდომა საიტის კიდეებზე - ყოველგვარი ხატების გარეშე ისინი არ გამოჩნდება, ისინი გადიან შინაარსის ზონის ზონას.

         ექსპერიმენტისთვის შეგიძლიათ გაითვალისწინოთ შემდეგი ნაბიჯები:

         Ul li (list-style-image: url(images/radio.png); margin-left: 30px; )

         ხატების დიზაინი შეიძლება დაყენდეს nth-child(An) ძალაზე. ინდუცირებულ კონდახს ადრე ფსევდოელემენტი აქვს.

         კოდს აქვს ერთი ფსევდო-კლასის n-ე შვილი (2n). მისი მნიშვნელობა არის 2. გაარკვიეთ, რომ თითოეული დაწყვილებული წერტილი მითითებულია სხვა ხატით. თუ 2n-ის ნაცვლად დაწერთ 2n+1, მაშინ დაუწყვილებელ ელემენტებზე გამოჩნდება სხვა ხატულა.

         სიის თითოეული ელემენტისთვის შეგიძლიათ დააყენოთ ქვედა საყრდენი. ამ შემთხვევაში, წერტილები მითითებულია წერტილოვანი ხაზით.

         თქვენ ასევე შეგიძლიათ მივანიჭოთ ჩარჩოები, კონტურები და ხატები თითოეულ ელემენტს. უბრალოდ არ გადააჭარბოთ. ჩვენი მიზანია არა ყველას შთაბეჭდილება მოახდინოს დახვეწილი დიზაინით, არამედ გავალამაზოთ შინაარსი.
         

         როგორ შემიძლია რამდენიმე გვერდის ჩვენება სხვადასხვა დიზაინის გვერდზე?

         ზოგჯერ საჭიროა სხვადასხვა სტილის სიების განთავსება.

         თუ თქვენ აღიარებთ სხვადასხვა სტილს, მაშინ ერთი და იგივე დიზაინი მიენიჭება ყველა სიას. სხვადასხვა სიების ჩვენება შესაძლებელია ტეგის ID-ში ტეგის ol ან ul დამატებით და HTML რედაქტირების რეჟიმში შეყვანით. კარგად, სტილის ფაილში ამ ID-სთვის საჭიროა სხვადასხვა სტილის რეგისტრაცია.

         ღერძი, მაგალითად, ერთი ლამაზი ვარიანტი სივრცის დიზაინისთვის:

         HTML-ში შეგიძლიათ დაწეროთ სია ასე:

         ზმისტ
         1. პუნქტი 1
         2. წერტილი 2
         3. წერტილი 3

         CSS-ში შეგიძლიათ დაწეროთ ასეთი სტილები:

         Ol#sod( padding: 0px 20px 10px 51px; ზღვარი: 0.5em 0 0em 1em; ფერი: #2E2E2E; სიის სტილის ტიპი: none; block; ) ol#sod li() ol#sod li:fore( font- წონა: ნორმალური !მნიშვნელოვანია)

         ახალი სტილი აისახება ol ტეგის მთავარ დიზაინში: ფონი, ჩვენების სტილი და ხაზი ერთად.

         თუ ტექსტში იყენებთ სიის სხვადასხვა დიზაინს, თქვენ გააგრძელებთ ინფორმაციის კიდევ უფრო მკაფიოდ მიწოდებას. ნებისმიერი ელემენტის ხელახლა დალაგებისას შეგიძლიათ დააყენოთ ერთი ხატულა, ხოლო სხვა ხატების ხელახლა მოწყობისას. აქ დიზაინი შემოიფარგლება თქვენი ფანტაზიით.

         ეს მეთოდები ფუნდამენტურია მენიუს ელემენტების, სათაურებისა და საიტის სხვა ელემენტების დიზაინში.
         

         როგორ შევქმნათ შეტყობინება-წამყვანი ნივთების სიისთვის?

         როგორ დავწეროთ ისინი HTML კოდში? კოდის ერთი ხაზი აყალიბებს შეტყობინების წამყვანს, ხოლო კოდის მეორე სტრიქონი მოთავსებულია იმ ადგილის გვერდით, სადაც უნდა გადავიდეთ შეტყობინებაზე დაჭერისას.

         ზმისტ
         1. სათაური 1
         2. სათაური 2
         3. სათაური 3

         და სტატიის ტექსტში ჩაწერეთ შემდეგი:

         სათაური 1… სათაური 2… სათაური 3…

         იქნებ შემატყობინოთ, რომ ვებმასტერებს შეუძლიათ ჩემი გამოსწორება? მე უბრალოდ ვიზიარებ მათ, რაც მე თვითონ გამოვცადე პრაქტიკაში.

         თუ საკვები დაკარგეთ, მოხარული ვარ, რომ დაგეხმაროთ კომენტარებში.

         აგეევა ვერონიკა.

         იქნებ უბრალოდ გაგიჟდე:

         თუ გსურთ შეცვალოთ სტანდარტული სიები ul და li, ეს თემა გამოგადგებათ. აქ თქვენ გაეცნობით რამდენიმე ორიგინალურ გადაწყვეტას. როგორ შეგვიძლია დაგეხმაროთ შეცვალოთ სტანდარტული ხედი უნიკალურზე, CSS სტილის გამოყენებით, სიების დიზაინისთვის. გარდა ამისა, ყველას, ვინც ჩვენ ვიკორისტს გავუკეთებთ, მხოლოდ ერთი კლასი აქვს, რომელსაც შეუძლია რადიკალურად შეცვალოს მათი გარეგნობა. ამ პარამეტრების გარდა, შეგიძლიათ მიუთითოთ რომელ რიცხვზე უნდა დაიწყოს სია, აქ შეგიძლიათ გააკეთოთ ყველაფერი თავად. პოჩატკოვის მნიშვნელობა დანომრილი სიების დაწინაურებისთვის გვხვდება პირველ ან ასო A-ზე.

         საფუძვლებიდან დაწყებული, ახლა უფრო დეტალურად განვიხილავთ იმ ელემენტებს, რომლებიც მიიღებენ სტრუქტურასა და მნიშვნელობას დიზაინის სხვადასხვა ელემენტებისთვის. თუ არ იცით, მაშინ ul და li, ეს ბევრად უფრო მოკლე ვარიანტია, უფრო მარტივი ტექსტური ტექსტი, რადგან თუ ტექსტი დაიწვა, განსაკუთრებით მობილურ ტელეფონზე, ის უბრალოდ შემოდის და არ ახვევს მარკერს.

         მნიშვნელოვანია, რომ სიები გვერდებზე ინფორმაციის ჩვენების მშვენიერი საშუალებაა, ამიტომ ისინი ადვილად იკითხება და კარგად გამოიყურებიან. როგორც ჩანს, ბევრი ფიქრობს, რომ წერტილები პატარა სურათებია, მაგრამ სინამდვილეში ისინი ყველა იქმნება მარტივი HTML კოდით. თქვენ შეგიძლიათ ჩაწეროთ სხვადასხვა ტიპის სიები ერთში, როგორც გსურთ, უბრალოდ დარწმუნდით, რომ სწორად დახურეთ ისინი. თქვენ შეგიძლიათ ითამაშოთ თქვენთვის სასურველი ტექსტით სიაში ყველა ამ ბრძანებაში.

         ასევე აუცილებელია იცოდეთ, რომ სიები თავდაპირველად შეიცავს რამდენიმე ელემენტს:

         1 . ინფორმაცია მწყობრიდან გამოსულია.
         2 . ინფორმაცია მოწესრიგებულია.
         3 . ვიზნაჩენნია.

         დავიწყოთ ინსტალაცია:

         ვარიანტი 1:

         
         
         • სიის ელემენტი
         
         
         • უნიკალური სია
         
         
         • ორიგინალური სიები
         
         
         • ZORNET.RU - ვებმასტერი
         
         
         • კიდევ ერთი სია
         
         
         
         CSS

         ქსანჯელოპანი (
         ზღვარი: 19px 00;
         padding:0;
         list-style: არცერთი;
         counter-reset: li;
         }
         ქსანჯელოპან ლი (
         საზღვარი: 2px მყარი #3575ad;
         ფონი: #d7dee4;
         პოზიცია: ნათესავი;
         ზღვარი-ქვედა: 17 პიქსელი;
         padding: 15px 9px;
         }
         .ksangelopan li:hover (
         z-ინდექსი: 1;
         }
         .ksangelopan li: ადრე (
         საზღვარი: 2px მყარი #2270b3;
         პოზიცია: აბსოლუტური;
         ზედა: -14px;
         padding: 3px 9px;
         შრიფტის ზომა: 11px;
         შრიფტის წონა: თამამი;
         ფერი: #246 eaf;
         ფონი: #f2f4f7;
         კონტრ-მატება: li;
         შინაარსი: counter(li);
         -webkit-გარდამავალი-ხანგრძლივობა: 0.4წმ;
         გადასვლა-ხანგრძლივობა: 0,4წმ;
         }
         .ksangelopan li:hover: ადრე (
         ფონი: #2672b3;
         ფერი: #f7f9fb;
         -webkit-transform: translate(-11px, 0);
         -ms-transform: translate(-11px, 0);
         -o-transform: translate(-11px, 0);
         transform: translate(-11px, 0);
         }
         .ksangelopan li: შემდეგ (
         შინაარსი: "";
         პოზიცია: აბსოლუტური;
         გადასვლა-ხანგრძლივობა: 0,3წმ;
         -webkit-transition-საკუთრება: სიგანე;
         გარდამავალი თვისება: სიგანე;
         z-ინდექსი: -1;
         ფონი: #FFF;
         სიმაღლე: 100%;
         მარცხენა: 0;
         ზედა: 0;
         სიგანე: 0;
         }
         .ksangelopan li:hover:after (
         სიგანე: 100%;
         }

         
         აქ არის მთელი დაყენება.

         2 კიდევ ერთი ვარიანტი:

         

         
         
         • სიის ელემენტი
         
         
         • უნიკალური სია
         
         
         • ორიგინალური სიები
         
         
         • ZORNET.RU - ვებმასტერი
         
         
         • კიდევ ერთი სია
         
         
         
         CSS

         ნაღველი uzlopamges (
         ზღვარი-ქვედა: 8 პიქსელი;
         padding:0;
         list-style: არცერთი;
         counter-reset: li;
         }
         .ბელედუზლოპამგეს ლი (
         პოზიცია: ნათესავი;
         საზღვარი: 2px მყარი #195588;
         ფონი: #eff3f7;
         padding: 15px 19px 15px 27px;
         ზღვარი: 12px 0 12px 40px;
         -webkit-გარდამავალი-ხანგრძლივობა: 0.3წმ;
         გადასვლა-ხანგრძლივობა: 0,3წმ;
         }
         .beleduzlopamges li:hover (
         ფონი: #FFF;
         }
         .beleduzlopamges li: ადრე (
         ხაზის სიმაღლე: 32px;
         პოზიცია: აბსოლუტური;
         ზედა: 4px;
         მარცხენა: -39px;
         სიგანე: 39px;
         ტექსტის გასწორება: ცენტრში;
         შრიფტის ზომა: 16px;
         შრიფტის წონა: თამამი;
         ფერი: #f9f5f5;
         ფონი: #275b88;
         კონტრ-მატება: li;
         შინაარსი: counter(li);
         გადასვლა-ხანგრძლივობა: 0,2წმ;
         }
         .beleduzlopamges li:hover: ადრე (
         სიგანე: 46px;
         }
         .beleduzlopamges li:after (
         პოზიცია: აბსოლუტური;
         მარცხენა: 0;
         ზედა: 4px;
         შინაარსი: "";
         სიმაღლე: 0;
         სიგანე: 0;
         საზღვარი: 16px მყარი გამჭვირვალე;
         საზღვარი-მარცხენა-ფერი: #275b88;
         -webkit-გარდამავალი-ხანგრძლივობა: 0.2წმ;
         გადასვლა-ხანგრძლივობა: 0,2წმ;
         }
         .beleduzlopamges li:hover:after (
         ზღვარი მარცხნივ: 6 ​​პიქსელი;
         }

         
         ცენტრის გამი შეიძლება დამოუკიდებლად დამონტაჟდეს საიტის ძირითადი სტილის მიხედვით.

         3 მესამე ვარიანტი:

         

         
         
         • სკრიპტი uCoz-ისთვის
         
         
         • შაბლონები uCoz-ისთვის
         
         
         • დიზაინი ვებსაიტისთვის
         
         
         • ვებსაიტების სტილები
         
         
         • სტილისტიკა CSS-ით
         
         
         
         CSS

         ნიზუალისანელაგ (
         padding:0;
         list-style: არცერთი;
         counter-reset: li;
         }
         .nizualisanelag li (
         პოზიცია: ნათესავი;
         padding: 9px 17px 17px 25px;
         ზღვარი მარცხნივ: 39 პიქსელი;
         გადასვლა-ხანგრძლივობა: 0,2წმ;
         კურსორი: მაჩვენებელი;
         შრიფტის წონა: თამამი;
         ფერი: #343638;
         }
         .nizualisanelag li: ადრე (
         საზღვარი: 3px მყარი გამჭვირვალე;
         ხაზის სიმაღლე: 35px;
         პოზიცია: აბსოლუტური;
         ზედა: 0;
         მარცხენა: -29px;
         სიგანე: 41 px;
         text-align:center;
         შრიფტის ზომა: 14px;
         შრიფტის წონა: თამამი;
         ფერი: #619dce;
         კონტრ-მატება: li;
         შინაარსი: counter(li);
         გადასვლა-ხანგრძლივობა: 0,3წმ;
         
         box-sizing: სასაზღვრო-ყუთი;
         }
         .nizualisanelag li:hover: ადრე (
         ფერი: #337AB7;
         }
         .nizualisanelag li:after (
         პოზიცია: აბსოლუტური;
         ზედა: 0;
         მარცხენა: -29px;
         სიგანე: 41px;
         სიმაღლე: 41px;
         კონტური: 5px მყარი #468bd0;
         საზღვარი-რადიუსი: 50%;
         შინაარსი: "";
         გამჭვირვალობა: 0,5;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: სასაზღვრო ყუთი;
         box-sizing: სასაზღვრო-ყუთი;
         }
         .nizualisanelag li:hover:after (
         ანიმაცია: 500ms ease-in-out 0s bounceIn;
         გამჭვირვალობა: 1;
         }

         @keyframes bounceIn (
         0% {
         გამჭვირვალობა: 0;
         ტრანსფორმაცია: scale3d(.3, .3, .3);
         }
         20% {
         ტრანსფორმაცია: scale3d(1.3, 1.3, 1.3);
         }
         40% {
         ტრანსფორმაცია: scale3d(.9, .9, .9);
         }
         60% {
         გამჭვირვალობა: 1;
         ტრანსფორმაცია: scale3d(1.03, 1.03, 1.03);
         }
         80% {
         ტრანსფორმაცია: scale3d(.97, .97, .97);
         }
         მდე (
         გამჭვირვალობა: 1;
         ტრანსფორმაცია: scale3d(1, 1, 1);
         }
         }

         
         მობრძანდით შესანიშნავი ანიმაციით.

         4 მეოთხე ვარიანტი:

         

         
         
         • პირველი ელემენტი საიტისთვის
         
         
         • კიდევ ერთი ელემენტი საიტისთვის
         
         
         • მესამე ელემენტი საიტისთვის
         
         
         • მეოთხე ელემენტი საიტისთვის
         
         
         • მეხუთე ელემენტი საიტისთვის
         
         
         
         CSS

         ბალიშები:0;
         list-style: არცერთი;
         }
         .კუდეზამუდენ ლი(
         padding: 6px;
         }
         .kudezamuden li: ადრე (
         padding-right: 11px;
         შრიფტის წონა: თამამი;
         ფერი: #4979a0;
         შინაარსი: "\2606";
         გადასვლა-ხანგრძლივობა: 0,4წმ;
         }
         .kudezamuden li:hover: ადრე (
         ფერი: #235e90;
         შინაარსი: "\2605";
         }

         
         წინა ვერსიის მსგავსი, გარდა ცვლილებების ხატისა.

         თუმცა, რადგან სიების რაოდენობა მცირეა, ნება მიეცით ვებმასტერს შექმნას მასტერ სია პორტალზე, სადაც თავად შეუძლია მოაწყოს მეტი, როგორც თავად სურს.

         თუ თქვენ გჭირდებათ ნივთების განთავსება დანომრილ სიაში და არა ბურთულებით, მაშინ საჭიროა HTML შეკვეთა. ეს სია იქმნება ol ტეგის გამოყენებით. ნუმერაცია იწყება ერთით და იზრდება სიის ერთ-ერთი კანქვეშა საფეხურიანი ელემენტით li tag-ით.

         ელემენტი

         (ინგლისურიდან „არამოწესრიგებული სიიდან“) ქმნის მონიშნულ (მოუწესრიგებელ) სიას. როგორც წესი, ელემენტი
         არ არის საჭირო ასეთი სიების შექმნა, მაგრამ სიაში ნივთების თანმიმდევრობის შეცვლა არ ცვლის სიას.

         მონიშნეთ

         მიაღწიეთ ბლოკის ელემენტებს, შემდეგ ჩვენ ავიღებთ მთელ ხელმისაწვდომ სიგანეს, ხოლო სიმაღლე შეინახება იმავე რაოდენობით.

         დანომრილი სიების ელემენტები მითითებულია დამატებითი ტეგით

         • , რომელიც ტექსტის გარდა შეიძლება შეიცავდეს სხვა HTML ელემენტებს (სიებს, სურათებს, სათაურებს, აბზაცებს და ა.შ.). სარეკლამო ნივთებისთვის, მონიშნული სიები ნაჩვენებია ვებ გვერდზე სიის სახით, რომელიც იწყება პატარა შავი ფსონით. როდესაც სიის ელემენტები გამოჩნდება, ბრაუზერი ამატებს მცირე ზღვარს მარცხენა კიდეზე.

           Შენიშვნა:Როგორ

           CSS ძალა, შემდეგ ელემენტები
           • დაცემა და ძალაუფლება.

             პორადა:მარკერის ტიპის შესაცვლელად გამოიყენეთ CSS power list-style-type ან power list-style-image , რომელიც საშუალებას გაძლევთ შეცვალოთ მარკერები სურათებით. დანომრილი სიების შესაქმნელად გამოიყენეთ vikory ტეგი

             .

             Სინტაქსი

             ...
             • ...
             ...

             ტყვეობის ტეგი

             ობოვიაზკოვი.

             ატრიბუტები

             კომპაქტური მოძველებულია HTML5-ში ცვლის შეყვანებს და რიგებს შორის მანძილს. type HTML5 აყენებს მარკერის გარეგნობას სიაში.

             რომელი ელემენტისთვის არის ხელმისაწვდომი? გლობალური ატრიბუტებიі podіi.

             ტანსაცმლის სტილიზაცია

             ბრაუზერების უმეტესობას შეუძლია ელემენტის ჩვენება

             შემდეგი CSS მნიშვნელობებით ინსტრუქციებისთვის:

             Ul (ჩვენება: ბლოკი; სიის სტილის ტიპი: დისკი; ზღვარი ზედა: 1 em; ზღვარი-ქვედა: 1 em; ზღვარი მარცხნივ: 0; ზღვარი-მარჯვნივ: 0; შიგთავსი-მარცხნივ: 40 პიქსელი; )

             ფუნქციები HTML 4.01-სა და HTML5-ს შორის

             კომპაქტური და ტიპის ატრიბუტები არ არის მხარდაჭერილი HTML5-ით.

             ვიკორისტანის კონდახი:

             HTML დარღვევების სია:

             კონდახის HTML:

             თავად სცადე
             • კავა
             • ჩაი
             • კაკაო

             სპეციფიკაციები

             სპეციფიკაცია	სტატუსი
             WHATWG HTML Living Standard (WHATWG)	Ცხოვრების სტანდარტი
             HTML 4.01 (W3C)	რეკომენდაცია
             HTML5 (W3C)	რეკომენდაცია
             HTML 5.1 (W3C)	რეკომენდაცია

             ბრაუზერის მხარდაჭერა

             სცადეთ თავად - მიმართეთ

             როგორ შევქმნათ სია, რომელიც იწყება ერთის ტოლი რიცხვით.