HTML पृष्ठों पर ब्लॉक बनाने के लिए वेब डिज़ाइन में टैग का सक्रिय रूप से उपयोग किया जाता है, जिसके अंदर आप किसी भी प्रकृति की सामग्री - टेक्स्ट, चित्र, टेबल आदि डाल सकते हैं।
निर्देश
चरण 1
जब उपयोग किया जाता है, तो एक अंत टैग की आवश्यकता होती है। इसका उपयोग निम्नलिखित विशेषताओं के साथ किया जा सकता है:
- संरेखित करें - संरेखण (बाएं, केंद्र, दाएं, औचित्य), उदाहरण के लिए, पाठ;
- वर्ग - वर्ग का नाम (पाठ);
- आईडी - एचटीएमएल टैग पहचानकर्ता का नाम;
- शैली - शैली दिशा;
- शीर्षक - टूलटिप।
चरण 2
ब्लॉक का उपयोग करते समय, स्टाइल शीट का उपयोग करने की सलाह दी जाती है। उदाहरण के लिए, यदि आप किसी पृष्ठ पर सामग्री के साथ दो अलग-अलग ब्लॉक बनाना चाहते हैं, तो कोड कुछ इस तरह दिखेगा:
.ब्लॉक1 {
चौड़ाई: 500 पीएक्स;
ऊंचाई: 200px;
पृष्ठभूमि: पीला;
पैडिंग: 0px;
पैडिंग-राइट: 0px;
सीमा: ठोस 0px काला;
नाव छोड़ी;
}
.ब्लॉक2 {
चौड़ाई: 200px;
ऊंचाई: 500;
पृष्ठभूमि: हरा;
पैडिंग: 0px;
पैडिंग-राइट: 0px;
सीमा: ठोस 0px काला;
सही नाव;
}
पीला ब्लॉक 500px की चौड़ाई और 200px की लंबाई वाला पहला ब्लॉक है।
हरा ब्लॉक 200px की चौड़ाई और 500px की लंबाई वाला पहला ब्लॉक है।
चरण 3
ब्लॉकों का राइट-साइड / लेफ्ट-साइड अलाइनमेंट शैलियों का उपयोग करके सेट किया जा सकता है:
वामपंथी {
नाव छोड़ी;
मार्जिन: 5px 15px 7px 0;
}
.राइटिमग {
सही नाव;
मार्जिन: 7px 0 7px 7px;
}
चरण 4
टैग की मदद से आप तस्वीरों के बारी-बारी से बदलाव को व्यवस्थित कर सकते हैं।
डिव # रोटेटर {स्थिति: रिश्तेदार; ऊंचाई: 150 पीएक्स; मार्जिन-बाएं: 15px;}
डिव # रोटेटर उल ली {फ्लोट: लेफ्ट; स्थिति: निरपेक्ष; सूची-शैली: कोई नहीं;}
div # रोटेटर उल ली.शो {z-index: 500;}
रोटेटर () {
$ ('div # रोटेटर उल ली')। सीएसएस ({अस्पष्टता: 0.0});
$ ('div # रोटेटर उल ली: पहला')। सीएसएस ({अस्पष्टता: 1.0});
सेटइंटरवल ('रोटेट ()', 5000);
}
फंक्शन रोटेट () {
वर करंट = ($ ('div # रोटेटर उल ली.शो')? $ ('div # रोटेटर उल ली.शो'): $ ('div # रोटेटर उल ली: फर्स्ट'));
var अगला = ((current.next ()। लंबाई)? ((current.next ()। hasClass ('शो'))? $ ('div # रोटेटर उल ली: पहला'): current.next ()): $ ('div # रोटेटर उल ली: फर्स्ट'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// वर अगला = $ (सिब्स [rndNum]);
next.css ({अस्पष्टता: 0.0})
.addClass ('शो')
चेतन ({अस्पष्टता: 1.0}, 1000);
वर्तमान चेतन ({अस्पष्टता: 0.0}, 1000)
.removeClass ('शो');
};
$ (दस्तावेज़).तैयार (फ़ंक्शन () {
रोटेटर ();
});
