Wie man diese Tasten nicht als blaue Links erscheinen lässt

Also versuche ich nur eine kleine Website zu erstellen. (Keine Sorge, das geht nicht , um den Titel zu sein) Im Moment sind die "Home" "News" "Galerie" und "Über uns" nicht tatsächliche Schaltflächen, die auf eine andere Seite verweisen. Wenn ich es tueWie man diese Tasten nicht als blaue Links erscheinen lässt

<a href="Mainpage.htm"> Home </a>

Die Schaltfläche wird in Farbe lila und es ist unterstrichen. (Ich weiß, dass so Links gezeigt werden) Aber gibt es einen Weg, wie ich diese Knöpfe orange wie im Bild erscheinen lassen kann, ohne dass sie blau und unterstrichen werden. Dank http://imgur.com/Czsk4

Quelle

2012-04-13 alpha_nom

Sie können inline die Stile gesetzt ändern, aber der beste Weg, es zu tun ist durch eine CSS-Klasse.

es tun inline:

<a href="Mainpage.htm" style="color: #fb3f00; text-decoration: none;">Home</a>

es durch eine Klasse zu tun:

<a href="Mainpage.htm" class="nav-link">Home</a> 

a.nav-link:link 
{ 
    color: #fb3f00; 
    text-decoration: none; 
} 
a.nav-link:visited 
{ 
    color: #fb3f00; 
    text-decoration: none; 
} 
a.nav-link:hover 
{ 
    color: #fb3f00; 
    text-decoration: none; 
} 
a.nav-link:active 
{ 
    color: #fb3f00; 
    text-decoration: none; 
}

Um es durch eine Klasse zu tun, müssen Sie den CSS-Code in einer separaten CSS-Datei setzen und Verknüpfen Sie es oder Sie können es in den Kopf des Dokuments einfügen. Die beste Vorgehensweise ist, es in eine externe CSS-Datei zu legen, so dass es überall verwendet werden kann.

Wenn Sie möchten, dass die Orange auf jedem Link ist, entfernen Sie einfach den ".nav-link" -Teil der Klassen und entfernen Sie den class = "nav-link" vom Link-Tag. Dadurch werden alle Links orange, es sei denn, Sie haben eine andere Klasse definiert und explizit auf ein Link-Tag angewendet.

Viel Glück!

Quelle

2012-04-13 15:11:56 Ricketts

Danke. Wirklich zu schätzen :) –

Ok diese Milbe eine dumme Frage sein. Wie zeige ich meinen Code wie Sie auf dieser Website? Der Code, den ich immer schreibe, ist mit reinem Text und nicht in Farben wie deiner. Abgesehen davon benutze ich Notepad ++, um die Website zu entwickeln. Meinst du, das ist gut? \ –

Die Farbcodierung auf StackOverflow wird über den Editor eingegeben. Wenn Sie Ihre Frage oder Antwort posten, gibt es eine Schaltfläche, die wie "{}" aussieht. Sie müssen darauf klicken und Ihren Code dort einfügen, wo er steht. Vergessen Sie auch nicht, die richtige Antwort als Antwort zu markieren, indem Sie auf das Häkchen neben der Antwort klicken. – Ricketts

Mit CSS anstelle von Inline-Stile werden viel besser arbeiten:

a { 
    color:orange; 
    text-decoration:none; 
}

Sie auch ausgefallenere bekommen können und die unterstrichenen angezeigt, wenn Sie schweben:

a:hover, a:focus { 
    text-decoration:underline; 
}

Dies kann dazu beitragen, Benutzererfahrung (UX), obwohl, wenn die Links im Header sind, es natürlich offensichtlich sein kann, dass sie Links sind. (UX-Design ist komplexer als das natürlich, weil Sie Dinge wie Touchscreen-Benutzer, die keine "Hover" haben müssen :))

Quelle

2012-04-13 15:07:40 gregmac

Oh, ich war es in HTML zu tun nicht in CSS ich werde es ändern –

zu Stylesheet @davidcamacho Sie absolut CSS verwenden sollten. HTML-Inline-Stile sind seit einem Jahrzehnt obsolet, alle Pro-Shops verwenden CSS (und zunehmend Dinge wie [LESS] (http://lesscss.org/)) – gregmac

Sie sollten immer ein Stylesheet verwenden, da inline css eine Menge ist weniger leistungsfähig, und Sie können Klassen/IDs angeben, um HTML-Elemente spezifisch zu stylen. –

Alle Links kommen mit verschiedenen Zuständen, so wenn Sie wollen, dass sie mit nur einem bleiben Farbe können Sie alle Zustände zusammen wie folgt ändern:

a:link, a:visited, a:hover, a:active { color: orange }

Quelle

2012-04-13 15:08:45

Sie können dies mithilfe von CSS tun. setzen diese in Ihrem Code direkt am Ende des Kopfschnitt

<style TYPE="text/css"> 

    a:link, a:visited, a:hover, a:active { color: #ff8080; 
     text-decoration: none; 
    } 

    </style>

und die # ff8080 in Ihrer Farbe

Quelle

2012-04-13 15:10:51 Tommyke

Inzwischen in meinem html Blatt hätte ich Home Gallery Und so weiter? –

Ich habe die perfekte Lösung für Sie!

Ich kopiere und Einfügen direkt aus meinem Code. mach es relevant für dich. Dies funktioniert definitiv für das, was Sie erreichen möchten.

<style type="text/css" media="screen"> 
a:link { color:#ffffff; text-decoration: none; } 
a:visited { color:#33348e; text-decoration: none; } 
a:hover { color:#91ac48; text-decoration: none; } 
a:active { color:#7476b4; text-decoration: underline; } 
</style> <a href="/shop">Order Now</a>

Quelle

2018-02-07 12:17:26 Blvckwolf

Wie man diese Tasten nicht als blaue Links erscheinen lässt

Antwort

Verwandte Themen