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

Verwenden von CSS3 zum Erstellen von Header-Animationseffekten

Die offizielle Website von Netease Kanyouxi (http...

So implementieren Sie eine Paging-Abfrage in MySQL

SQL-Paging-Abfrage:Hintergrund Im System des Unte...

Detaillierte Erklärung der Meta-Tags und ihrer Verwendung in HTML

Ich werde keine weitere Zeit mit Unsinnsgerede ve...

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Dieser Artikel verwendet die Lizenzvereinbarung „...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

In diesem Artikel wird der spezifische Code von j...

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Durch die Verwendung von Abkürzungen können Sie di...

Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode

1. Chinesische Eingabemethode einrichten 2. Stell...

Implementierungscode zur Installation von vsftpd in Ubuntu 18.04

Installieren Sie vsftpd $ sudo apt-get installier...

So implementieren Sie die @person-Funktion über Vue

Dieser Artikel verwendet Vue und fügt Mausklicker...

MP3- oder Flashplayer-Code auf der Webseite abspielen

Code kopieren Der Code lautet wie folgt: <Obje...

So erstellen Sie eine Liste in CocosCreator

CocosCreator-Version: 2.3.4 Cocos hat keine Liste...

HTTP-Statuscodes

Dieser Statuscode gibt Auskunft über den Status d...