5।

शीर्षक और पैराग्राफ टैग तत्वों को "" और "" टैग में जोड़ें। यह मुख्य सामग्री है। कोडिंग इस तरह दिखता है:

मुख्य सामग्री हैडर

यहाँ बड़े मुख्य अनुभाग के लिए मेरी सामग्री है।

"और" टैग में समान सामग्री हेडर और सामग्री कोडिंग जोड़ें।

6।

"और" "टैग के भीतर पाद लेख जोड़ें। कोडिंग इस तरह दिखता है:

कॉपीराइट मेरी साइट। सर्वाधिकार सुरक्षित।

DIV कंटेनर HTML सामग्री किया जाता है।

सीएसएस गुण

1।

DIV कंटेनर के अंतिम "" टैग के नीचे एक स्थान लिखें। दो सीएसएस कोष्ठक के बाद DIV कंटेनर से प्रत्येक का नाम टाइप करें। प्रत्येक नाम के सामने एक "#" होना चाहिए। कोडिंग इस तरह दिखता है:

तन { }

लपेटो {

}

हेडर {

}

2।

प्रत्येक सीएसएस तत्व के लिए चौड़ाई और स्थिति निर्धारित करें। "#Wrap" चौड़ाई वेबसाइट की पूरी चौड़ाई है और "#sidebar" और "#main" की चौड़ाई एक साथ पूरी चौड़ाई के बराबर हो गई है। "फ्लोट: लेफ्ट / राइट;" का प्रयोग करें मुख्य सामग्री और साइडबार को बाईं या दाईं ओर फ़्लोट करने की विशेषता। एक उदाहरण इस तरह दिखता है:

मुख्य {

चौड़ाई: 600px; सही नाव; }

3।

प्रत्येक सीएसएस तत्व के लिए मार्जिन, पैडिंग, बैकग्राउंड कलर और टेक्स्ट कलर सेट करें। "मार्जिन: Xpx Xpx Xpx Xpx;" का प्रयोग करें और "पैडिंग: Xpx Xpx Xpx Xpx;" कोडिंग। "पृष्ठभूमि जोड़ें: #XXXXXX;" और "रंग: #XXXXXX;" भी। एक उदाहरण इस तरह दिखता है:

हेडर {

width: 900px; float: left; margins: 0px 5px 15px 20px; padding: 0px 0px 5px 5px; color: #eeeeee; background: #FFFFFF; 

}

4।

पाद से "फ्लोट" कोडिंग निकालें और "स्पष्ट: दोनों का उपयोग करें;" वेबसाइट के निचले भाग तक पाद को पुश करने के लिए। यह इस तरह दिखता है:

पाद {

चौड़ाई: 900 पीएक्स; दोनों को साफ करो; पृष्ठभूमि: #eeeeee}

5।

"#Nav {" तत्व को दो अलग-अलग तत्वों में विभाजित करें: "#nav ul {" और "#nav li {" प्रत्येक शैली को। "सूची-शैली जोड़ें: कोई नहीं;" "#nav ul" तत्व कोडिंग और "प्रदर्शन: कोई नहीं;" #nav li "कोडिंग के लिए। यह इस तरह दिखता है:

नौसेना उल {

सूची-शैली: कोई नहीं; }

नौसेना ली {

कुछ भी डिस्प्ले मत करो; }

यह फिक्स नेव बार को क्षैतिज बनाता है और एक ऑर्डर की गई सूची के रूप में नेव बार को प्रदर्शित नहीं करता है।

एडवांस सीएसएस

1।

शीर्षक तत्व को अलग करें और इसे सीएसएस विशेषताओं के साथ शैली दें। उदाहरण के लिए, शीर्षक शीर्षक को बदलने के लिए कोडिंग इस तरह दिखाई देती है:

हैडर h2 {

रंग: # 000000; फ़ॉन्ट-परिवार: एरियल, ट्रेबुचेट, सेन्स-सेरिफ़; }

2।

एक अलग रंग के साथ पाठ में शैली लिंक और उन्हें रेखांकित करें। "टेक्स्ट-ट्रांसफॉर्म" विशेषता को अंडरलाइन, अपरकेस या लोअरकेस किया जा सकता है। उदाहरण के लिए, कोडिंग इस तरह दिखता है:

मुख्य {

रंग: # 000000; पाठ-सजावट: रेखांकित करना; }

3।

"बॉर्डर: Xpx #XXXXXX;" विशेषता। सीमा "बॉर्डर-टॉप" के रूप में या "बॉर्डर-बॉटम" के रूप में शीर्ष पर हो सकती है।

4।

"फ़ॉन्ट-परिवार: फ़ॉन्ट;" का उपयोग करके एक फ़ॉन्ट निर्दिष्ट करें विशेषता। "फ़ॉन्ट-आकार: Xpx; विशेषता; का उपयोग करके फ़ॉन्ट का आकार बदलें।" फ़ॉन्ट-भार: बोल्ड / इटैलिक्स; "विशेषता का उपयोग करके बोल्ड या इटैलिक्स में बदलें। उदाहरण के लिए:

मुख्य पी {

 font-family: Times New Roman, serif; font-size: 12px; font-weight: italics; 

}

जरूरत की चीजें

• नोटपैड या अन्य पाठ संपादक

टिप

• एक सहायक दृश्य के रूप में कोड बनाने से पहले वांछित लेआउट को स्केच करें।