教你利用iframe在网页中显示天气

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

教你利用iframe在网页中显示天气来源:http://www.ido321.com/921.html

CSS:

1: *{margin:0;padding:0;list-style-type:none;}

2: a,img{border:0;}

3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

4:

5: /* demo */

6: .demo{width:800px;margin:0 auto;}

7: .demo div{margin:40px 0 0 0;}

html:

1: <div class="demo">

2:

3: <div>

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>

5: </div>

6:

7: <div>

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>

9: </div>

10:

11: <div>

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>

13: </div>

14:

15: <div>

16: <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=11" width="500" height="15" frameborder="0"></iframe>

17: </div>

18:

19: <div>

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>

21: </div>

22:

23: <div>

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>

25: </div>

26: /div>

部分效果:

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

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

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航