मैं सूची आइटम को क्षैतिज रूप से कैसे व्यवस्थित करूं? उल ली सीएसएस की स्टाइलिंग के स्टाइलिश उदाहरण लिस्ट में उल ओएल ली टैग्स क्या हैं

विवरण

गुण

उलट: इंगित करता है कि सूची में आइटम अवरोही क्रम (आरोही के बजाय) में दिखाई देंगे। संभावित बूलियन विशेषता मान:

        नोट: उलट विशेषता केवल क्रोम और सफारी द्वारा समर्थित है।

        प्रारंभ: सूची में आइटम नंबर शुरू करने के लिए शुरुआती पूर्णांक मान सेट करता है। उदाहरण »प्रकार: सूची आइटम के लिए उपयोग किए जाने वाले मार्कर के प्रकार को निर्धारित करता है:

        • 1 - दशमलव संख्या (1, 2, 3, 4 ...)।
        • - वर्णमाला क्रम में लैटिन अक्षर, ऊपरी मामले में (ए, बी, सी, डी ...)।
        • - वर्णमाला क्रम में लैटिन अक्षर, निचले मामले में (ए, बी, सी, डी ...)।
        • मैं - अपरकेस रोमन अंक (I, II, III, IV ...)।
        • मैं - निचले मामले में रोमन अंक (i, ii, iii, iv ...)।
        उदाहरण "

        टैग

          यह भी वैश्विक विशेषताओं और घटनाओं का समर्थन करता है

          डिफ़ॉल्ट शैली

          ol (प्रदर्शन: ब्लॉक; सूची-शैली-प्रकार: दशमलव; मार्जिन-शीर्ष: 1em; मार्जिन-निचला: 1 सेमी; मार्जिन-बाएं: 0; मार्जिन-दाएं: 0; गद्दी-बाएं: 40px;)

          उदाहरण

          1. कॉफ़ी
          2. चाय
          3. दूध
          1. कॉफ़ी
          2. चाय
          3. दूध

          अंतर केवल इतना है कि यह टैग नंबरिंग सूचियों के लिए सख्ती से बनाया गया है। टैग का नाम अंग्रेजी के संक्षिप्त नाम "ऑर्डर लिस्ट" - क्रमांकित सूची से आता है।

          टैग सिंटैक्स

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            4. ...

            जहाँ प्रकार \u003d "मान" विशेषता निम्नलिखित मान ले सकती है

            • ए - मार्करों को अपरकेस लैटिन अक्षरों (ए, बी, सी ..) के रूप में सेट करता है;
            • a - लोअरकेस लैटिन अक्षरों (a, b, c ..) के रूप में मार्कर सेट करता है;
            • I - बड़े रोमन अंकों (I, II, III, IV ..) के रूप में मार्कर सेट करता है;
            • i - छोटे रोमन अंकों (i, ii, iii, iv ..) के रूप में मार्कर निर्दिष्ट करता है;
            • 1 (डिफ़ॉल्ट) - अरबी अंकों (1, 2, 3 ..) के रूप में मार्कर सेट करता है;

            प्रारंभ \u003d "मूल्य" विशेषता रिपोर्ट का प्रारंभिक मूल्य (प्रारंभिक मूल्य) निर्धारित करती है।

            उलट विशेषता एक उलटी गिनती (यदि आवश्यक हो) निर्दिष्ट करती है।

            टैग

              एक अंतिम टैग के अनिवार्य उपयोग की आवश्यकता है

            एक जोड़ी टैग का उपयोग सूची आइटम बनाने के लिए किया जाता है

          1. ... उद्घाटन और समापन टैग के बीच अलग-अलग शब्द, वाक्यांश, पैराग्राफ, चित्र, कोड के टुकड़े और बहुत कुछ हैं, जो एक बुलेटेड सूची की सामग्री हैं।

            ध्यान दें

            सूची के अंदर, आप अपने स्वयं के खाते को बदल सकते हैं। इसके लिए टैग के लिए एक विशेष विशेषता मान \u003d "" है

          2. जिसे कुछ संख्यात्मक मान सौंपा गया है। उदाहरण के लिए

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            HTML में क्रमांकित सूचियों के उदाहरण (
              )

            उदाहरण 1. लैटिन अक्षरों के रूप में HTML की एक क्रमांकित सूची

            अपरकेस अक्षरों के साथ उदाहरण

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            लोअरकेस अक्षरों के साथ उदाहरण

            1. आइटम # 10
            2. आइटम # 11
            3. आइटम # 12

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            उदाहरण 2. रोमन अक्षरों में क्रमांकित HTML सूची

            अपरकेस अक्षरों के साथ उदाहरण

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            लोअरकेस अक्षरों के साथ उदाहरण

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            उदाहरण 3. गिने एचटीएमएल सूची अलग शुरू की स्थिति

            एक उदाहरण जो प्रारंभ विशेषता की क्षमताओं को दर्शाता है, जो आपको काउंटर के शुरुआती मूल्य को सेट करने की अनुमति देता है।

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3

            उदाहरण 4. गिने HTML सूचियों में खाता बदलना

            नीचे टैग में नए तत्वों को प्रदर्शित करते समय मूल्य विशेषता का उपयोग करते हुए काउंटर मूल्यों को बदलने की क्षमता के साथ एक उदाहरण है

          3. .

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            4. आइटम # 4

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            4. आइटम # 4

            उदाहरण 5. html में प्रतिवर्ती गिने सूची

            नीचे एक रिवर्स क्रमांकित सूची (रिवर्स ऑर्डर में गिनती) का एक उदाहरण है।

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            4. आइटम # 4

            यह पेज पर कैसा दिखता है:

            1. वस्तु 1
            2. आइटम # 2
            3. आइटम # 3
            4. आइटम # 4

            सूचियों को गिना और अनावश्यक किया जा सकता है।

            क्रमांकित सूचियाँ कोड द्वारा आउटपुट होती हैं:

              संख्या के साथ सूची
            1. परिच्छेद 1
            2. बिंदु 2
            3. बिंदु 3

            कोड से आउटपुट सूची नहीं हैं:

              चेक अंक या अन्य प्रतीकों के साथ सूची
            • परिच्छेद 1
            • परिच्छेद 1
            • परिच्छेद 1

            किसी भी सूची में प्रत्येक आइटम एक झूठे टैग में संलग्न है। सभी सूची आइटम एक सामान्य उल या ओएल टैग में लिपटे हुए हैं। इन टैग की शैलियों को स्टाइलशीट में लिखा गया है।

            प्रत्येक टैग के लिए, विशिष्ट दृश्य शैलियों को सौंपा गया है। वे पाठ से संकेत देते हैं।

            एक क्रमांकित सूची के लिए, प्रत्येक आइटम के लिए क्रमांकन शैलियों को निर्धारित किया जाता है।

            दशमलव मान द्वारा मानक अरबी अंकों का वर्णन किया जाता है।

            सूची-शैली-प्रकार: दशमलव; /*अरबी अंक*/

            बुलेटेड सूची के लिए, आप वर्ण शैली - वर्ग या मंडलियाँ निर्दिष्ट करते हैं।

            सूची-शैली-प्रकार: वृत्त; / * मंडलियां * /
            सूची-शैली-प्रकार: वर्ग; / * वर्ग * /

            प्रत्येक मेनू आइटम को एक छवि सौंपी जा सकती है।

            सूची-शैली-छवि: url (छवि के लिए पथ);

            आमतौर पर, टेम्प्लेट में, एक क्रमांकित सूची को सरल संख्याओं के साथ स्वरूपित किया जाता है, और क्रमांकित नहीं किया जाता है - काले वर्गों और मंडलियों के साथ। यह उबाऊ और अनुभवहीन है। चलो इसे ठीक करते हैं।

            ट्वेंटी इलेवन टेम्पलेट में सूची शैलियाँ कहाँ हैं?

            स्टाइलशीट स्टाइल खोलें। / * टेक्स्ट एलिमेंट्स * / नामक सेक्शन खोजें

            मानक कोड इस तरह दिखता है:

            मैं एक क्रमांकित सूची कैसे व्यवस्थित करूं?

            पृष्ठभूमि का उपयोग करके क्रमांकित सूची

            इस अच्छी संख्या वाली सूची डिज़ाइन को देखें।

            पसंद? चलो इसे फिर से करते हैं।

            Ol टैग के लिए स्टाइल खोजें। इसमें नए गुण जोड़ें।

            ओल (गद्दी: 0px 0 0 20px; मार्जिन: 0.5em 0 1.571em 1.9em; रंग: # 2EEE2E; सूची-शैली-प्रकार: कोई नहीं; फ़ॉन्ट: 15px / 17px Verdana, एरियल, हेलिका, sans-serif; z-index; : 2; काउंटर-रीसेट: बिंदु;) ओल ली (मार्जिन-निचला: 4 पीएक्स; लाइन-ऊंचाई: 1.6; रंग: # 2 ई 2 ई 2 ई; स्थिति: रिश्तेदार;) ओएल ली: इससे पहले (मार्जिन-तल: 4 पीएक्स; काउंटर-इंकमेंट: बिंदु 1; लाइन-ऊँचाई: 1.6; ऊँचाई: जीपीएक्स; मार्जिन-लेफ्ट: -36 पीएक्स; लेफ्ट: 0 पीएक्स; चौड़ाई: जीपीएक्स; मार्जिन-टॉप: 1 पीएक्स; पृष्ठभूमि: # बीडीसी 3 सी 7; सामग्री: काउंटर (बिंदु); पाठ-संरेखण: केंद्र; स्थिति: पूर्ण; फ़ॉन्ट-वजन: बोल्ड;)

            आपको यह समझने के लिए कि आपके डिज़ाइन के लिए आपको क्या बदलने की आवश्यकता है, आइए इस कोड को अलमारियों के नीचे रखें।

            सूची-शैली-प्रकार: कोई नहीं; - मानक अंकों का आउटपुट अक्षम करता है
            काउंटर-रीसेट: बिंदु; - नंबरिंग काउंटर के लिए एक चर सेट करता है
            स्थिति: रिश्तेदार; - अंक खुद के पास स्थान

            पहले ol ली टैग के लिए एक छद्म तत्व है। निम्नलिखित शैलियों है:
            सामग्री: काउंटर (बिंदु); - एक चर का मूल्य प्रदर्शित करता है
            प्रति-वृद्धि: बिंदु 1; - 1 से काउंटर बढ़ाता है
            स्थिति: निरपेक्ष;
            पृष्ठभूमि: # बीडीसी 3 सी 7; - संख्या के लिए पृष्ठभूमि (पृष्ठभूमि रंग या एक सुंदर आइकन के साथ सेट की जा सकती है
            मार्जिन - मार्जिन
            गद्दी - गद्दी
            रंग - तत्व पाठ रंग
            पृष्ठभूमि - बैकग्राउंड
            text-align - पाठ संरेखण
            फ़ॉन्ट-भार - फ़ॉन्ट का वजन (वजन)

            अपनी शैलियों में, आप किसी भी रंग, संरेखण, फ़ॉन्ट आकार और संकेत सेट कर सकते हैं।

            प्रत्येक आइटम के लिए एक अद्वितीय छवि के साथ क्रमांकित सूची

            महिलाओं के लिए एक साइट में कुछ बहुत ही आकर्षक संख्याएँ हैं।

            इसे कैसे लागू किया जाता है? आइए निम्नलिखित कोड पर एक नज़र डालें:

            / * पहला नंबर * / ol ली: पहला बच्चा (सूची-शैली-छवि: url (नंबर 1 के साथ छवि का पथ);) / * दूसरा नंबर * / ol li: nth-child (2n) (सूची-शैली- छवि: url (नंबर 2 के साथ छवि का पथ);) / * तीसरा नंबर * / ol li: nth-child (3n) (सूची-शैली-छवि: url (नंबर 3 के साथ छवि का पथ);) / * चौथा नंबर; * (ol li: nth-child (4n) (सूची-शैली-चित्र: url (संख्या 4 के साथ चित्र का पथ);) / * इसके अलावा, हम निम्नलिखित आइटम नंबरों के लिए केवल समान ही लिखते हैं * /

            ऐसी संख्या वाली सूची के कोड में, आपको सभी आइटम नंबरों को सूचीबद्ध करने और उनमें से प्रत्येक के लिए एक अद्वितीय आइकन निर्दिष्ट करने की आवश्यकता है।

            यदि आप उन लेखों की सूचियों में हैं जिनका उपयोग आप 20 नंबर की वस्तुओं तक करते हैं, तो आपको nth-child (An) छद्म श्रेणी को 20 बार पंजीकृत करना होगा। ताकि शैलियों में अंतिम nth-child (20n) छद्म वर्ग हो।

            स्टाइलशीट में उन पंक्तियों का पता लगाएं, जो क्रमांकित सूची (ऑल ली टैग) की उपस्थिति का वर्णन करती हैं।

            इसमें पहला-बच्चा छद्म वर्ग जोड़ें। इसे एक बार कॉपी और पेस्ट करें, फिर इस प्रॉपर्टी को nth-child (An) में बदलें और जितने चाहें उतने नंबरों को कॉपी करें। आइटम नंबर जोड़ें।

            प्रत्येक संख्या के लिए, अपने स्वयं के अनूठे आइकन के साथ एक सूची-शैली-छवि गुण जोड़ें।

            यदि साइट पर मौजूद आइकन बिंदुओं से बहुत दूर स्थित हैं या उन्हें ओवरलैप करते हैं, तो आपको डिजिटल आइकन या बिंदुओं के पाठ के संरेखण और संकेत को संपादित करने की आवश्यकता है।

            बुलेटेड (अनावश्यक) सूची की व्यवस्था कैसे करें?

            वैकल्पिक आइकनों के साथ बुलेटेड सूची उल ली

            मुझे यह बुलेटेड सूची बहुत पसंद आई।

            उल (पैडिंग: 11 पीएक्स 0 5 पीएक्स 0;) उल ली (पैडिंग-लेफ्ट: 32 पीएक्स; मार्जिन-बॉटम: 10 पीएक्स; फॉन्ट: सामान्य 15 पीएक्स वर्दाना, संस-सेरिफ़; रंग: # 2 ई 2 ई 2; लाइन-ऊँचाई: 1.6; सीमा-निचला: 1px धराशायी #ccc; पैडिंग-बॉटम: 10px;) ul li: इससे पहले (सामग्री: ""; स्थिति: निरपेक्ष; चौड़ाई: 27px; ऊँचाई: जीपीएक्स; मार्जिन-लेफ्ट: -35px; मार्जिन-टॉप: -2 पीएक्स; बैकग्राउंड; url ("images / sprite.jpg") 0px 2px no-repeat; list-style-type: Circle;) ul li: nth-child (2n): इससे पहले (सामग्री: ""; स्थिति: निरपेक्ष; चौड़ाई: 27px; ऊंचाई: 43px; मार्जिन-लेफ्ट: -35px; मार्जिन-टॉप: -2px; बैकग्राउंड: url ("images / sprite.jpg") 0px -17px no-repeat; लिस्ट-स्टाइल-टाइप: सर्कल;)

            मानक सूची-शैली-प्रकार शैली के बजाय, आप "पथ टू आइकन" संपत्ति - सूची-शैली-छवि: url असाइन कर सकते हैं। लेकिन फिर आपको साइट के किनारों से बाहरी बाएं मार्जिन को पंजीकृत करने की आवश्यकता है - इसके बिना, आइकन प्रदर्शित नहीं किए जाएंगे, वे सामग्री क्षेत्र से परे जाएंगे।

            प्रयोग के लिए, आप संकेत दे सकते हैं:

            उल ली (सूची-शैली-छवि: url (छवियां / रेडियो। Png); मार्जिन-बाएं: 30px;)

            आइकन का विकल्प nth-child (An) प्रॉपर्टी के साथ सेट किया जा सकता है। उपरोक्त उदाहरण छद्म तत्व से पहले का उपयोग करता है।

            कोड में एक छद्म वर्ग nth-child (2n) है। इसका मान है 2. यह पता चलता है कि प्रत्येक आइटम का एक अलग आइकन है। यदि 2n के बजाय आप 2n + 1 लिखते हैं, तो दूसरा आइकन विषम बिंदुओं पर गिर जाएगा।

            आप सूची में प्रत्येक आइटम के लिए एक अंडरस्कोर सेट कर सकते हैं। दिखाए गए उदाहरण में, आइटम को बिंदीदार रेखा के साथ रेखांकित किया गया है।

            इसके अलावा, प्रत्येक आइटम को फ्रेम, पृष्ठभूमि, आइकन सौंपा जा सकता है। बस बहुत चालाक मत बनो। हमारा काम फैंसी डिजाइन के साथ हर किसी को हराना नहीं है, बल्कि सामग्री धारणा की गुणवत्ता में सुधार करना है।

            पृष्ठ पर अलग-अलग डिज़ाइन के साथ कई सूचियाँ कैसे प्रदर्शित करें?

            कभी-कभी आपको विभिन्न शैलियों के साथ कई सूचियों को रखने की आवश्यकता होती है।

            यदि आप सामान्य शैलियों को असाइन करते हैं, तो उसी उपस्थिति को सभी सूचियों को सौंपा जाएगा। यदि आप ol या ul टैग के लिए एक अलग आईडी असाइन करते हैं और इसे HTML लेख संपादन मोड में पंजीकृत करते हैं, तो विभिन्न सूचियाँ प्रदर्शित की जा सकती हैं। खैर, इस आईडी के लिए स्टाइलशीट में, आपको अलग-अलग शैलियों को पंजीकृत करने की आवश्यकता है।

            उदाहरण के लिए, यहां सामग्री के लिए एक अच्छा लेआउट है:

            HTML में, आप इस तरह सूची लिखते हैं:

              सामग्री
            1. परिच्छेद 1
            2. बिंदु 2
            3. बिंदु 3

            CSS में, आप इस तरह की शैली लिखेंगे:

            Ol # sod (पैडिंग: 0px 20px 10px 51px; मार्जिन: 0.5em 0 0em 1em; रंग: # 2E2E2E; सूची-शैली-प्रकार: कोई नहीं; पृष्ठभूमि: # f1f4f5; बॉर्डर-बाएं: # BDC3C7 4px ठोस; प्रदर्शन: इनलाइन; ब्लॉक;) ol # sod li () ol # sod li: इससे पहले (फ़ॉन्ट-वजन: सामान्य! महत्वपूर्ण!

            नई शैली मुख्य ol टैग से भिन्न होती है: पृष्ठभूमि, प्रदर्शन शैली, सामग्री के बाईं ओर रेखा।

            पाठ में विभिन्न डिज़ाइन की कई सूचियों का उपयोग करके, आप जानकारी की प्रस्तुति को और भी रोचक बना देंगे। किसी भी आइटम को सूचीबद्ध करते समय, आप कुछ आइकन सेट कर सकते हैं, और जब कार्यों को सूचीबद्ध कर सकते हैं, तो अन्य। यहां, डिजाइन केवल आपकी कल्पना द्वारा सीमित है।

            ये तरीके मेनू आइटम, श्रेणियों और साइट के किसी भी अन्य तत्वों के डिजाइन में भी लागू होते हैं।

            मैं सामग्री सूची में एंकर लिंक कैसे बना सकता हूं?

            उन्हें HTML कोड में कैसे लिखें? कोड का एक टुकड़ा लिंक के एंकर को फ़्रेम करता है, और कोड का एक और टुकड़ा उस जगह के बगल में रखा जाता है, जहाँ हमें लिंक पर क्लिक करने पर उतारने की आवश्यकता होती है।

              सामग्री
            1. शीर्षक 1
            2. शीर्षक २
            3. शीर्षक ३

            और लेख के पाठ में आपको इस तरह लिखना होगा:

            शीर्षक 1 ... शीर्षक 2 ... शीर्षक 3 ...

            शायद अधिक अनुभवी वेबमास्टर मुझे किसी चीज़ में सुधारेंगे। मैं सिर्फ वही सुझाता हूं जो मैंने खुद अभ्यास में आजमाया है।

            यदि आपके पास अभी भी कोई प्रश्न है, तो मुझे टिप्पणी में उन्हें देखकर खुशी होगी।

            आयुवा वेरोनिका।

            शायद आप भी इसमें रुचि लेंगे:

            एचटीएमएल टैग

            अर्थ और अनुप्रयोग

            एक क्रमांकित (आदेशित) सूची उन वस्तुओं के लिए है जो एक विशिष्ट क्रम में अनुसरण करते हैं। एक संख्या सूची एक टैग के साथ शुरू होती है

              (अंग्रेजी के लिए कम आदेशित सूचि - आदेशित सूचि)। प्रत्येक सूची आइटम एक टैग के साथ शुरू होती है
            1. (सामग्री सूचीबद्ध करें)।

              ब्राउज़र का समर्थन

              गुण
              ओपेरा

              iexplorer

              धार
              प्रारंभ, टाइप करेंहाँहाँहाँहाँहाँहाँ
              औंधाहाँहाँहाँहाँनहींनहीं

              गुण

              गुणमूल्यविवरण
              सघनसघनHTML5 में समर्थित नहीं है।
              इंगित करता है कि सूची सामान्य आकार (रेखा-ऊंचाई: 80%) से छोटी होनी चाहिए।
              इस विशेषता के बजाय CSS का उपयोग करें।
              औंधाइंगित करता है कि क्रमांकित (क्रमबद्ध) सूची में क्रम अवरोही होना चाहिए। विशेषता इंटरनेट एक्सप्लोरर और एज ब्राउज़रों द्वारा समर्थित नहीं है।
              शुरूसंख्याएक आदेशित (आदेशित) सूची का प्रारंभिक मूल्य निर्धारित करता है। मान पूर्णांक होना चाहिए, नकारात्मक मानों की अनुमति है। जब अक्षरों (प्रकार \u003d "ए" और टाइप \u003d "ए") के साथ उपयोग किया जाता है, तो विशेषता मान में निर्दिष्ट संख्या वर्णमाला में पत्र की क्रमिक संख्या होती है। उदाहरण के लिए, प्रारंभ \u003d "4" पत्र से मेल खाएगा 'डी' और सूची इसके साथ शुरू होगी। मान प्रारंभ \u003d "27" का उपयोग करते समय, काउंटर शून्य पर रीसेट हो जाता है, और सूची दो अंकों ("27" \u003d "एए", "28" \u003d "एबी", "29" \u003d "एसी" ...) बन जाती है।
              प्रकार1 (चूक)
              एक बड़े)
              (लोअरकेस)
              मैं (रोमन बड़ा)
              मैं (रोमन छोटा)
              एक क्रमांकित (आदेशित) सूची बनाने में प्रयुक्त बुलेट के प्रकार को निर्धारित करता है।

              उपयोग उदाहरण

              टैग का उपयोग करने का उदाहरण <ol> <span>
              1. पहला बिंदु दूसरा बिंदु
              2. तीसरा बिंदु
              3. यह पृष्ठ पर इस तरह दिखेगा:

                1. पहला बिंदु।
                2. दूसरा बिंदु।
                3. तीसरा बिंदु।

                यदि आप चाहते हैं कि सूची एक विशिष्ट संख्या से शुरू हो (1 से नहीं), तो आपको टैग के लिए प्रारंभ विशेषता निर्दिष्ट करनी होगी

                  .

                  उदाहरण के लिए:

                    एक और दिलचस्प विशेषता प्रकार है, जो आपको अल्फ़ाबेटिक नंबरिंग ("ए" - बड़े, "ए - लोअरकेस) या रोमन संख्याओं (" आई "- ऊपरी मामले में" आई "- निचले मामले में) को निर्दिष्ट करने की अनुमति देता है।

                    एक उदाहरण पर विचार करें जो प्रकार विशेषता (डिफ़ॉल्ट के अलावा) के लिए सभी संभावित मान दिखाता है:

                    HTML टैग के प्रकार विशेषता का उपयोग करने का एक उदाहरण<оl>
                      >
                    1. पहला बिंदु दूसरा बिंदु
                    2. तीसरा बिंदु
                      1. >
                      2. पहला बिंदु दूसरा बिंदु
                      3. तीसरा बिंदु
                        1. >
                        2. पहला बिंदु दूसरा बिंदु
                        3. तीसरा बिंदु
                          1. >
                          2. पहला बिंदु दूसरा बिंदु
                          3. तीसरा बिंदु
                          4. मैं इस तथ्य पर आपका ध्यान आकर्षित करता हूं कि इसे क्रमांकित (क्रमबद्ध) सूचियों को अन्य क्रमांकित सूचियों (किसी सूची आइटम के अंदर) में बनाने की अनुमति है

                          5. ):

                            एक गिने सूची का एक उदाहरण एक अन्य गिने सूची में निहित है <span>
                            1. पहला बिंदु
                              1. पहला बिंदु दूसरा बिंदु
                              2. तीसरा बिंदु
                              3. दूसरा बिंदु
                              4. तीसरा बिंदु
                              5. यह पृष्ठ पर इस तरह दिखेगा।

                                HTML सूचियाँ सूचनाओं के संबंधित टुकड़ों को एक साथ रखने के लिए उपयोग किया जाता है। तीन प्रकार की सूचियाँ हैं:

                                बुलेटेड सूची

                                  - सूची के प्रत्येक तत्व
                                • एक मार्कर के साथ चिह्नित,
                                  क्रमांकित सूची
                                    - सूची के प्रत्येक तत्व
                                  1. एक नंबर के साथ चिह्नित,
                                    परिभाषा सूची - - शब्द जोड़े के होते हैं
                                    परिभाषा।

                                    प्रत्येक सूची एक कंटेनर है जिसमें सूची आइटम या शब्द-परिभाषा जोड़े शामिल हैं। सूची आइटम ब्लॉक तत्वों की तरह व्यवहार करते हैं, एक दूसरे के नीचे स्टैकिंग करते हैं और कंटेनर ब्लॉक की पूरी चौड़ाई लेते हैं। प्रत्येक सूची आइटम में किनारे पर एक अतिरिक्त बॉक्स होता है, जो लेआउट में शामिल नहीं होता है।

                                    HTML सूचियाँ बनाना

                                    1. बुलेटेड सूची

                                    बुलेटेड सूची एक अनियंत्रित सूची है (अंग्रेजी अनियंत्रित सूची से)... एक युग्मित टैग का उपयोग करके बनाया गया

                                    ... सूची आइटम का मार्कर एक लेबल है, उदाहरण के लिए, एक भरा हुआ सर्कल।

                                    ब्राउज़र डिफ़ॉल्ट रूप से सूची बॉक्स में निम्नलिखित फ़ॉर्मेटिंग जोड़ते हैं:

                                    प्रत्येक सूची आइटम एक जोड़ी टैग का उपयोग करके बनाया गया है

                                  2. (अंग्रेजी सूची आइटम से).
                                    उपलब्ध।
                                  • माइक्रोसॉफ्ट
                                  • गूगल
                                  • सेब
                                  चित्र: 1. बुलेटेड सूची

                                  2. क्रमांकित सूची

                                  क्रमांकित सूची एक युग्मित टैग का उपयोग करके बनाया गया है। तत्व का उपयोग करके प्रत्येक सूची आइटम भी बनाया जाता है

                                • ... ब्राउज़र तत्वों को स्वचालित रूप से क्रम में रखता है, और यदि आप ऐसी सूची के एक या अधिक तत्वों को हटाते हैं, तो बाकी संख्याएँ स्वचालित रूप से पुनर्गणित हो जाएंगी।

                                  सूची बॉक्स में डिफ़ॉल्ट ब्राउज़र शैलियाँ भी हैं:

                                • मान विशेषता उपलब्ध है, जो आपको चयनित सूची आइटम के लिए डिफ़ॉल्ट संख्या को बदलने की अनुमति देता है। उदाहरण के लिए, यदि आपके द्वारा निर्धारित सूची में पहले आइटम के लिए
                                • , फिर बाकी नंबरिंग नए मूल्य के सापेक्ष पुनर्गणना की जाएगी।

                                  टैग के लिए

                                    निम्नलिखित विशेषताएँ उपलब्ध हैं:

                                    तालिका 1. टैग विशेषताएँ
                                    गुण विवरण, स्वीकृत मूल्य
                                    औंधा उलट विशेषता सूची को रिवर्स ऑर्डर में प्रकट करती है (उदाहरण के लिए, 9, 8, 7 ...)।
                                    शुरू प्रारंभ विशेषता प्रारंभिक मूल्य सेट करती है जिसमें से नंबरिंग शुरू होगी, उदाहरण के लिए, निर्माण
                                      पहले आइटम को एक सीरियल नंबर "10" सौंपा जाएगा। आप एक ही समय में नंबरिंग के प्रकार को भी निर्दिष्ट कर सकते हैं, उदाहरण के लिए,
                                        .
                                    प्रकार प्रकार विशेषता सूची में अक्षरों (संख्या या संख्या के रूप में) का उपयोग करने के लिए मार्कर के प्रकार को निर्दिष्ट करती है। स्वीकृत मान:
                                    1 - डिफ़ॉल्ट मान, दशमलव क्रमांकन।
                                    ए - सूची को वर्णमाला क्रम में, कैपिटल अक्षर (ए, बी, सी, डी)।
                                    a - वर्णमाला क्रम में सूची को क्रमबद्ध करना, अक्षरों को कम करना (ए, बी, सी, डी)।
                                    I - रोमन पूंजी अंकों में संख्या (I, II, III, IV)।
                                    i - रोमन लोअरकेस अंको में क्रमांकन (i, ii, iii, iv)।
                                    1. माइक्रोसॉफ्ट
                                    2. गूगल
                                    3. सेब
                                    चित्र: 2. क्रमांकित सूची

                                    3. परिभाषाओं की सूची

                                    परिभाषा सूचियाँ टैग का उपयोग करके बनाए गए हैं

                                    ... टैग का उपयोग एक शब्द जोड़ने के लिए किया जाता है
                                    , और एक परिभाषा डालने के लिए - टैग
                                    .

                                    परिभाषा सूची बॉक्स में निम्नलिखित डिफ़ॉल्ट ब्राउज़र शैलियाँ हैं:

                                    टैग के लिए

                                    ,
                                    तथा
                                    उपलब्ध।

                                    निर्माता:
                                    पेट्र तोचिलिन
                                    कास्ट:
                                    एंड्री गेदुलेआन
                                    एलेक्सी गवरिलोव
                                    विटाली गोगुनस्की
                                    मरिया कोज़ेवनिकोवा

                                    चित्र: 3. परिभाषाओं की सूची

                                    4. नेस्टेड सूची

                                    अक्सर, सरल सूचियों की क्षमताएं पर्याप्त नहीं होती हैं, उदाहरण के लिए, सामग्री की तालिका बनाते समय, आप इसके बिना नहीं कर सकते नेस्टेड आइटम... नेस्टेड सूची के लिए मार्कअप निम्नानुसार होगा:

                                    • परिच्छेद 1।
                                    • बिंदु 2।
                                      • उपखंड 2.1।
                                      • उपखंड 2.2।
                                        • उपखंड 2.2.1।
                                        • उपखंड 2.2.2।
                                      • उपखंड 2.3।
                                    • बिंदु 3।

                                    चित्र: 4. नेस्टेड सूची

                                    5. बहुस्तरीय संख्याबद्ध सूची

                                    एक स्तरित सूची का उपयोग सूची के आइटम को अलग-अलग सूचकांकों के साथ विभिन्न स्तरों पर प्रदर्शित करने के लिए किया जाता है। एक बहुस्तरीय गिने सूची के लिए मार्कअप निम्नानुसार होगा:

                                    1. अनुच्छेद
                                    2. अनुच्छेद
                                      1. अनुच्छेद
                                      2. अनुच्छेद
                                      3. अनुच्छेद
                                        1. अनुच्छेद
                                        2. अनुच्छेद
                                        3. अनुच्छेद
                                      4. अनुच्छेद
                                    3. अनुच्छेद
                                    4. अनुच्छेद

                                    यह डिफ़ॉल्ट मार्कअप प्रत्येक नेस्टेड सूची के लिए एक के साथ एक नई नंबरिंग शुरू करेगा। नेस्टेड नंबरिंग बनाने के लिए, आपको निम्नलिखित गुणों का उपयोग करने की आवश्यकता है:
                                    काउंटर-रीसेट एक या अधिक काउंटरों को रीसेट करता है, रीसेट करने के लिए एक मूल्य सेट करता है;
                                    काउंटर-इंक्रीमेंट काउंटर इंक्रीमेंट वैल्यू निर्दिष्ट करता है, अर्थात बाद के प्रत्येक आइटम को किस चरण में गिना जाएगा;
                                    सामग्री - उत्पन्न सामग्री, इस मामले में यह सूची में प्रत्येक आइटम से पहले संख्या प्रदर्शित करने के लिए जिम्मेदार है।

                                    ओल (/ * मानक नंबरिंग को हटा दें * / सूची-शैली: कोई नहीं; / * काउंटर को पहचानें और इसे एक नाम दें ली। काउंटर मान निर्दिष्ट नहीं है - डिफ़ॉल्ट रूप से यह 0 * / काउंटर-रीसेट: ली;) ली है: पहले (/ * हम गिने जाने वाले तत्व को परिभाषित करते हैं - li। छद्म तत्व से पहले निर्दिष्ट करता है कि सामग्री संपत्ति का उपयोग करके डाली गई सामग्री को सूची आइटम से पहले रखा जाएगा। यह काउंटर वृद्धि मूल्य (डिफ़ॉल्ट 1) है। * / काउंटर-वृद्धि: ली; / * सामग्री की संपत्ति सूची की संख्या प्रदर्शित करती है। आइटम () का अर्थ है कि उत्पन्न पाठ उस नाम के साथ सभी काउंटरों का मूल्य है। उद्धृत अवधि संख्याओं के बीच एक अलग अवधि जोड़ती है, और प्रत्येक सूची की सामग्री से पहले एक स्थान के साथ एक अवधि जोड़ी जाती है * / सामग्री: काउंटर (ली, "" ")";);)
                                    चित्र: 5. बहुस्तरीय संख्याबद्ध सूची