利用iframe在網(wǎng)頁中顯示天氣附效果截圖
發(fā)布時間:2014-10-08 17:01:03 作者:佚名
我要評論

這篇文章主要介紹了利用iframe在網(wǎng)頁中顯示天氣,這個功能還是比較實(shí)用的,實(shí)現(xiàn)起來也比較容易,需要的朋友可以看看
css:
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/* demo */
.demo{width:800px;margin:0 auto;}
.demo div{margin: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>
部分效果:
我在項(xiàng)目中做了一個下面的效果
復(fù)制代碼
代碼如下:*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/* demo */
.demo{width:800px;margin:0 auto;}
.demo div{margin:40px 0 0 0;}
html:
復(fù)制代碼
代碼如下:<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>
部分效果:

我在項(xiàng)目中做了一個下面的效果

相關(guān)文章
- frame這個標(biāo)簽不知大家注意過沒有,它必須放在frameset中使用,而且經(jīng)常容易和iframe混淆,這里我們就來舉例講解HTML中iframe和frame的區(qū)別,需要的朋友可以參考下2016-05-30
深入剖析HTML5 內(nèi)聯(lián)框架iFrame
下面小編就為大家?guī)硪黄钊肫饰鯤TML5 內(nèi)聯(lián)框架iFrame。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-05-04- 這篇文章主要介紹了HTML中iFrame標(biāo)簽的兩個用法,分別是作為彈出層鋪底覆蓋 ,和跨域?qū)懭隿ookie,需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了a標(biāo)簽的target鏈接指向iframe的方法,切記不是用Id來做指向的目標(biāo)而是name,需要的朋友可以參考下2014-09-04
用jquery進(jìn)行修復(fù)在iframe下的頁面錨點(diǎn)失效問題
iframe頁面沒有滾動條,在父窗體中出現(xiàn)滾動條,錨點(diǎn)標(biāo)記就會失效,解決方法是用js計(jì)算iframe在父窗體位置,錨點(diǎn)在firame中的位置,兩者相加成為父窗體的滾動2014-07-28iframe框架在IE瀏覽器下將白色背景設(shè)為透明色
使用iframe畫頁面的層級框架,大部分瀏覽器是沒有背景的,在IE中默認(rèn)是有一個白色的背景色的,為了顯示的更美觀一些將iframe中的allowTransparent屬性設(shè)置為true,即可2014-06-13iframe截取網(wǎng)站部分內(nèi)容實(shí)現(xiàn)思路及代碼
使用iframe可以截取網(wǎng)站的部分內(nèi)容,主要配合width、height、overflow等屬性來實(shí)現(xiàn)的,具體示例如下,需要的朋友不要錯過2014-06-12淺談Iframe網(wǎng)頁內(nèi)部的導(dǎo)航窗口
下面小編就為大家?guī)硪黄獪\談Iframe網(wǎng)頁內(nèi)部的導(dǎo)航窗口。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-17