इस पेंचकस में हम डील सेक्शन में खुदाई करेंगे। सौदा अनुभाग अनिवार्य रूप से "विज्ञापनों की दीवार" है। यह उस साइट का एक क्षेत्र है जहां लोगों को खुद को नेविगेट करना होगा, इसलिए मुझे लोगों के विचारों को कम करने वाले विज्ञापनों के बारे में चिंता नहीं है। इसके अलावा, प्रत्येक विज्ञापन पर इस पर छूट है और वह उत्पाद है जिसे मैं व्यक्तिगत रूप से सुझाता हूं, इसलिए कोई भी छायादार नेस नहीं चल रहा है।
हमारे पास पहले से ही हेडर है। हमारे पास पहले से ही पृष्ठ पर थूकने की सामग्री है जिसे हमें स्टाइल करने की आवश्यकता है। यह कुछ सीएसएस लिखने में सही लॉन्च करने के लिए सही जगह है।
इस पृष्ठ के बारे में अच्छा यह है कि हम अपने पैर की उंगलियों को उत्तरदायी विज्ञापन की दुनिया में डुबो सकते हैं। विज्ञापन की दुनिया वास्तव में उत्तरदायी डिजाइन के साथ नहीं पकड़ी गई है। विज्ञापन अक्सर निश्चित आकार के होते हैं और उनका आकार बदलना कठिन या सीधे निषिद्ध होता है। इस साइट पर ऐसा नहीं है क्योंकि मैं विज्ञापन खुद बनाता हूं।
प्रत्येक विज्ञापन एक पृष्ठभूमि छवि, एक लोगो छवि और पाठ के बिट्स से बनाया गया है। एक background-imageसाधन का उपयोग करके हम इसके किनारों को काट सकते हैं और यह ठीक है। हम लोगो का कोई पाठ या महत्वपूर्ण भाग नहीं खोते हैं।
इस "दीवार" का लेआउट दीवार जैसा =) होगा। हमारे पास व्यापक डेस्कटॉप आकारों में तीन कॉलम होंगे और फिर दो कॉलम नीचे जाएंगे और फिर अंततः फोन-ईश आकारों पर एक कॉलम होगा। हम सभी विज्ञापन फ्लोट करते हैं और min-heightउन सभी को समान ऊंचाई पर रखने के लिए आवेदन करते हैं । विभिन्न मीडिया क्वेरी पर, हम केवल विज्ञापनों की चौड़ाई को समायोजित करते हैं और बदलते हैं कि उनमें से कौन सा सही मार्जिन है और जो (के माध्यम से :nth-child) नहीं है।
पिछले छोर पर, प्रत्येक विज्ञापन वर्डप्रेस में एक कस्टम फ़ील्ड है। जब हम उन्हें पृष्ठ पर आउटपुट करते हैं तो हम उनके लिए पहली क्वेरी देते हैं और उन्हें एक सरणी में डालते हैं। फिर उस सरणी को फेर दें। फिर अंत में उन्हें बाहर गूंज। शीर्ष विज्ञापन होने के नाते सभी को एक अच्छा शॉट दे सकते हैं!