CSS3-Kategoriemenüeffekt
|
Die CSS3-Kategoriemenüeffekte sind wie folgt:
HTML
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
#bg { Breite: 1270px; Höhe: 751px; Rand: 0 auto; Hintergrund: URL("images/bg.jpg") keine Wiederholung; }
.sblock { Breite: 800px; Höhe: 250px; Rand: 0 auto;}
/*.sblock { transform:translateY(65%); }*/
.sblock > div { Breite: 200px; Höhe: 250px; Rand: 0 auto; }
.sb1 { padding-top: 170px; }
.sb2 { Polsterung oben: 30px; }
.sblock div:hover { transform: translateY(-10px); }
.sblock div { Übergang:alle 0,5 s; }
.sb1 > div:n-ter-Typ(1) { float: left; Hintergrund: url("images/1.jpg") keine Wiederholung; }
.sb1 > div:n-ter-Typ(2) { float: links; Hintergrund: URL("Bilder/2.jpg") keine Wiederholung; }
.sb1 > div:n-ter-Typ(3) { float: left; Hintergrund: url("images/3.jpg") keine Wiederholung; }
.sb1 > div:n-ter-Typ(4) { float: left; Hintergrund: url("images/4.jpg") keine Wiederholung; }
.sb2 > div:n-ter-Typ(1) { float: left; Hintergrund: url("images/5.jpg") keine Wiederholung; }
.sb2 > div:n-ter-Typ(2) { float: left; Hintergrund: url("images/6.jpg") keine Wiederholung; }
.sb2 > div:n-ter-Typ(3) { float: left; Hintergrund: url("images/7.jpg") keine Wiederholung; }
.sb2 > div:n-ter-Typ(4) { float: left; Hintergrund: url("images/8.jpg") keine Wiederholung; }
</Stil>
</Kopf>
<Text>
<div id="bg">
<Abschnitt Klasse="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</Abschnitt>
<Abschnitt Klasse="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</Abschnitt>
</div>
</body>
</html>Zusammenfassen Oben sehen Sie den vom Editor eingeführten CSS3-Klassifizierungsmenüeffekt. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Die große Rolle von HTML-Meta
Artikel empfehlen
Detaillierte Erläuterung des Prozesses zum Bereitstellen des verteilten Konfigurationscenters Apollo mit einem Klick mithilfe von Docker Compose
Einführung Wenn wir über Verteilung sprechen, müs...
Tabelle zeigt den Grenzcode, den Sie anzeigen möchten
Gemeinsame Eigenschaften von Tabellen Die grundle...
So stellen Sie über Navicat eine Remoteverbindung zu MySQL her
Wenn Sie Navicat direkt für die Verbindung über I...
Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)
Konfigurationsdatei, die beim Systemstart geladen...
So verwenden Sie den Linux-Befehl nl
1. Befehlseinführung nl (Anzahl der Zeilen) fügt ...
Einführung in die Linux-Dateikomprimierung und -Verpackung
1. Einführung in Komprimierung und Verpackung All...
Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung
Vor Kurzem musste ich das Projekt für die Mitglie...
MySQL-Methode und Beispiel für langsame Abfragen
1. Einleitung Durch Aktivieren des Slow Query Log...
Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)
Original-URL: http://segmentfault.com/blog/ciaocc/...
Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen
Im vorherigen Artikel wurde vorgestellt, wie Vue ...
Erfahren Sie mehr über MySQL-Indizes
1. Indexierungsprinzip Indizes werden verwendet, ...
Detaillierte Schritte zur Installation der Node.js-Umgebung und Pfadkonfiguration unter Linux
Es gibt zwei Möglichkeiten, nodejs unter Linux zu...
Detaillierte Erklärung des Skript-Debugging-Mechanismus in Bash
Ausführen des Skripts im Debugmodus Sie können da...
Analyse der MySql-Indexnutzungsstrategie
MySql-Index Indexvorteile 1. Sie können die Einde...
Analyse der Verwendung von MySQL-Abfragesortierung und Abfrageaggregationsfunktionen
In diesem Artikel wird die Verwendung von MySQL-A...