Freunden, die oft im Internet surfen, ist schon einmal aufgefallen, dass die Maus auf manchen Websites nicht die Form eines normalen diagonalen Aufwärtspfeils hat, sondern die Form eines Kreuzes, eines Linkspfeils, eines Fragezeichens usw. Wenn Sie möchten, dass die Maus an verschiedenen Stellen auf der Webseite unterschiedliche Formen anzeigt, um unterschiedliche Funktionsbereiche widerzuspiegeln, wenn Sie möchten, dass Ihre Website einen einzigartigen Stil widerspiegelt, sollten Sie über die Arbeit am Mausstil nachdenken. Tatsächlich gibt es viele Verwendungsmöglichkeiten für Mausstile. Wie können Sie also verschiedene Mausstile implementieren? Starten Sie Dreamweaver, öffnen Sie die Webseite, auf der Sie den Mausstil anwenden möchten, wählen Sie im Hauptfenster das Dropdown-Menü „Text“ aus und Wählen Sie dann im Untermenü „CSS-Stil“ die Option „Neu“. Der Befehl „Stil“ erstellt ein neues Stylesheet. (Hinweis: Wenn auf Ihrer Webseite bereits ein Stylesheet vorhanden ist, können Sie CSS-Stile „Stylesheet bearbeiten“ auswählen, um das Stylesheet zu bearbeiten.) Das Dialogfeld „Neuer Stil“ wird angezeigt. Das Element „Typ“ verfügt über drei Optionsfelder: „Benutzerdefinierten Stil erstellen“, „HTML-Tag neu definieren“ und „CSS-Auswahl verwenden“. Unter diesen ist „Make Custom Style“ ein benutzerdefinierter Stil, und der Stilname beginnt mit einem Punkt; „CSS Selector verwenden“ bedeutet, den CSS-Selektor zu verwenden, der vier Hyperlink-Stile enthält
: a:active/a:hover/a:link/a:visited ; HTML-Tag neu definieren ist ein Stil, der HTML-System-Tags wie abodybr usw. definiert. Gehen Sie davon aus, dass wir nur den Mausstil für die Hyperlinks auf dieser Seite festlegen. Wählen Sie hier das Tag a in der Option „HTML-Tag neu definieren“. Wählen Sie „Nur dieses Dokument“ für das Element „Definieren“ unten aus. Klicken Sie auf die Schaltfläche OK. Das Dialogfeld „Stildefinition für“ wird angezeigt und gibt die Einstellung für den Hyperlink-Stil ein. Die Kategorie auf der linken Seite ist die Stilkategorie. Für andere Elemente gibt es hier keine Erklärung. Wir wählen das Element „Erweiterungen“. Sie können das Cursor-Element im visuellen Effekt auf der rechten Seite sehen, das das Schlüsselelement zum Festlegen des Mausstils ist. Klicken Sie auf das Dropdown-Menü rechts, wählen Sie den gewünschten Mausstil aus und klicken Sie auf die Schaltfläche „OK“. Lassen Sie uns über die allgemeine Bedeutung jedes Stils sprechen.
Hand: ist eine bekannte Handform.
Fadenkreuz: Es ist ein kreuzförmiges Fadenkreuz, das dem Stil entspricht, der auf der Homepage von Little Turtle verwendet wird.
Text: Dies ist der Stil, wenn die Maus über den Text bewegt wird.
Warten: ist die Auswirkung des Wartens.
Standard: Dies ist der Standardeffekt.
Hilfe: ist der Mausstil mit Fragezeichen.
e-resize: ist der rechte Pfeil.
ne-resize: ist der Pfeil, der nach oben rechts zeigt.
n-resize: ist ein Aufwärtspfeil.
nw-resize: ist der Pfeil, der nach oben nach links zeigt.
w-resize: Es ist ein Pfeil nach links.
sw-resize: ist der nach links unten zeigende Pfeil.
s-resize: ist ein Abwärtspfeil.
se-resize: ist der nach rechts unten zeigende Pfeil.
auto: Dies ist der automatische Effekt des Systems.
Natürlich können Sie den Stil bei Bedarf auch auf andere Tags anwenden oder ihn einfach auf einen bestimmten Textabsatz anwenden. Wenn der Leser mit CSS-Code vertraut ist, ist es möglicherweise bequemer, den Code direkt von Hand zu schreiben. Insbesondere, wenn Sie unterschiedliche Mausstile für unterschiedliche Standorte oder unterschiedliche Mausstile für unterschiedliche Registerkarten verwenden möchten. Schreiben Sie den Stil einfach direkt in ein bestimmtes Tag.
Die Methode lautet: <tag style=cursor:mouse_style>. Dabei ist Tag der Tag-Name und Mouse_Style der Mausstil, z. B. Hand/Fadenkreuz/Text/Warten usw.
Lassen Sie uns ein konkretes Beispiel geben, um das Verständnis aller für die Mausstileinstellungen zu vertiefen.
<span style=cursor:hand> Hand: ist eine bekannte Handform. < /span>
< span style=cursor:crosshair>Fadenkreuz: Es handelt sich um ein Fadenkreuz, das dem Stil entspricht, der auf der Homepage von Little Turtle verwendet wird. < /span>
< span style=cursor:text>text: ist der Stil, in dem die Maus normalerweise über den Text bewegt wird. < /span>
< span style=cursor:wait>wait: ist der Effekt des Wartens. < /span>
< span style=cursor:default>default: ist der Standardeffekt. < /span>
< span style=cursor:help>help: ist ein Mausstil mit einem Fragezeichen. < /span>
< span style=cursor:e-resize>e-resize: ist ein Pfeil nach rechts. < /span>
< span style=cursor:ne-resize>ne-resize: ist ein Pfeil, der nach oben nach rechts zeigt. < /span>
< span style=cursor:n-resize>n-resize: ist ein Aufwärtspfeil. < /span>
< span style=cursor:nw-resize>nw-resize: ist ein Pfeil, der nach oben nach links zeigt. < /span>
< span style=cursor:w-resize>w-resize: Es ist ein Pfeil nach links. < /span>
< span style=cursor:sw-resize>sw-resize: ist ein nach links unten zeigender Pfeil. < /span>
< span style=cursor:s-resize>s-resize: ist ein Abwärtspfeil. < /span>
< span style=cursor:se-resize>se-resize: ist ein nach rechts unten zeigender Pfeil. < /span>
< span style=cursor:auto>auto: ist der automatische Effekt des Systems. </span>
Kopieren Sie den obigen Code auf Ihre Webseite und drücken Sie F12, um eine Vorschau anzuzeigen. Bewegen Sie Ihre Maus über den entsprechenden Text und sehen Sie, was mit der Maus passiert. Erscheint er im entsprechenden Stil?