मैं कोडिंग में बहुत नया हूं, लेकिन मैं वास्तव में इसका शौकीन हूं और मैं अभी कुछ बुनियादी चीजें सीखने की कोशिश कर रहा हूं। तो एक स्कूल प्रोजेक्ट के लिए मुझे HTML और CSS का उपयोग करके एक वेबसाइट बनानी होगी।

मैं एक चिकनी स्क्रॉलिंग चीज़ और एक साइड नेवी बार पर काम कर रहा हूं (जो कि वास्तव में मैंने w3schools.com से कॉपी किया है)। लेकिन मैंने साइडबार में एक लिंक जोड़ने की कोशिश की, जो मेरे दूसरे पेज पर जाएगी। हालांकि यह काम नहीं कर रहा है, क्योंकि जब मैं लिंक पर क्लिक करने का प्रयास करता हूं तो यह कहीं भी नहीं जाएगा। मैंने मुख्य पृष्ठ पर एक अलग लिंक बनाने की कोशिश की है, लेकिन वह भी काम नहीं कर रहा है। जैसा कि मैंने पहले ही कहा है कि मैं इस पर नया हूं इसलिए यह एक बेवकूफी भरा समस्या हो सकती है लेकिन कृपया एक बार देख लें।

<!DOCTYPE html>
<html>
    <head>
        <title>orginele titel</title>
        <link rel="stylesheet" href=site.css>
        <link rel="stylesheet" href=site.html>
        <link rel="stylesheet" href=foto.html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "6") {
      event.preventDefault();   
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        window.location.hash = hash;
      });
    } 
  });
});
</script>
<style>
#section1 {
  height: 600px;
  background-color: rgb(27, 27, 27);
}
#section2 {
  height: 600px;
  background-color: rgb(90, 4, 4);
}
 </style> 
    </head>
    <body>
     
     <h1>Smooth Scroll</h1>

      <div class="main" id="section1">
        <h2>Section 1</h2>
        <p>hi</p>
        <a href="biografie.html">biografie</a>
          
       
        <a href="#section2">hoe cool zijn vissen
        </a>
        </div>
      
      <div class="main" id="section2">
       
        <h2>Section 2</h2>
        <a href="#section1">To go back to the top</a>
       </div>
       <div class="sidenav">
        <a href="foto.html">bee</a>
        <a href="#services">Services</a>
        <a href="#clients">Clients</a>
        <a href="#contact">Contact</a>
        <a 
      </div>
      
      
         
    </body>
</html>

और यहाँ सीएसएस है

h1{
    color:grey;
    text-align: center;
}


p{
    text-align: center;
   
}

#p1{
    text-align: center;
}
h2 {
    text-align: center;
    color: rgb(146, 5, 5);
    font-size: 50px;
}


body{
    background-color: rgb(14, 7, 7);
}

.sectie1 {
    color: grey;
}
a:link {
    text-decoration: none;
    color: black;
  }
  
  a:visited {
    text-decoration: none;
    color: black;
  }
  
  a:hover {
    text-decoration: none;
    color: black;
  }
  
  a:active {
    text-decoration: none;
    color: black;
  }
  p{
     font-family: sans-serif;
     font-size: 30px;
     font-weight: bold;
  }



.sidenav {   
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  .sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .main {
    margin-left: 160px; 
    font-size: 28px; 
    padding: 0px 10px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

साथ ही, जितना चाहें मेरे कोड की आलोचना करने के लिए स्वतंत्र महसूस करें। इस तरह मैं अपनी गलतियों से सीख सकता हूँ!

0
Morrismario 31 अक्टूबर 2020, 14:18

1 उत्तर

सबसे बढ़िया उत्तर

मुख्य मुद्दा वह स्क्रिप्ट है जिसका उपयोग आपने अनुभाग में किया है। मैं सुझाव देता हूं कि इसे हटा दें और सादे HTML और CSS के साथ स्टाइल करें।

आप href विशेषता में अंत से .html खो रहे हैं।

 <div class="sidenav">
    <a href="foto.html">bee</a>
    <a href="services.html">Services</a>
    <a href="clients.html">Clients</a>
    <a href="contact.html">Contact</a>
    <a
  </div>

एक नए HTML पृष्ठ से लिंक करें जिसे आप उसी फ़ोल्डर में बनाने जा रहे हैं।

बाहरी लिंक का उपयोग करना:

<a>href="https://www.whateverpage.com/">Visit Whateverpage</a>
0
thelunarcoder 31 अक्टूबर 2020, 15:09