पिछली पोस्ट को पढने के लिये निम्न लिंक पर जाएं ।
अपनी वेबसाइट को आकर्षक कैसे बनायें ??
पहले तो हम अपने अब तक किये गये कोड को एक दृष्टि में देखेंगे । जिससे हमें समझ में आ जाए कि हमारे कोड में कितनी स्टाइल हुई है और अब हमें आगे क्या करना है । आज के इस पाठ में हम अपने हर एक डिवीजन में कई रंगों को मिलाकर और भी सुन्दर रंग भरना सीखेंगे । हमारा अबतक का कोड निम्न है –<!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:red;}
#menu{height: 50px; width: 100%; background:pink;}
#sidebar{height: 350px; width:25%; background:gray;}
#post{height: 350px; width: 70%; background:yellow;}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:green;}
</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>
इस कोड का रिजल्ट भी हमने देखा ।
इसमें हम background: ; की जगह background:linear-gradient() ; का प्रयोग करेंगे ।
आइये इसे करके देखते हैं ।
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:red;}
#menu{height: 50px; width: 100%; background:pink;}
#sidebar{height: 350px; width:25%; background:gray;}
#post{height: 350px; width: 70%; background:yellow;}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:green;}
</style>
इस कोड को परिवर्तित करके हम निम्न की भांति कर देते हैं ।
<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>
अब हम इसका परिणाम देखते हैं –
आगे हम अपने टेम्प्लेट में नेविगेशन मीनू एड करेंगे और कुछ अन्य आकर्षक बदलाव करके देखेंगे ।
पूरा कोड निम्न है –
<!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>
कोई भी शंका हो तो कृपया टिप्पणीमंजूषा में पूंछें ।
Comments
Post a Comment