Guten Tag, Freunde!
Herausforderung
Machen Sie etwas Ähnliches wie
Codepen Dashboard.
Das Ergebnis sollte ungefähr so aussehen:
Mögliche Lösung
Das Layout eines Abschnitts könnte folgendermaßen aussehen:
<section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section>
Was ist hier interessant?
Da jeder Block einen Titel hat, können wir ihn in einen Abschnitt einschließen (gemäß der Spezifikation müssen Abschnitt und Artikel Überschriften haben).
.viewport - Ein Block, der einen Frame enthält (im Folgenden nennen wir ihn nur einen Block).
Das Attribut src bezieht sich auf den Inhalt des Frames, der mit JS durch ein "Cover" ersetzt wird (dazu später mehr).
Seamless gibt an, dass der Inhalt des Frames so angezeigt werden soll, als wäre er Teil eines Dokuments (derzeit nicht unterstützt).
Scrollen = "nein" verhindert die Anzeige von Bildlaufleisten im Rahmen.
Window.open ist eine Möglichkeit, den Inhalt eines Frames zu öffnen ("_blank" in einem neuen Tab).
Document.location ist eine Möglichkeit, eine Datei herunterzuladen.
Alles HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width: device-width"> <title>Iframe</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <header> <h2>Title</h2> </header> <main> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> <section> <h3>Title</h3> <div class="viewport"> <iframe src="index.html" seamless scrolling="no"></iframe> </div> <div class="buttons"> <button onclick="window.open('index.html', '_blank')" title="fullscreen">demo</button> <button onclick="document.location='code.7z'" title="download">code</button> </div> </section> </main> <footer> <p>© All rights reserved.</p> </footer> </body></html>
Problemnummer 1. Geben Sie den Rahmen in den Block ein
Die Standard-Iframe-Größe in Chrome ist 304x154px.
Wenden Sie die folgenden Stile auf den Abschnitt an:
section { margin: 1em; width: 300px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); }
Durch Festlegen der Abschnittsbreite auf 300 Pixel (+ Metaname = "Ansichtsfenster" und Anzeige: Flex auf dem übergeordneten Element) wird die gleiche Frame-Anzeige auf Bildschirmen mit unterschiedlichen Auflösungen sichergestellt.
Es stellt sich so heraus:
Und es sollte so sein:
Wie Sie sehen, besteht das Problem darin, dass der Inhalt im Frame in voller Größe angezeigt wird und der Frame selbst geringfügig über die Grenzen des Blocks hinausgeht.
Eine Möglichkeit, dieses Problem zu lösen, besteht darin, den iframe zu skalieren:
iframe { width: 1024px; height: 768px; transform: scale(.25); transform-origin: 0 0; }
Bestimmen Sie als Nächstes die Größe des Blocks. Breite: 1024 × 0,25 = 256 Pixel, Höhe: 768 × 0,25 = 192 Pixel.
Alles CSS @import url("https://fonts.googleapis.com/css?family=Playfair+Display|Roboto&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: radial-gradient(circle, skyblue, steelblue) fixed; display: flex; flex-direction: column; font-family: "Playfair Display", serif; text-align: center; color: #222; } h2 { font-size: 2em; text-transform: uppercase; text-shadow: 1px 1px #ddd; user-select: none; } main { flex-grow: 1; display: inherit; flex-wrap: wrap; justify-content: space-evenly; align-content: space-evenly; } section { margin: 1em; width: 300px; background: rgba(0, 0, 0, 0.15); border-radius: 5px; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); } .viewport { margin: auto; width: 256px; height: 192px; overflow: hidden; } iframe { width: 1024px; height: 768px; transform: scale(.25); transform-origin: 0 0; } h3 { padding: 0.5em 0; font-size: 1em; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: #ddd; text-shadow: 1px 1px 0 #222; user-select: none; } button { border: none; outline: none; margin: 0.75em 0; padding: 0.75em; width: 100px; background: linear-gradient(to bottom, skyblue, steelblue); font-family: inherit; font-weight: bold; letter-spacing: 2px; color: inherit; text-transform: uppercase; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); cursor: pointer; transition: .2s; } button + button { margin-left: 1em; } button:active, button:checked, button:focus, button:hover { background: radial-gradient(steelblue, skyblue); color: #ddd; box-shadow: inset 0 0 2px rgba(0, 0, 0, .4); }
Problem Nr. 2: Anzeigen von Inhalten beim Hover
Mit einer signifikanten Anzahl von Frames auf der Seite, insbesondere bei dynamischen Inhalten, erhalten wir ein sehr langes Laden / Neuladen und konstante Verzögerungen beim Scrollen.
Um dieses Problem zu lösen, deaktivieren wir den Inhalt der Frames und ersetzen ihn durch ein Bild. Das Bild sollte eine Größe von 1024x768px haben. Um genauer zu sein, ändern wir die Adressen der Dateien - der Wert ist src (bei Codepen wird dieses Problem durch eine kurze Animation des Inhalts des Frames gelöst). Wenn Sie mit der Maus über ein bestimmtes Bild fahren, sollte dessen Inhalt angezeigt werden.
Die Lösung könnte sein:
Das Ergebnis ist hier zu sehen.
Danke für die Aufmerksamkeit. Alles Gute.