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
Der Unterschied zwischen HTML-Frame, Iframe und Frameset
10.4.1 Der Unterschied zwischen Frameset und Fram...
jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm
In diesem Artikel wird der spezifische Code von j...
So verwenden Sie mysqladmin, um die aktuellen TPS und QPS einer MySQL-Instanz abzurufen
mysqladmin ist ein offizielles MySQL-Clientprogra...
7 native JS-Fehlertypen, die Sie kennen sollten
Inhaltsverzeichnis Überblick 1. Bereichsfehler 2....
Vergleich der Vorteile von vue3 und vue2
Inhaltsverzeichnis Vorteil 1: Optimierung des Dif...
Nginx Reverse-Proxy-Konfiguration entfernt Präfix
Wenn Sie nginx als Reverse-Proxy verwenden, könne...
Implementierung der benutzerdefinierten MySQL-Listensortierung nach angegebenen Feldern
Problembeschreibung Wie wir alle wissen, lautet d...
So implementieren Sie eine bidirektionale MySQL-Sicherung
Die bidirektionale MySQL-Sicherung wird auch als ...
Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten
Inhaltsverzeichnis Vorwort Rendern setTable-Kompo...
So implementieren Sie die Eingabeaufforderung für das H5-Eingabefeld + die Eingabeaufforderung für das normale Textfeld
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit
1. Vue-Projekt verpacken Geben Sie den folgenden ...
Tutorial zur Installation und Konfiguration von MySql5.7 in Alibaba Cloud ECS centos6.8
Die Standard-MySQL-Version unter dem Alibaba Clou...
CSS3-Zeitleistenanimation
Ergebnisse erzielen html <h2>CSS3-Zeitleist...
Sechs Tipps zur Verbesserung der Ladegeschwindigkeit von Webseiten
Zweitens hängt das Ranking von Schlüsselwörtern au...
Die Qualitäten und Fähigkeiten, die ein Webdesigner haben sollte
Webdesign ist eine aufstrebende Randbranche, die n...