इस पोस्ट में हम अपने वेबसाइट के विभिन्न डिवीजन्स के बार्डर को मनचाहे तरीके से सेट करना सीखेंगे ।
अपने वेबसाइट के बैकग्राउण्ड को विभिन्न रंगों से कैसे सजाएँ ??
हमारा बेस कोड निम्न है -
<!doctype html>
<html>
<head>
<title>My New Html Page </title>
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);}
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white);}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange);}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);}
</style>
</head>
<body>
<div id="container">
<div id="header">SJweb Development Service</div>
<div id="menu"> Menu Bar </div>
<div id="sidebar">Left Sidebar</div>
<div id="post">Post Area</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
इस कोड का परिणाम निम्न है -
अब हम इस टेम्प्लेट के सभी बार्डर्स को अलग-अलग रंगों और तरीकों से सेट करेंगे। सबसे पहले हम यह देखेंगे कि कौन से ब्लाक के बार्डर के लिये कौन सी कोडिंग की गई है -
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);}
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white);}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange);}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);}
</style>
हम देख सकते हैं कि अभी हमने सभी डिवीजन्स पर एक साथ ही बार्डर सेट किये हैं । किसी भी डिवीजन पर व्यक्तिगत रूप से बार्डर सेट नहीं किया गया है । अगर हमें सभी डिवीजन्स पर अलग अलग बार्डर सेट करना है तो हमें हर डिवीजन पर व्यक्तिगत रूप से बार्डर कोड डालना पडेगा । तथा सभी डिवीजन्स पर एकसाथ डाला गया कोड रिमूव करना पडेगा । आइये इसे करके देखते हैं -
<style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow); border:1px solid green;}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange); border:1px solid green; }
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:1px solid green;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:1px solid green;}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black); border:1px solid green;}
</style>
उपर्युक्त कोड में से हमने div{border:1px solid green;} कोड को हटाकर सभी डिवीजन्स में व्यक्तिगत रूप से border:1px solid green; कोड डाल दिया । इस परिवर्तन से हमारे टेम्प्लेट पर कोई फर्क नहीं पडेगा । किन्तु अब हम जो करने जा रहे हैं उससे हमारे टेम्प्लेट में उल्लेखनीय परिवर्तन होगा ।
अब हम हर डिवीजन के बार्डर कोड की मोटाई और रंग को बदलेंगे । आइये करके देखें -
<style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange); border:2px groove purple; border-left:0px; border-right:0px; }
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:2px groove red; border-top:0px; border-bottom:0px;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:2px groove red; border-top:0px; border-bottom:0px; }
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black); border:2px groove green; border-left:0px; border-right:0px;}
</style>
उक्त स्टाइल कोड में हमने मात्र कुछ बदलाव किये हैं । आइये इन्हें समझते हैं ।
- हमने हेडर डिवीजन के बार्डर को पूरी तरह खतम कर दिया है । इसकी आवश्यकता नहीं थी क्यूँकि इसके तीन तरफ बार्डर दिखाई नहीं देता और नीचे का बार्डर मेन्यू डिवीजन के बार्डर से टकरा सकता है।
- हमने मेन्यू डिवीजन के बार्डर की मोटाई 2 पिक्सल सेट की तथा रंग पर्पल कर दिया ।
- क्यूँकि मेन्यू सेक्शन का दाहिना और बांया बार्डर दिखना नहीं है इसलिये हमने दाहिने और बांये बार्डर की मोटाई को शून्य कर दिया ।
- हमने साइडबार बार्डर की मोटाई 2 पिक्सल की तथा रंग लाल कर दिया ।
- साइडबार का ऊपरी तथा निचला बार्डर अनावश्यक होने के कारण शून्य पिक्सल कर दिया ।
- पोस्ट बार्डर को भी ठीक साइडबार बार्डर की तरह सेट कर दिया ।
- फुटर बार्डर की मोटाई दो पिक्सल तथा रंग हरा कर दिया ।
- फुटर डिवीजन का दाहिना तथा बांया बार्डर हटाने के लिये उसकी मोटाई को शून्य पिक्सल कर दिया ।
html कोड नमूने वेब डिज़ाइन को सीखने के लिए
ReplyDeleteहैडर टैग रंग फ़ॉन्ट-परिवार कोड