सीएसएस मांडणीसाठी आवश्यक आहे की आपण संपूर्ण आपल्या वेबसाइट लेआउटचा विचार करा, आणि नंतर तुकडे घेऊन त्यांना एकत्रित करा. CSS सह सोप्या 3-स्तंभ लेआउट कसे तयार करावे ते जाणून घ्या.
09 ते 01
आपले लेआउट काढा
आपण कागदावर किंवा ग्राफिक्स प्रोग्रामवर आपले लेआउट काढू शकता. जर आपल्याकडे आधीच वायर-फ्रेम किंवा अधिक व्यापक डिझाइन आहे, तर साइटवर बनलेल्या मूलभूत बॉक्समध्ये हे सोपे करा. या लेखात असलेल्या या डिझाईनमध्ये मुख्य सामग्री क्षेत्रातील तीन स्तंभ आहेत, तसेच शीर्षलेख आणि तळटीप. आपण बारकाईने पाहिल्यास, आपण पाहू शकता की तीन स्तंभ रूंदीच्या समान नाहीत.
आपण आपला लेआउट काढल्यानंतर, आपण परिमाणांवर विचार करणे सुरू करू शकता. या उदाहरणाचे डिझाइन खालील मूलभूत आयाम असणार आहे:
- 900 पिक्सेल रुंद पेक्षा अधिक नाही
- डाव्या बाजूला 20 पॅक गटर
- स्तंभ आणि पंक्तींमध्ये 10 पिक्स
- 250px, 300px, आणि 300px रुंदी असलेले स्तंभ
- शीर्ष पंक्ती 150px उंच आहे
- तळची ओळ 100px उंच आहे
02 ते 09
मूलभूत HTML / CSS लिहा आणि कंटेनर एलिमेंट तयार करा
हे पृष्ठ वैध HTML दस्तऐवज असल्याने, एका एचटीएमएल कंटेनरसह सुरू करा
<मेटा http-equiv =" सामग्री-प्रकार "सामग्री =" मजकूर / html; charset = utf-8 "/>पृष्ठ मार्जिन, सीमा आणि पॅडिंग्ज शून्य करण्यासाठी मूळ CSS शैलींमध्ये जोडा. नवीन दस्तऐवजांसाठी इतर मानक सीएसएस शैली असली तरीही, ही शैली आपल्याला स्वच्छ लेआउट मिळविण्यासाठी आवश्यक असलेले किमान आहेत. आपल्या दस्तऐवजाच्या शीर्षकामध्ये त्यांना जोडा: