Im vorherigen Artikel „So erstellen Sie mit dem Front-End Three Musketeers einen schönen Countdown-Effekt“ habe ich Ihnen vorgestellt, wie Sie den Countdown-Effekt mit HTML, CSS und Javascript implementieren. Freunde in Not können mehr darüber erfahren~
Der Hauptinhalt dieses Artikels besteht darin, Ihnen beizubringen, wie Sie eine Tabelle erstellen, ohne das
Zuallererst sollte jeder wissen, dass HTML die Standard-Markup-Sprache ist, die zum Erstellen von Webseiten verwendet wird, aber tatsächlich mit Hilfe von Cascading Style Sheets (CSS) möglich ist. Sie können Tabellen auch in HTML erstellen, ohne Tags zu verwenden.
Weil verschiedene CSS-Frameworks verfügbar sind, wie z. B. BootStrap, Foundation, Pure, Bulma, UI-Kit, Materialise CSS, Semantic UI, Spectre usw.
Bootstrap ist unter anderem ein sehr weit verbreitetes CSS-Framework. Das Rastersystem von Bootstrap verfügt über eine integrierte Flexbox, ein eindimensionales Layoutmodell, das räumliche Verteilung und leistungsstarke Ausrichtungsfunktionen zwischen Elementen in der Benutzeroberfläche bietet.
Erstellen wir eine Tabelle mithilfe des BootStrap-Frameworks von CSS
Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
|
Der Effekt ist wie folgt:
Hinweis:
Bootstrap CDN ist ein öffentliches Netzwerk zur Bereitstellung von Inhalten Ermöglicht Benutzern das Herunterladen von Inhalten. Der Server lädt CSS, JavaScript und Bilder aus der Ferne. BootStrap CDN verlinkt auf Code, um auf integrierte CSS-Bibliotheksklassen zuzugreifen.
Container werden verwendet, um den eigentlichen Inhalt horizontal zu zentrieren und zu füllen.
Zeilen kapseln Spalten.
Columns Spalten sind direkte untergeordnete Elemente von Zeilen. Der Inhalt muss in Spalten platziert werden. Spalten ohne angegebene Breite werden automatisch als Spalten gleicher Breite angezeigt. Wir können Spaltenbreiten explizit angeben oder verschiedenen Bildschirmgrößen unterschiedliche Breiten zuweisen. Wir können Hintergrundfarben für verschiedene Zeilen oder Spalten mithilfe vordefinierter Hilfsklassen (z. B. bg-success, bg-info, bg-danger, bg-warning), Stylesheets oder Inline-Stilen festlegen.
Border ist eine vordefinierte Klasse in BootStrap, die zum Erstellen von Rändern um Zellen verwendet wird. Darüber hinaus gibt es mehrere Border-Utility-Klassen (z. B. border-dark, border-light, border-danger, border-success, border-warning), die das Erscheinungsbild durch Angabe von Farbe oder Rahmenbreite weiter verbessern können.
Empfohlene Tutorials: „Javascript-Grundlagen-Tutorial“ „Bootstrap-Tutorial“ „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonHerausforderung Wie erstelle ich eine Tabelle ohne Verwendung des
-Tags?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!