Heim > Web-Frontend > HTML-Tutorial > 教你利用iframe在网页中显示天气_html/css_WEB-ITnose

教你利用iframe在网页中显示天气_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:56:49
Original
1319 Leute haben es durchsucht

来源:http://www.ido321.com/921.html

css:

   1: *{margin:0;padding:0;list-style-type:none;}
Nach dem Login kopieren
   2: a,img{border:0;}
Nach dem Login kopieren
   3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
Nach dem Login kopieren
   4:
Nach dem Login kopieren
   5: /* demo */
Nach dem Login kopieren
   6: .demo{width:800px;margin:0 auto;}
Nach dem Login kopieren
   7: .demo div{margin:40px 0 0 0;}
Nach dem Login kopieren

html:

   1: <div class="demo">
Nach dem Login kopieren
   2:
Nach dem Login kopieren
   3:    <div>
Nach dem Login kopieren
   4:        <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>
Nach dem Login kopieren
   5:    </div>
Nach dem Login kopieren
   6:
Nach dem Login kopieren
   7:    <div>
Nach dem Login kopieren
   8:        <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>
Nach dem Login kopieren
   9:    </div>
Nach dem Login kopieren
  10:
Nach dem Login kopieren
  11:    <div>
Nach dem Login kopieren
  12:        <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>
Nach dem Login kopieren
  13:    </div>
Nach dem Login kopieren
  14:
Nach dem Login kopieren
  15:    <div>
Nach dem Login kopieren
  16:        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe>
Nach dem Login kopieren
  17:    </div>
Nach dem Login kopieren
  18:
Nach dem Login kopieren
  19:    <div>
Nach dem Login kopieren
  20:        <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>
Nach dem Login kopieren
  21:    </div>
Nach dem Login kopieren
  22:
Nach dem Login kopieren
  23:    <div>
Nach dem Login kopieren
  24:        <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>
Nach dem Login kopieren
  25:    </div>
Nach dem Login kopieren
  26: /div>
Nach dem Login kopieren

部分效果:

我在项目中做了一个下面的效果

演示地址:http://jsfiddle.net/2yfL8x0g/embedded/result/

下一篇将告诉你怎么获取农历日期:http://www.ido321.com/926.html

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage