iframe を使用して Web ページに天気の影響を表示します

iframe を使用して Web ページに天気の影響を表示します
CS: ...

コードをコピー
コードは次のとおりです。

*{マージン:0;パディング:0;リストスタイルタイプ:なし;}
a,画像{ボーダー:0;}
body{font:12px/180% Arial、Helvetica、sans-serif、「新宋体」;}
/* デモ */
.demo{幅:800px;マージン:0自動;}
.demo div{マージン:40px 0 0 0;}

html:

コードをコピー
コードは次のとおりです。

<div class="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>

いくつかの効果:

私はプロジェクトで次のエフェクトを作成しました

<<:  vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

>>:  Nginx ソースコードのコンパイルとインストールのプロセス記録

推薦する

jsを使って簡単な計算機を作る

この記事では、jsで簡単な計算機を作成する具体的なコードを参考までに共有します。具体的な内容は次のと...

Dockerが独自のローカルイメージリポジトリを構築するための手順

1. 環境と準備1. Ubuntu 14.04 2.Docker環境2. 建設プロセス1. ミラーソ...

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

いくつかの一般的な CSS レイアウト (要約)

まとめこの記事では、次の一般的なレイアウトを紹介します。 3 列レイアウトを実装する方法は多数ありま...

フォームから Vue ElementUI を使用してログイン効果を実装する例

目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...

Centos7.3 Nginx をインストールして展開し、https を設定する方法

設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...

MySQL グループレプリケーションの設定手順 (推奨)

MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...

ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明

前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...