आई कैचिंग लिस्ट बनाने की सीएसएस

• अप्रैल 26, 2024

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

शीर्षक टैग और सूचियों का उपयोग लोगों को आपकी वेबसाइट की प्राथमिक सामग्री को आसानी से देखने की अनुमति देने का एक शानदार तरीका है। यदि उन्हें लगता है कि सूचियां और सबहडिंग दिलचस्प हैं, तो अधिक संभावना है कि वे आपकी साइट पर बने रहेंगे। यह निश्चित रूप से, "बाउंस" दरों को कम करता है और इंजन में आपकी वेबसाइट की विश्वसनीयता और रैंकिंग में सुधार करने में मदद करता है। जो कुछ भी पठनीयता में सुधार करता है, वह आँखों को स्किम करना आसान बनाता है, हमेशा एक वेबसाइट को फायदा होगा। एक महान डिजाइन हमेशा पठनीयता को ध्यान में रखता है।

कस्टम बुलेट (मार्कर) के साथ स्टाइलिश सूची बनाने के लिए सीएसएस एक आसान और बहुत प्रभावी तरीका है। आप विभिन्न आकारों या सरल कस्टम ग्राफिक्स को शामिल कर सकते हैं जो आपकी वेबसाइट के लोगो, रंगों या थीम में टाई करते हैं। उदाहरण के लिए, एक भूत पर्यटन वेबसाइट पर, मैंने एक छोटा भूत आइकन बनाया, जिसका उपयोग साइड नेविगेशन बार में और मुख्य पृष्ठ पर अनियोजित सूची आइटम पर किया गया था। यह सरल था, लेकिन बहुत प्यारा और साइटों की थीम में बंधा हुआ था, जिससे उन पृष्ठ तत्व बाहर हो गए।

किसी सूची में महत्वपूर्ण सामग्री से अन्य बार गोलियां विचलित हो सकती हैं। उस स्थिति में, स्वचालित रूप से उत्पन्न मार्कर को हटाने के लिए "कोई नहीं" की एक सूची शैली संपत्ति का उपयोग किया जा सकता है।

सूची शैली गुण

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

मार्कर के रूप में अपनी स्वयं की छवि को निर्दिष्ट करने के लिए, सूची-शैली-छवि संपत्ति का उपयोग इस प्रकार करें:

उल {सूची-शैली-चित्र: url (Imagename.jpg);
सूची-शैली-स्थिति: बाहर;
}

Url स्टाइलशीट के सापेक्ष है और उस फ़ोल्डर को इंगित करना चाहिए जहां आपकी छवि है। इस स्थिति में, छवि css और html फ़ाइल के समान फ़ोल्डर में होगी। यदि आप अपनी छवियों को एक अलग फ़ोल्डर में रखते हैं, तो आप उसे भी शामिल करेंगे: url (चित्र / इमेजेनम.जेपीजी)

मार्कर की स्थिति

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

आशुलिपि तकनीक

CSS का उपयोग करके किसी सूची को प्रारूपित करने का एक और त्वरित तरीका शॉर्टहैंड तकनीक है। इस विधि के साथ, सभी सूची गुण एक ही संपत्ति में निर्दिष्ट हैं:

उल
{
सूची-शैली: सर्कल url ("image.gif");
}

आशुलिपि विधि में, सभी मान निर्दिष्ट क्रम में दिखाई देने चाहिए:

सूची-शैली-प्रकार
सूची-शैली-स्थिति (अंदर, बाहर)
सूची-शैली-छवि

इससे कोई फर्क नहीं पड़ता कि आप कोई मूल्य छोड़ते हैं, इसलिए जब तक कि दूसरे सही क्रम में रहें।

कस्टम सूचियाँ बहुत उपयोगी हैं और CSS उन्हें प्राप्त करना आसान बनाता है। सरल विवरण औसत वेबसाइटों को शीर्ष प्रदर्शन करने वाली वेबसाइटों में बदल देते हैं।

वीडियो निर्देश: अब आएगा असली मजा Antenna tv Android एप्लीकेशन के जरिए पूरी दुनिया के चैनल देखने का (अप्रैल 2024).