


js css implementiert einen dreidimensionalen vertikalen Menüeffekt für Schaltflächentext
Das Beispiel in diesem Artikel beschreibt die Implementierung eines dreidimensionalen vertikalen Menüeffekts mit schaltflächenartigem Text mithilfe von js css. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
Dies ist ein relativ gutes vertikales Menü mit dreidimensionalem Effekt. Denken Sie nicht, dass es sich bei diesen Menüs mit dreidimensionalen Effekten um Schaltflächen handelt, die mit JavaScript dekoriert sind Wenn die Maus platziert wird, entsteht ein offensichtlicher dreidimensionaler Texteffekt, der vertikal angeordnet oder in horizontal geändert werden kann.
Der Screenshot des Laufeffekts lautet wie folgt:
Der spezifische Code lautet wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>有立体感的按钮式文字菜单,竖排</TITLE> </HEAD> <BODY> <STYLE type=text/css>A:link { TEXT-DECORATION: none } A:visited { TEXT-DECORATION: none } A:active { TEXT-DECORATION: none } A:hover { TEXT-DECORATION: none } .up { BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0 } </STYLE> <SCRIPT language=JavaScript> <!-- IE and NS6 Menu Button script kurt.grigg@virgin.net if (!document.layers){ // Choose size and colours here! Width=100; Font='Verdana'; FontSize=9; AFontColor='#000000'; BFontColor='red'; CFontColor='#ffffff'; down="#6699cc"; FontWeight='normal'; //normal or bold! BackGround='#99ccff'; //Same as your body bgcolor! BorderDepth=2; BorderLight='#FFFFFF'; BorderShad='#000000'; //Nothing needs altering past here!!!!!!!!!!!!!!!!!!!!!! function On(id){ with(id.style){ color=BFontColor; borderTopColor=BorderLight; borderLeftColor=BorderLight; borderRightColor=BorderShad; borderBottomColor=BorderShad; } } function Off(id){ with(id.style){ color=AFontColor; borderTopColor=BackGround; borderLeftColor=BackGround; borderRightColor=BackGround; borderBottomColor=BackGround; background=BackGround; } } function Down(id){ with(id.style){ color=CFontColor; borderTopColor=BorderShad; borderLeftColor=BorderShad; borderRightColor=BorderLight; borderBottomColor=BorderLight; background=down; } } function Link(Url,Txt,target){ document.write("<a href='"+Url+"' target='"+target+"'>" +"<p style='position:relative;" +"width:"+Width+"px;height:"+FontSize+"px;" +"border-width:"+BorderDepth+"px;" +"border-color:"+BackGround+";" +"border-style:solid;" +"padding:"+FontSize/4.5+"pt;" +"background:"+BackGround+";" +"font-family:"+Font+";" +"font-size:"+FontSize+"pt;" +"line-height:"+FontSize*1.2+"pt;" +"font-weight:"+FontWeight+";" +"text-align:left;" +"color:"+AFontColor+";" +"margin-top:2px;" +"cursor:hand'" +"onMouseOver='javascript:On(this)'" +"onMouseOut='javascript:Off(this)'" +"onMouseDown='javascript:Down(this)'>" +Txt+"</p></a>"); } } function Temp(){ alert("TEST"); } //--> </SCRIPT> <!-- End Menu Buttons Part:1 --> <!-- Menu Buttons Part:2 Paste in Body where needed --> <SCRIPT language=JavaScript> <!-- if (!document.layers){ if (document.getElementById&&!document.all){ document.write("<p style='position:relative'>" +"<table border='0' cellpadding='0' cellspacing='0'>" +"<tr><td valign='top'>"); } Link('http://www.baidu.com','百度一下','_blank'); Link('http://www.yahoo.com','Yahoo','_blank'); Link('http://www.google.com','Google','_blank'); Link('http://www.hongen.com','洪恩在线','_blank'); Link('http://www.163.com','网易','main'); if (document.getElementById&&!document.all){ document.write("</td></tr></table></p>"); } } //--> </SCRIPT> </BODY> </HTML>

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Mit lokal installierten Schriftdateien auf Webseiten kürzlich habe ich eine kostenlose Schriftart aus dem Internet heruntergeladen und sie erfolgreich in mein System installiert. Jetzt...

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Kompatibilitätsprobleme des Multi-Reis-Überlaufs auf mobilen Terminal auf verschiedenen Geräten bei der Entwicklung mobiler Anwendungen mit VUE 2.0 begegnen Sie häufig auf die Notwendigkeit, den Text zu überfließen ...

Eingehende Diskussion über verschachtelte Methoden zur Änderung des Div-Stils In diesem Artikel wird detailliert erklärt, wie der Div-Element-Stil von verschachtelten Strukturen effektiv geändert werden kann. Die Herausforderung, vor der wir stehen, ist, wie ...

Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

Die Vorteile der H5 -Seitenproduktion umfassen: Leichte Erfahrung, schnelle Ladegeschwindigkeit und Verbesserung der Benutzerbindung. Die plattformübergreifende Kompatibilität ist nicht erforderlich, um sich an verschiedene Plattformen anzupassen und die Entwicklungseffizienz zu verbessern. Flexibilität und dynamische Updates, kein Audit erforderlich, was die Änderung und Aktualisierung von Inhalten erleichtert. Kosteneffektive, niedrigere Entwicklungskosten als native Apps.

Warum werden negative Margen in einigen Fällen nicht wirksam? Während der Programmierung negative Margen in CSS (negativ ...
