 |
| How to Create Navigation bar using html and css in hindi |
मैं ने यहाँ एक सिंपल side नेविगेशन बार बनाकर उसका कोड पेस्ट किये है अगर आप लोग इस पोस्ट को पढ़ रहे है तो आप इस कोड का इस्तेमाल करके एक अच्छा side नेविगेशन बार बनाना सिख सकते है . इसको बनाने के लिए सबसे पहले html कोड को कॉपी करें और अपना text editor open करें उसमें ये कोड पेस्ट करें उसके बाद इसे सेव करें कोई भी नाम डालकर .htm extension के साथ एक न्यू folder में फिर उसके बाद CSS का कोड कॉपी करें और text editor में न्यू page लेकर पेस्ट करें अब इसे भी सेव करें उसी folder में जिस में html कोड सेव किये है इसका file नाम style.css रखें ये css का file है अब आप html file को open करें आपका नेविगेशन बार बन कर तैयार है . html का कोड में आप खुद से एडिटिंग कर सकते है # की जगह link डाल सकते है heading change कर सकते है
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Nav Bar</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Digital Dhanbad Research Institute</h1>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
CSS Code:
*{
padding: 0px;
margin: 0px;
}
h1{
font-family: arial,sans-serif;
font-weight: 400;
height: 60px;
width: 100%;
background: #16A5C7;
line-height: 60px;
color: white;
}
div{
width: 250px;
height: 666px;
background: #1A8DA9;
}
div a{
text-decoration: none;
color: white;
padding: 10px;
padding-right: 100px;
}
div ul li{
list-style-type: none;
display: block;
padding: 15px;
border-bottom: 1px solid #236D7F;
}
div ul li:hover{
background: white;
transition: linear all 0.40s;
margin-left: 10px;
}
div ul li a:hover{
color: black;
}
अगर ये सिंपल सा कोड समझ में आया हो तो कमेंट और शेयर करें अगर आपको वेबसाइट development सीखना हो तो हमारे यहाँ Digital Dhanbad Research Institute में एडमिशन ले सकते है।
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें