Verwenden Sie Iframe, um Wettereffekte auf Webseiten anzuzeigen

Verwenden Sie Iframe, um Wettereffekte auf Webseiten anzuzeigen
CSS:

Code kopieren
Der Code lautet wie folgt:

*{Rand:0;Padding:0;Listenstiltyp:keine;}
ein,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "Schriftart";}
/* Demo */
.demo{width:800px;margin:0 auto;}
.demo div{margin:40px 0 0 0;}

html:

Code kopieren
Der Code lautet wie folgt:

<div Klasse="Demo">
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=2&num=5" width="650" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="border:solid 1px red" width="225" height="90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=9" width="800" height="60" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe>
</div>
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=13" width="650" height="221" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div>
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=19" width="800" height="120" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</div>

Einige Effekte:

Ich habe in meinem Projekt den folgenden Effekt erzielt

<<:  Detailliertes Verständnis der Vue-Methode zum Generieren von QR-Codes mit vue-qr

>>:  Protokoll des Kompilierungs- und Installationsprozesses des Nginx-Quellcodes

Artikel empfehlen

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Inhaltsverzeichnis Vorwort Text 1. Globale Regist...

CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]

CSS-Schreibreihenfolge 1. Positionsattribute (Pos...

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

Da wir Bilder hochladen möchten, müssen wir zunäc...

Vue implementiert Multi-Grid-Eingabefeld auf mobilem Endgerät

Vor Kurzem hat das Unternehmen die Anforderung ge...

Detaillierte Schritte zur Implementierung der Excel-Importfunktion in Vue

1. Front-End-geführte Implementierungsschritte De...

Der Button hat einen hässlichen grauen Rand. Wie kann ich ihn entfernen?

Ich habe den Dialog beim Schließen verwendet und e...

Vue verwendet el-table, um Spalten und Zeilen dynamisch zusammenzuführen

In diesem Artikelbeispiel wird der spezifische Co...

Tutorial zur Installation von MySQL8 unter Linux CentOS7

1. Installation der RPM-Version Überprüfen Sie, o...

JavaScript-Array-Deduplizierungslösung

Inhaltsverzeichnis Methode 1: Set: Es handelt sic...

Detaillierte Analyse des Unterschieds zwischen Ref und Reactive in Vue3.0

Inhaltsverzeichnis Ref und Reaktiv Referenz Reakt...

Was tun, wenn der Auto-Increment-Primärschlüssel in MySQL aufgebraucht ist?

Im Vorstellungsgespräch sollten Sie folgende Szen...

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktion...

Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht

Welche historische Version kann die aktuelle Tran...

Kopieren und Einfügen ist der Feind der Verpackung

Bevor wir über OO, Entwurfsmuster und die vielen o...