HTML implementiert ein festes schwebendes, halbtransparentes Suchfeld auf Mobilgeräten
|
Frage. Im mobilen Shopping-Mall-System sehen wir oft ein Suchfeld oben auf der Seite. Blogger bevorzugen diese Art von Suchfeld, das oben auf der Seite fixiert, halbtransparent und schwebend ist, sodass ein Teil des Karussells vage zu sehen ist.
Der technische Schlüssel zum Erstellen eines solchen Suchfelds liegt in:
Lösung. Zuerst definieren wir ein HTML-Fragment:
<!-- Suchfeld -->
<header class="bar">
<form name="Suche" class="Suche" id="Suche" action="">
<div Klasse="Suchzeile">
<input type="search" name="word" id="word">
<span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">Suche</span></span>
</div>
</form>
</header>
<!-- Ein Hintergrundbild ist oft ein Karussellbild-->
<div Klasse="Hintergrund">
<img src="bg.jpg">
</div>Das Header-Tag ist ein Suchfeld und das Div darunter ist ein Hintergrundbild. Fügen Sie auch den CSS-Stil hinzu:
<style type="text/css">
Körper {
Rand: 0; Polsterung: 0;
Schriftgröße: 14px; Schriftfamilie: „Microsoft Yahei“, „Arial“, „Verdana“, „Helvetica“, serifenlos;
}
.Bar {
Position: fest; oben: 0; links: 0; rechts: 0; /* Bestimmt, ob das Suchfeld oben fixiert ist */
Höhe: 44px; Abstand: 0 10px;
Hintergrundfarbe: #fff; Deckkraft: 0,8; /*Halbtransparenter Effekt für Suchfeld*/
Z-Index: 10;
}
.bar-Formular {
Anzeige: Block; Polsterung: 0; Rand: 0;
}
.Suchzeile {
Position: relativ;
Höhe: 30px; Abstand: 7px 0;
}
.search-row input[Typ=Suche] {
Position: absolut; oben: 7px;
Höhe: 30px; Zeilenhöhe: 21px; Breite: 100 %; Polsterung: 10px 15px 10px 30px;
Rand: 0; Randradius: 6px; Umriss: 0; Hintergrundfarbe: rgba(0,0,0,0,1);
Schriftgröße: 16px; Textausrichtung: zentriert;
Z-Index: 100;
}
.Suchzeile .Platzhalter {
Position: absolut; oben: 2px; links: 0; rechts: 0;
Anzeige: Inline-Block; Höhe: 34px; Zeilenhöhe: 34px;
Rand: 0; Randradius: 6px;
Schriftgröße: 16px; Textausrichtung: zentriert; Farbe: #999;
Z-Index: 1;
}
.Suchzeile .Platzhalter .Iconfont {
Anzeige: Inline-Block; Breite: 19px; Zeilenhöhe: 24px; Polsterung: 10px 0;
Schriftgröße: 21px; Farbe: #666;
}
.Suchzeile .Platzhalter .Text {
Zeilenhöhe: 40px;
vertikale Ausrichtung: oben;
}
.Hintergrundbild {
Breite: 100 %;
}
.aktiv:vor {
Position: absolut; oben: 11px; links: 5px; rechts: automatisch;
Anzeige: Block; Rand rechts: 0;
Schriftgröße: 21px;
}
.aktive Eingabe[Typ=Suche] {
Textausrichtung: links
}
.aktiv .Platzhalter{
Anzeige: keine
}
</Stil>Dies ist ein langer Abschnitt zum CSS-Stil, aber sein Kern besteht nur aus zwei Sätzen: position: fixed; /* bestimmt, dass das Suchfeld oben fixiert werden soll*/ und background-color: #fff; opacity: 0.8; /* durchscheinender Effekt des Suchfelds*/. Die anderen Stile sind für das Layout der Seite. Die Details des Layouts müssen von den Lesern selbst geschrieben und verstanden werden, was einige Zeit in Anspruch nehmen kann. Auf diese Weise haben wir ein statisches Suchfeld fertiggestellt:
Hinweis: Das Suchsymbol hier verwendet Iconfont. Leser können es aus der Iconfont-Vektorsymbolbibliothek herunterladen. An dieser Stelle müssen wir noch einige Animationen über JS implementieren:
Es wird verwendet, um das Standortsymbol „Suchen“ zu wechseln, wenn der Benutzer die Eingabe wechselt. Das Prinzip ist sehr einfach: Klassenklassen werden hinzugefügt und entfernt, die den Stil definieren.
.aktiv:vor {
Position: absolut; oben: 11px; links: 5px; rechts: automatisch;
Anzeige: Block; Rand rechts: 0;
Schriftgröße: 21px;
}
.aktive Eingabe[Typ=Suche] {
Textausrichtung: links
}
.aktiv .Platzhalter{
Anzeige: keine
}
<Skripttyp="text/javascript">
/* Das Eingabefeld erhält den Fokus und zeigt damit an, dass der Benutzer tippt*/
$("#Wort").fokussieren(Funktion() {
$(".search-row").addClass("aktive Iconfont-Symbol-sousuo");
});
/* Das Eingabefeld verliert den Fokus und zeigt damit an, dass der Benutzer mit der Eingabe fertig ist*/
$("#Wort").Fokussierung(Funktion() {
/*Überprüfen, ob der Benutzer Inhalt eingegeben hat*/
wenn ($(this).val()=="") {
/* Keine Inhaltseingabe zum Ändern des Stils*/
$(".search-row").removeClass("aktive Iconfont-Icon-sousuo");
} anders {
/* Geben Sie Inhalt ein, um den Stil beizubehalten, und senden Sie das Formular ab*/
$("#search").senden();
}
});
</Skript>Hinweis: Sie müssen hier jQuery importieren, vergessen Sie es nicht! Verlängerung. Vollständiger HTML-Code:
<!DOCTYPE html>
<html>
<Kopf>
<Titel></Titel>
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Benutzerskalierung=nein">
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
Körper {
Rand: 0; Polsterung: 0;
Schriftgröße: 14px; Schriftfamilie: „Microsoft Yahei“, „Arial“, „Verdana“, „Helvetica“, serifenlos;
}
.Bar {
Position: fest; oben: 0; links: 0; rechts: 0; /* Bestimmt, ob das Suchfeld oben fixiert ist */
Höhe: 44px; Abstand: 0 10px;
Hintergrundfarbe: #fff; Deckkraft: 0,8; /*Halbtransparenter Effekt für Suchfeld*/
Z-Index: 10;
}
.bar-Formular {
Anzeige: Block; Polsterung: 0; Rand: 0;
}
.Suchzeile {
Position: relativ;
Höhe: 30px; Abstand: 7px 0;
}
.search-row input[Typ=Suche] {
Position: absolut; oben: 7px;
Höhe: 30px; Zeilenhöhe: 21px; Breite: 100 %; Polsterung: 10px 15px 10px 30px;
Rand: 0; Randradius: 6px; Umriss: 0; Hintergrundfarbe: rgba(0,0,0,0,1);
Schriftgröße: 16px; Textausrichtung: zentriert;
Z-Index: 100;
}
.Suchzeile .Platzhalter {
Position: absolut; oben: 2px; links: 0; rechts: 0;
Anzeige: Inline-Block; Höhe: 34px; Zeilenhöhe: 34px;
Rand: 0; Randradius: 6px;
Schriftgröße: 16px; Textausrichtung: zentriert; Farbe: #999;
Z-Index: 1;
}
.Suchzeile .Platzhalter .Iconfont {
Anzeige: Inline-Block; Breite: 19px; Zeilenhöhe: 24px; Polsterung: 10px 0;
Schriftgröße: 21px; Farbe: #666;
}
.Suchzeile .Platzhalter .Text {
Zeilenhöhe: 40px;
vertikale Ausrichtung: oben;
}
.Hintergrundbild {
Breite: 100 %;
}
.aktiv:vor {
Position: absolut; oben: 11px; links: 5px; rechts: automatisch;
Anzeige: Block; Rand rechts: 0;
Schriftgröße: 21px;
}
.aktive Eingabe[Typ=Suche] {
Textausrichtung: links
}
.aktiv .Platzhalter{
Anzeige: keine
}
</Stil>
</Kopf>
<Text>
<!-- Suchfeld -->
<header class="bar">
<form name="Suche" class="Suche" id="Suche" action="">
<div Klasse="Suchzeile">
<input type="search" name="word" id="word">
<span class="placeholder "><span class="iconfont icon-sousuo"></span><span class="text">Suche</span></span>
</div>
</form>
</header>
<!-- Ein Hintergrundbild ist oft ein Karussellbild-->
<div Klasse="Hintergrund">
<img src="bg.jpg">
</div>
</body>
<Skripttyp="text/javascript">
/* Das Eingabefeld erhält den Fokus und zeigt damit an, dass der Benutzer tippt*/
$("#Wort").fokussieren(Funktion() {
$(".search-row").addClass("aktive Iconfont-Symbol-sousuo");
});
/* Das Eingabefeld verliert den Fokus und zeigt damit an, dass der Benutzer mit der Eingabe fertig ist*/
$("#Wort").Fokussierung(Funktion() {
/*Überprüfen, ob der Benutzer Inhalt eingegeben hat*/
wenn ($(this).val()=="") {
/* Keine Inhaltseingabe zum Ändern des Stils*/
$(".search-row").removeClass("aktive Iconfont-Icon-sousuo");
} anders {
/* Geben Sie Inhalt ein, um den Stil beizubehalten, und senden Sie das Formular ab*/
$("#search").senden();
}
});
</Skript>
</html>Zusammenfassen Oben ist die Einführung von HTML, um das feste, schwebende, halbtransparente Suchfeld auf Mobilgeräten zu realisieren. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Implementierung des CSS-Animationseffekts für dynamische Höhenübergänge
>>: MySQL-Datenbankbeschränkungen und Prinzipien des Datentabellenentwurfs
Artikel empfehlen
Detaillierte Erläuterung der Verwendung des Linux-Befehls seq
01. Befehlsübersicht Der Befehl „seq“ wird verwen...
Was sind die Vorteile von MySQL MGR?
MGR (MySQL Group Replication) ist eine neue Funkt...
So stellen Sie Spring Boot mit Docker bereit
Die Entwicklung der Docker-Technologie bietet ein...
Detaillierte Erläuterung des Fehlerproblems der Case-When-Anweisung
Vorwort In der MySQL-Datenbank verwenden wir manc...
Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird
Als ich eine neue Version der Konfigurationsschni...
So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an
Vorschlag: Das möglichst häufige handschriftliche ...
Umfassendes Verständnis des html.css-Überlaufs
Umfassendes Verständnis des html.css-Überlaufs XM...
So verwenden Sie den CocosCreator-Objektpool
Inhaltsverzeichnis Vorwort: Spezifische Operation...
Informationen zur VSCode-Formatierung von JS durch automatisches Hinzufügen oder Entfernen von Semikolons
Einführung Es ist in Ordnung, am Ende eines JS-Co...
Eine kurze Analyse der Probleme mit JS-Originalwerten und Referenzwerten
Primitive Werte -> primitive Typen Number Stri...
mySql SQL-Abfrageoperation für statistische Mengen
Ich werde nicht viel Unsinn erzählen, schauen wir...
MySQL-Benutzerdefinierte Funktion zum Bestimmen, ob es sich um einen positiven Ganzzahl-Beispielcode handelt
Sie können eine Funktion schreiben: Verwenden Sie...
Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox
Die Netzwerkkonfiguration des Host Only+NAT-Modus...
Erklären, wie die SQL-Effizienz analysiert wird
Der Befehl „Explain“ ist der erste empfohlene Bef...
Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung
Inhaltsverzeichnis Überblick Installieren Sie Gul...