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
So richten Sie geplante Sicherungsaufgaben in Linux CentOS ein
Implementierungsvorbereitung # Der Dateipfad muss...
Centos7 Zabbix3.4-E-Mail-Alarmkonfiguration (Lösung des Problems, dass der E-Mail-Inhalt ein xx.bin-Anhang ist)
Inhaltsverzeichnis 1. Fügen Sie einen überwachend...
Implementierung von Nginx-Weiterleitungsübereinstimmungsregeln
1. Regulärer Ausdrucksabgleich ~ für Groß- und Kl...
Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode
1. Chinesische Eingabemethode einrichten 2. Stell...
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...
Vue3-Zeitstempelkonvertierung (ohne Verwendung von Filtern)
Wenn vue2 Zeitstempel konvertiert, verwendet es i...
Methoden und Schritte für den Zugriff auf die Baidu Maps API mit JavaScript
Inhaltsverzeichnis 1. Baidu Map API-Zugriff 2. Ve...
HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen
Teil 1 HTML <html> – Start-Tag <Kopf>...
Einführung in den Unterschied zwischen OBJECT- und EMBED-Tags zur Anzeige von Flash-Inhalten
1. Einleitung: Wenn wir Flash-Inhalte normal auf d...
Centos8.3, Docker-Bereitstellung, Springboot-Projekt, tatsächliche Fallanalyse
Einführung Derzeit ist k8s sehr beliebt und ich h...
Detaillierte Analyse des Flex-Layouts in CSS3
Das Flexbox-Layoutmodul soll eine effizientere Mö...
Einführung in die Verwendung des HTML-Basistags target=_parent
Der <base>-Tag gibt die Standardadresse oder...
Natives JS zur Implementierung eines Klickzahlenspiels
Native JS implementiert das Klickzahlenspiel zu I...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11 Neue Kennwortauthentifizierungsmethode für MySQL 8.0
In diesem Artikel finden Sie das grafische Tutori...
Reacts Methode zur Realisierung einer sekundären Verknüpfung
In diesem Artikel wird der spezifische Code von R...