सीएसएस लेआउट को आवश्यकता छ कि तपाईं आफ्नो वेबसाइट को लेआउट को बारे मा सोच्नु पर्छ, र तब टुकडे ले लो र उनलाई एक साथ राख्नुहोस। सीएसएससँग सरल 3-स्तम्भ लेआउट कसरी निर्माण गर्ने सिक्नुहोस्।
01 को 09
तपाईंको लेआउट ड्राउनुहोस्
तपाईं आफ्नो लेआउट कागज वा ग्राफिक्स कार्यक्रममा आकर्षित गर्न सक्नुहुन्छ। यदि तपाईं सँग पहिले नै तार-फ्रेम वा मनमा अधिक विस्तृत डिजाइन छ भने, आधार बनाएर आधारभूत बक्सहरूमा साइट बनाउनुहोस्। यो डिजाइन जसलाई यस लेख सँग सम्बन्धित सामग्री सामग्री क्षेत्रमा तीन स्तम्भहरू छन्, साथसाथै हेडर र फुटर। यदि तपाईं नजिकैबाट हेर्नुभयो भने, तपाइँ देख्न सक्नुहुन्छ कि तीन स्तम्भ चौडाइमा बराबर छैन।
तपाइँसँग तपाइँको लेआउट बाहिर निस्कने पछि, तपाईं आयामहरूको सोच सुरु गर्न सक्नुहुन्छ। यो उदाहरण डिजाइन निम्न आधारभूत आयामहरू जाँदैछ:
- 900 पिक्सल भन्दा बढी चौडाई छैन
- 20 px gutter बायाँमा
- स्तम्भहरू र पङ्क्तिहरू बीच 10 px
- स्तम्भहरू 250px, 300px, र 300px चौडाई छन्
- शीर्ष पंक्ति 150px लामो छ
- तल पंक्ति 100px लामो छ
02 को 09
आधारभूत HTML / CSS लेख्नुहोस् र कन्टेनर तत्व सिर्जना गर्नुहोस्
यो पृष्ठ एक मान्य HTML कागजात हुनेछ किनकि खाली खाली HTML कन्टेनरको साथ सुरू गर्नुहोस्
आधार सीएसएस शैलीमा पृष्ठ मार्जिन, सीमानाहरू, र paddings बाहिर शून्य गर्न थप्नुहोस्। जबकि त्यहाँ अन्य मानक CSS शैलीहरू छन् नयाँ कागजातहरूको लागि, यी शैलीहरू तपाईले सफा लेआउट प्राप्त गर्नु आवश्यक छ। तपाईंको कागजातको टाउकोमा जोड्नुहोस्: