Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS के साथ वेब पेज के शीर्ष पर बने रहने के लिए नेविगेशन बार सेट करें

<घंटा/>

नेविगेशन बार को सबसे ऊपर सेट करने के लिए, स्थिति:ठीक करें . का उपयोग करें d संपत्ति, शीर्ष . के साथ संपत्ति।

शीर्ष पर रहने वाले मेनू को लागू करने के लिए आप निम्न कोड चलाने का प्रयास कर सकते हैं,

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            position: fixed;
            top: 0;
            width: 100%;
         }
         li {
            float: left;
            border-right: 1px solid white;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
         li:last-child {
            border-right: none;
         }
         div {
            padding:30px;
            margin-top:40px;
            background-color:white;
         }
      </style>
   </head>
   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li><a href = "#contact">Contact</a></li>
         <li><a href = "#about">About</a></li>
      </ul>
      <div>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
      </div>
   </body>
</html>

  1. CSS के साथ वेब पेज पर सेंटर पेजिनेशन

    आप वेब पेज पर पेजिनेशन को केंद्र में रखने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं: उदाहरण .demo { डिस्प्ले:इनलाइन-ब्लॉक; } .demo1 { टेक्स्ट-एलाइन:सेंटर; } .demo a { रंग:लाल; पैडिंग:5px 12px; पाठ-सजावट:कोई नहीं; संक्रमण:पृष्ठभूमि-रंग 2s; सीमा:1px ठोस नारंगी; फ़ॉन्ट-आकार:18px; } .demo a.active

  1. सीएसएस के साथ एक निश्चित साइड नेविगेशन मेनू कैसे बनाएं?

    CSS का उपयोग करके एक निश्चित साइड नेविगेशन मेनू बनाने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <

  1. CSS के साथ ऑन स्क्रॉल फिक्स्ड नेविगेशन बार कैसे बनाएं?

    CSS स्थिति विशेषता निर्दिष्ट करके, हम CSS का उपयोग करके एक निश्चित नेविगेशन बार बना सकते हैं। CSS में पोजिशन प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    position: /*value*/; } निम्नलिखित सीएसएस स्थिति संपत्ति का एक उदाहरण है। उदाहरण <!DOCTYPE html> <html> <head>