2017-03-07 4 views
0

Ich bin relativ unerfahren mit HTML und CSS und ich habe ein Problem mit dem Versuch, die Padding und Margin-Werte meiner Navigationsleiste auf eine Sekunde zu ändern Seite, ohne dass dies Auswirkungen auf die Indexseite hat.wie man die nav vales einer zweiten Seite ändert, ohne die Indexseite nav zu beeinflussen

NB: Ich möchte das Nav etwas anders auf der zweiten Seite stylen.

Ich habe 2 Navigationsleisten .navbar und .navbar2 jeweils mit identischem Code.

<div class="navbar"> 
    <nav class="large clearfix"> 
     <ul> 
     <li> 
      <a href="index.html">Home</a> 
     </li> 
     <li> 
      <a href="famous.html">Famous People</a> 
     </li> 
     <li> 
      <a href="places.html">Places to Visit</a> 
     </li> 
     <li> 
      <a href="contactus.html">Contact Us</a> 
     </li> 
     </ul> 
     <div class="veggieburger"><a href="#nav">&equiv;</a></div> 
    </nav> 
</div>  

Wie ich navbar2 UL LI Eigenschaften aus einer syntaktischen Perspektive in der CSS, um ohne es anders zu gestalten, rufen Sie die Navigationswerte zu beeinflussen auf der Indexseite ausgerichtet sind.

Ich habe versucht, ohne Erfolg in der CSS.

.navbar2 > li { 
    margin-top: 50px; 
} 
+1

keine Notwendigkeit, wie [.navbar2> li] zu schreiben. schreibe nur [.navbar2 li] und es wird funktionieren. lerne hier über css selectors. https://code.utsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 –

+0

Vielen Dank .... ... –

Antwort

1

Nun, für verschiedene Klassen Verwaltung (.) Und IDs (#) verwenden wir diese Wähler in den Klammern ich geschrieben habe.

zum Beispiel sagen Sie Stil navbar wollen und navbar2 Unabhängig davon würden Sie sie direkt anders formatieren, indem Sie den Selektor "." verwenden. Fügen Sie einfach ein "." vor der Klasse und wenden Sie Ihre Eigenschaften nach Bedarf an.

So zum Beispiel, stellen Sie sich meine HTML alles geschieht, ist dies der CSS wäre:

.navbar 
     { 
     width: 100%; 
     height: 30vw; 
     color: red;  /*this would make the text red*/ 
     } 

.navbar2 
     { 
     width: 100%; 
     height: 30vw; 
     color: green /*and this makes the text green*/ 
     } 

Hoffnung, die geholfen haben!

Verwandte Themen