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
Installieren des Ping-Tools in einem von Docker erstellten Container
Denn die von Docker abgerufenen Basisimages wie C...
onfocus="this.blur()" wird von blinden Webmastern gehasst
Als er über die Seite zur Bedienung der Bildschir...
Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3
Inhaltsverzeichnis Vom Vater zum Sohn: 1. Übergeb...
Reagieren Sie mit Beispielcode zur Implementierung der automatischen Browseraktualisierung
Inhaltsverzeichnis Was ist Front-End-Routing? Wie...
Zusammenfassung der Mysql-Existes-Verwendung
Einführung Mit EXISTS wird geprüft, ob eine Unter...
So stellen Sie mit Navicat Premium eine Remoteverbindung zur MySQL-Datenbank her
Derjenige, der eine neue Verbindung herstellt, en...
Beispielcode zum Bereitstellen eines Spring-Boot-Projekts mit Docker
1. Grundlegender Spring-Boot-Schnellstart 1.1 Sch...
Zwei Bilder von JavaScript zum Verständnis der Prototypenkette
Inhaltsverzeichnis 1. Prototyp-Beziehung 2. Proto...
Fehler MySQL-Tabelle 'performance_schema...Lösung
Die Testumgebung ist mit MariaDB 5.7 eingerichtet...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.20 (Win10)
In diesem Artikel wird die Installations- und Kon...
Gedanken- und Erfahrungsaustausch zum interaktiven Design von Leselisten für Informationsprodukte
Eine Liste ist definiert als eine Text- oder Diag...
Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann
Die Lösung für das Problem, dass Ubuntu 18.04 in ...
MySQL-unabhängiger Index und gemeinsame Indexauswahl
Häufig fehlt das Verständnis für mehrspaltige Ind...
Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)
Code kopieren Der Code lautet wie folgt: @Zeichen...
Wo werden MySQL-Daten gespeichert?
Speicherort der MySQL-Datenbank: 1. Wenn MySQL di...