Menüleiste mit CSS / Navbar 1

  • <style>a:link.men { background-color : blue; font : menu; color : black; text-transform : uppercase; margin-right : 2px; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }a:visited.men { background-color : blue; font : menu; color : black; text-transform : uppercase; margin-right : 2px; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }a:hover.men { background-color : #F3F3F3; font : menu; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }</style></head><body bgcolor="#FFFFFF" text="#000000">Menüleiste 1 - Schriftart menu (Menüschrift des Betriebssystems) mit text-transform : uppercase (dadurch entstehen die Großbuchstaben) Schatteneffekt durch verschiedene Rahmenfarben links, rechts, oben und unten. Leichter Hovereffekt: href="#" class="men">Homepage: href="#" class="men"> Linkliste: href="#" class="men" Bestellungen: href="#" class="men" Kurzvorstellung - Zum Vergleich: href="#" Normaler Hyperlink ohne Formatierung auf der selben Seite. Hier der Code dafür: <style>a:link.men { background-color : yellow; font : menu; color : black; text-transform : uppercase; margin-right : 2px; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }a:visited.men { background-color : yellow; font : menu; color : black; text-transform : uppercase; margin-right : 2px; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }a:hover.men { background-color : #F3F3F3; font : menu; padding-top : 2px; padding-bottom : 2px; padding-left : 4px; padding-right : 4px; border-top : 1px solid silver; border-left : 1px solid silver; border-right : 1px solid black; border-bottom : 1px solid : black; }</style>