Eine kleine Einführung in die Verwendung der Position in HTML
|
Ich habe gestern gerade etwas HTML gelernt und konnte es kaum erwarten, eine Suchleiste auf JD.com zu erstellen. Ich habe es geschafft, aber als ich den Einkaufswagen überprüfte, wusste ich nicht, wie ich eine darauf angezeigte Nummer hinzufügen sollte. Wenn ich möchte, dass sich die Nummer mit dem Einkaufswagen bewegt, muss ich sie zusammen positionieren. Für die Positionierung ist definitiv eine Position erforderlich. Stellen Sie zuerst die Position des Div mit der Nummer auf absolut ein, was mir ein Gefühl der Schichtung vermittelt. Da das übergeordnete Tag der Position der Nummer body ist, kann ich auch oben und links mit dem Einkaufswagen auf die gewünschte Position setzen. Wenn ich jedoch den Rand des Einkaufswagens ändere, können sich die beiden nicht zusammen bewegen, daher stelle ich die Position des Einkaufswagens auf relativ ein, sodass das übergeordnete Tag der Position der Nummer zum Einkaufswagen wird. Egal, wie der Rand des Einkaufswagens angepasst wird, die Nummer wird sich mit ihm bewegen ... Code kopieren Der Code lautet wie folgt:<html> <Kopf> <title>tag03.html</title> <style type="text/css"> /*Schreiben Sie zuerst ein Positions-Div*/ #Auto{ Breite: 150px; Höhe: 30px; Hintergrund: #999999; Farbe: weiß; Textausrichtung: zentriert; Zeilenhöhe: 30px; Rand: 232px 300px; Rand: 1px, durchgehend schwarz; Position: relativ; } #num{ Breite: 20px; Höhe: 20px; Hintergrund: rot; Farbe: weiß; Textausrichtung: zentriert; Zeilenhöhe: 20px; Position: absolut; oben: -15px; links: 25px; } </Stil> </Kopf> <Text> <div id="Auto"> Zum Bezahlen in den Warenkorb gehen <div id="Nummer">0</div> </div> </body> </html> |
<<: Details zu Makrotasks und Mikrotasks in JavaScript
Artikel empfehlen
Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen
Existiert die Zeit wirklich? Manche Menschen glau...
Zusammenfassung der Möglichkeiten zur Implementierung von Single Sign-On in Vue
Das Projekt wurde vor Kurzem ausgesetzt und die U...
Standardmäßige Stilanordnung für HTML-Tags
html, address,blockquote,body, dd, div,dl, dt, fie...
Implementierung einer einfachen Web-Uhr mit JavaScript
Verwenden Sie JavaScript, um eine Webseitenuhr zu...
Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns
8 Optimierungsmethoden für das MySQL-Datenbankdes...
Hinweise zur Adresszuordnung von Gerätetreibern im Linux-Kernel
#include <asm/io.h> #define ioremap(Cookie,...
Detaillierte Erläuterung der Kernkonzepte und Fälle von webpack-dev-server
Kernkonzepte von webpack-dev-server Webpacks Cont...
Es ist ganz einfach zu verstehen, was Node.js ist
Inhaltsverzeichnis Offizielle Einführung in Node....
So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image
Führen Sie zunächst eine einfache Docker-Installa...
Einführung in die Verwendung von Alt- und Titelattributen von HTML-Img-Tags
Wenn Browser-Anbieter die Standards umgehen und ei...
In einem Artikel erfahren Sie, wie Sie ein Vue-Plugin schreiben
Inhaltsverzeichnis Was ist ein Plugin Plugins sch...
Detaillierte Erklärung der Listendarstellung von Vue
Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...
Mehrere Möglichkeiten zum Ändern der SELECT-Optionen in einer HTML-Dropdown-Box
Nachdem das Formular übermittelt wurde, wird die z...
Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript
Vererbung von Kompositionen Kombinationsvererbung...
VUE führt die Implementierung der Verwendung von G2-Diagrammen ein
Inhaltsverzeichnis Über G2 Chart verwenden Vollst...