इस वीडियो में हम खरोंच से इस फोटोग्राफर के पोर्टफोलियो साइट बनाने के लिए जा रहे हैं।
और आमतौर पर मैं अपने दम पर ऐसा करते हैं और फिर आप एक समाधान वीडियो इस निम्नलिखित देने के लिए प्रयास करने के लिए आप से पूछना होगा।
हालांकि इस बार यह एक विचार कोड के साथ है।
इसलिए मैं आप के साथ कोड के लिए प्रयास करने के लिए और अगर आप पसंद करते हैं आप इसे एक बार के माध्यम से कोड अगले समय के साथ देखते हैं और फिर कर सकते हैं करना चाहते हैं।
लेकिन यहाँ लक्ष्य है कि हम यह एक साथ करने जा रहे हैं और वहाँ दो अन्य बातें हम इस से बाहर निकलना चाहते हैं कि कर रहे हैं।
पहले एक वहाँ एक नया संपत्ति है मैं नाव बुलाया दिखाने के लिए जा रहा हूँ और दूसरी बात मैं तो बस आप थोड़ा सा अनुभव के निर्माण के लिए कुछ है कि आप में से कुछ हद तक गर्व किया जा सकता प्राप्त करना चाहते है।
यह एक छोटा सा साधारण चीजें हैं जो सिर्फ सच उज्ज्वल भयंकर रंग है कि हम इतनी दूर किया है कर रहे हैं की तुलना में कुछ बेहतर लग रहा है।
तो यह वास्तव में एक न्यूनतम फोटो ब्लॉग है कि हम क्या करने जा रहे है।
तो चलो शुरू हो जाओ।
उदात्त खोलो।
मुझे लगता है कि HMO फोटो ग्रिड नामक एक एकल फाइल की है।
मैं पहली बार आप छवि या कुछ और है कि हम साथ काम कर रहे हैं दिखाने के लिए जा रहा हूँ।
तो इन छवियों को नौ छवियों तीन अलग-अलग फोटोग्राफरों कि मैं फ़्लिकर पर पाया से तीन छवियों प्रत्येक रहे हैं।
सभी तस्वीरें क्रिएटिव कॉमन्स के अंतर्गत लाइसेंस प्राप्त कर रहे हैं।
आप यहाँ लाइसेंस कर सकते हैं।
तो इससे पहले कि हम इन छवि आप यूआरएल मैं वास्तव में उनमें से छुटकारा पाने के लिए जा रहा हूँ और मैं फोटो ब्लॉग में मेरी आयु वर्ग के कंकाल विज्ञापन दीन में जोड़ने के लिए जा रहा हूँ और मैं आप ऐसा डॉन एक त्वरित प्रदर्शन करने जा रहा हूँ के साथ कुछ भी 'टी जब मैं एक है कि हैलो कहते हैं, और एक है कि अलविदा कहते divs को जोड़ने के इस भाग के साथ-साथ कोड के लिए है और मैं उन्हें बचाने के लिए जा रहा हूँ और फिर मैं अपने स्टाइलशीट जिसमें मैं की तस्वीरें बुला रहा हूँ जोड़ने के लिए जा रहा हूँ एसएस और फिर यहाँ पर मैं अपने divs शैली के लिए जा रहा हूँ।
इसलिए मैं वास्तव में उन्हें एक आई.डी. देने जा रहा हूँ बस इसे एक कहते हैं।
और फिर यह सिर्फ यहाँ पर एक करने के लिए कुछ और फिर प्रदर्शित करने के लिए है मैं एक और दो का चयन करने के लिए जा रहा हूँ और सभी मैं क्या करने जा रहा हूँ बस उन्हें एक अलग पृष्ठभूमि रंग लाल और फिर पृष्ठभूमि रंग बैंगनी दे रहा है और उसके बाद मैं हूँ उन दोनों के सभी divs और 100 पिक्सल के एक चौड़ाई देने के लिए जा रहा है।
इसलिए मैं यह ब्राउज़र में खोलने के लिए जब मैं यह कर।
हम दो divs एक के बाद एक लोगों की है।
याद रखें कि अगर हम निरीक्षण किया वे।
वे मूल रूप से स्थापित कर रहे हैं, ताकि वे अपनी लाइन को अपने ब्लॉक स्तर तत्व ले।
तो अगर मुझे लगता है कि ऐसा करने के लिए जो है हम छवि ग्रिड हम अपनी छवियों को एक ग्रिड या एकाधिक एक ही लाइन पर हैं फार्म के लिए चाहते हैं के लिए क्या करने जा रहे हैं क्या नहीं करना चाहती।
और अगर ऐसा है, तो मुझे लगता है कि divs के साथ मैं एक संपत्ति नाव कहा जाता है का उपयोग करने की जरूरत है या कि एक ही रास्ता है कि मैं इसे पूरा कर सकते हैं करना चाहते हैं।
यहाँ तो सब मुझे करना सुरक्षित नाव को छोड़ दिया और कहा कि क्या करेंगे।
यह दस्तावेज़ के सामान्य प्रवाह से बाहर तत्वों सभी divs ले जाएगा।
तो वहाँ अलग तर्ज पर प्रत्येक पर वर्तमान में ढेर कर रहे हैं।
और क्या होगा कि वे बाईं ओर जारी करेगी गुरुत्वाकर्षण लगभग हमारे दस्तावेज़ में दूर जा के रूप में यह सोचने के लिए है।
और इसलिए इस div नाव और बाईं ओर पुश करने के लिए जा रहा है।
इस एक के खिलाफ।
तो अगर मैं यहाँ ताजा थे आप देखेंगे कि वे एक ही लाइन पर अब कर रहे हैं देख सकते हैं।
इसलिए हम जब हम छवियों का उपयोग कर रहे हैं इस सिद्धांत का उपयोग करने के लिए इतना है कि हम प्राप्त छवियों मूल रूप से एक दूसरे के खिलाफ ऊपर जाना है और एक ग्रिड के रूप में कर सकते हैं जा रहे हैं।
इसलिए मुझे लगता है और अब इस सब से छुटकारा पाने के लिए और डिवाइस है कि हम से छुटकारा पाने के लिए जा रहा हूँ मैं इस तरह से हमारी छवि में जोड़ने के लिए जा रहा हूँ।
इसलिए मैं इस पूर्ण स्क्रीन बनाने के लिए जा रहा हूँ और इन छवि लिंक है कि उस फ़ाइल को इस वीडियो के साथ शामिल कर रहे हैं में सिर्फ पेस्ट करें।
और नहीं बल्कि यह है, जहां मैं एक छवि टैग बनाने के लिए और फिर चारों ओर आप कॉपी और नौ बार जो बहुत ही धीमी गति से होना चाहिए में पेस्ट की तरह नौ छवि टैग बनाने की तुलना में।
मैं यहाँ उदात्त जादू का एक छोटा सा प्रयोग करने के लिए जहां मैं हर लाइन की शुरुआत का चयन करने के आदेश पर क्लिक उपयोग कर रहा हूँ जा रहा हूँ और फिर मैं सिर्फ छवि स्रोत के बराबर होती है टाइप करने के लिए और फिर लाइन के अंत में जाने के लिए जा रहा हूँ।
तो मैं एक आदेश सही तीर कमान छोड़ दिया तीर कमान शुरुआत करने के लिए इसे लेता है सही अंत करने के लिए चला जाता है और फिर मैं बोली और फिर समापन वर्ग के साथ खत्म करने के लिए जा रहा हूँ इस्तेमाल किया।
तो यह है कि एक बहुत आसान और त्वरित तरीका है उन सभी के आप छवि टैग के रूप में कल्पित हैं लगा देना था।
तो अगर मैं इस बचा है और वे ब्राउज़र को जाने के लिए आप जब मैं ताज़ा देखेंगे।
अब हम नौ छवियों है।
बेशक एकीकृत नहीं कर रहे हैं।
वे अंतरिक्ष के एक बहुत ऊपर ले जा रहे हैं।
तो क्या अब हम क्या करने जा रहे हैं हमारी शैली पत्रक के लिए जाने के लिए और सभी छवियों का चयन करें।
और पहली बात यह है कि हम शायद यहाँ क्या करना चाहते हैं बस उन्हें दूर दे रहा है।
तो चलो शुरू करने के लिए 100 की तरह पिक्सल के साथ उन्हें एक देते हैं और इस तरह से बहुत छोटा होने जा रहा है।
लेकिन मैं आप देखेंगे क्या होता है और ताज़ा करने के लिए करना चाहते हैं और तुम नोटिस हूँ कि इन सभी छवियों को अब एक साथ एक लाइन में हैं, लेकिन उनके बीच कुछ रिक्ति है कि हम निर्दिष्ट नहीं किया है कि।
हम मार्जिन या गद्दी या कुछ भी सेट कभी नहीं।
तो क्या हो रहा है वहाँ वास्तव में कुछ सफेद स्थान है कि कहा जा रहा है कि है और यह एक भाप उल्लू में एक विचित्र बात का एक छोटा सा है।
लेकिन हम कुछ और बिना छवियों है जब वहाँ एक सफेद स्थान या सिर्फ एक ही जगह है कि इन के बीच कहा है।
हम इस बात का छुटकारा चाहते हैं तो अगर हम नाव का उपयोग करें और याद है कि नाव दस्तावेज़ के प्रवाह की बातें बाहर ले जाएगा।
तो अगर मैं अब ताज़ा आप देख सकते हैं छवियों रहे हैं कि एक दूसरे के खिलाफ butting और वहाँ मूल रूप से कोई अंतरिक्ष उन दोनों के बीच में सब है।
और फिर हम वापस जाने के लिए और हमारे आत्म में है कि अंतरिक्ष में जोड़ सकते हैं।
इसलिए हम स्पष्ट रूप से उन्हें इस छोटी सी जगह लेने के लिए नहीं करना चाहती।
हम तीन के पार जा रहा है और हम उन दोनों के बीच कुछ मार्जिन चाहते करना चाहते हैं लेकिन हम उस पर नियंत्रण करना चाहते हैं।
इसलिए उन्हें अस्थायी द्वारा हम सफेद अंतरिक्ष से छुटकारा मिल गया है कि ब्राउज़र हमारे लिए इतना कहा है कि अब हम वास्तविक खाली स्थान के बजाय मार्जिन संपत्ति का उपयोग कर अपने स्वयं के कस्टम दूरी पर जा सकते हैं।
तो अब हम चौड़ाई बदलने के लिए और 30 प्रतिशत के साथ शुरू करते जा रहे हैं।
तो याद है कि इसराइल प्रतिशत शरीर की मूल तत्वों के सापेक्ष है।
तो हर एक के शरीर का 30 प्रतिशत तक ले जाएगा।
और कारण है कि मैं 30 के साथ शुरू कर रहा हूँ यकीन है कि वे सभी एक लाइन या कि तीन फिट पर फिट बनाने के लिए ही है।
मेरे मन में और आप देखेंगे कि हम उनमें से तीन को पाने के बीच कोई अंतरिक्ष में जा रहा देखेंगे।
और फिर हम, क्योंकि यह केवल 90 प्रतिशत है कि हम ले जा रहे है यहाँ पर हमारे 10 प्रतिशत की है।
इसलिए हम चाहते हैं कि अन्य प्रतिशत का उपयोग करने के लिए वास्तव में मार्जिन अलग और उन दोनों के बीच कुछ रिक्ति जोड़ने के लिए जा रहे हैं।
तो पहले से ही हम एक ग्रिड तीन तीन से की है।
क्या हम आगे क्या करना चाहते हैं यह इस तरह लग रहे बनाने के लिए है।
या फिर हम भी उन दोनों के बीच रिक्ति है।
इसलिए हम वास्तव में गणित का एक छोटा सा क्या करना है।
तो मैं पहले से ही यह किया है।
लेकिन बुनियादी तौर पर अगर हम इस गणना वहाँ एक मार्जिन यहाँ वहाँ एक मार्जिन यहाँ भी है।
वहाँ एक मार्जिन यहाँ तीन है।
और फिर इस एक से पांच पर उसके लिए यह एक पर।
और यह एक या एक से छह पर।
इसलिए हम 10 प्रतिशत है और हम विभाजित करने के लिए है कि 6 से 10 और छह से विभाजित एक बिंदु छह छह की जरूरत है।
तो क्या हम क्या करने जा रहे है सिर्फ मार्जिन एक बिंदु छह छह प्रतिशत का कहना है।
तो अगर हम ब्राउज़र को वापस जाने के लिए और परिणाम की जाँच करें और ताज़ा आप देखेंगे कि हम उन दोनों के बीच अंतर के साथ तीन समान रूप से स्थान छवियों को मिलता है।
तो गणित सिर्फ इतना है कि एक बार और मारा।
इनमें से हर एक को 10 प्रतिशत है।
इसलिए वे सिर्फ 30 प्रतिशत दे।
और हर एक के दोनों तरफ 1.6 प्रतिशत का मार्जिन है।
इसलिए हम दोनों पक्षों को छोड़ दिया और सही एक बिंदु छह बार दो प्लस 30 प्रतिशत लेते हैं और हम इनमें से हर एक के लिए तैंतीस बिंदु तीन प्रतिशत मिलता है।
तो यह है कि एक तिहाई बिल्कुल या लगभग वैसा हम इकट्ठा कर रहे हैं, लेकिन सबसे अच्छा है कि हम यहाँ कर सकते है।
तो तैंतीस बिंदु तीन प्रतिशत।
इनमें से प्रत्येक एक ही हम उस को सत्यापित करने के लिए बस का निरीक्षण कर सकते हैं।
हम वहाँ चलें।